0

I plan to add a leaflet control geocoder or a search box to my app. Although I wrote the needed code it doesn't display any geocoder and I don't know what is wrong. I have provided a part of my index.html file including related code.

<link rel="stylesheet" href="{% static 'geocoder/Control.Geocoder.css' %}" />
<script type="text/javascript" src="{% static 'geocoder/Control.Geocoder.js' %}"></script>

<script>
var geocoder = L.Control.geocoder().on('markgeocode', function(event) {
     var center = event.geocode.center;
     L.marker(center).addTo(map);
     map.setView(center, map.getZoom());
}).addTo(map);
</script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Mohsen Bakhtiari
  • 3
  • 3
  • Are you sure the library is loading? 404 or other errors in the console? – isherwood Apr 08 '20 at 15:40
  • I am using two files including Control.Geocoder.css and Control.Geocoder.js. Other parts of my map work without any problem but I don't know why It doesn't show geocoder! – Mohsen Bakhtiari Apr 08 '20 at 15:45

1 Answers1

1

You have to set the geocode "type": Types

var _geocoderType = L.Control.Geocoder.nominatim();
var geocoder = L.Control.geocoder({
   geocoder: _geocoderType
}).addTo(map);

geocoder.on('markgeocode', function(event) {
     var center = event.geocode.center;
     L.marker(center).addTo(map);
     map.setView(center, map.getZoom());
});
Falke Design
  • 10,635
  • 3
  • 15
  • 30