Geocoding with Leaflet
Adding an autocomplete search box to your Leaflet powered map is easy with Geocode Earth.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geocode Earth Leaflet autocomplete demo</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://unpkg.com/protomaps-leaflet@4.0.1/dist/protomaps-leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// configuration
const API_KEY = '<YOUR API KEY>';
const PROTOMAPS_KEY = '<YOUR PROTOMAPS KEY>';
// create basic Leaflet map
var map = L.map('map', {
center:[0, 0],
zoom: 2,
minZoom: 2,
maxZoom: 19,
scrollWheelZoom: false,
zoomControl: false
});
// Replace with your Geocode Earth API key
const geocoder = new L.Control.Geocoder.GeocodeEarth({ apiKey: API_KEY });
const control = L.Control.geocoder({
placeholder: "Search a city or address",
collapsed: false,
geocoder
});
control.addTo(map);
protomapsL.leafletLayer({
url: 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=' + PROTOMAPS_KEY,
theme: 'light',
lang: 'en'
}).addTo(map);
</script>
</body>
</html>
Be sure to replace <YOUR API KEY>
with your Geocode Earth API key.
Customizing #
The geocoder plugin can be customized, see the documentation on GitHub for more details.