Cal utilitzar la lliberia de mapes Leaflet . Suporta Leaflet v0.7.3 (i superior) and v1.0.0.
Pas 1: Al codi HTML, importar els fitxers Javascript i CSS de Leafet
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<!-- Load geocoding plugin after Leaflet -->
<script src="js/leaflet-geocoder.js"></script>
Pas 2: Al codi JavaScript, inicialitzar el mapa de Leaflet.
// This is an example of Leaflet usage; you should modify this for your needs.
var map = L.map('map', {
center:[41.431, 1.8580],
zoom: 8,
minZoom:2,
maxZoom:18,
scrollWheelZoom: true
});
Pas 3: Al codi JavaScript, afegir la configuració del geocodificador amb la URL.
var geocodingOptions = {
url:'https://eines.icgc.cat/geocodificador',
expanded: true,
autocomplete: true,
focus:false
};
L.control.geocoder(geocodingOptions).addTo(map);
Pas 4: Provar!