Leaflet + Geo search

by Arjan Haverkamp

HTML

<!-- Include leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Include geosearch -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/geosearch.css">
<script src="https://unpkg.com/[email protected]/dist/geosearch.umd.js"></script>

<!-- Map div -->
<div id="map" style="width:800px;height:600px"></div>

JavaScript

const map = L.map('map').setView([52.370, 4.904], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const search = new GeoSearch.GeoSearchControl({
  provider: new GeoSearch.OpenStreetMapProvider(),
  style: 'bar'
});

map.addControl(search);