CODEWITHSUNDEEP
javascriptleaflet
Shoji Yamada
Shoji Yamada

Reputation: 75

Leaflet Control Search Error: Uncaught TypeError: L.Control.geocoder is not a function

I am new to Leaflet and I'm trying to add the Control Search in my map but I encounter this error

Uncaught TypeError: L.Control.geocoder is not a function

I already added these links

<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>

I initialized my map

var map = L.map('map').setView([40.71455, -74.00712], 10);

Then added basemap

var dark_matrix = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
minZoom: 3,
maxZoom: 20,
attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
dark_matrix.addTo(map);

Add the control like this

L.Control.geocoder().addTo(map);

I also tried this one

var searchControl = L.Control.geocoder();
searchControl.addTo(map);

But still does not work.

Here is the jsfiddle of the project https://jsfiddle.net/mgy01hwx/1/

Upvotes: 0

Views: 3189

Answers (1)

kboul
kboul

Reputation: 14600

Just change the order of the script files. The plugin needs leaflet code to be imported first in order to work.

  • first import leaflet.js

  • then import leaflet-geocoder.js

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> 
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

Demo

Upvotes: 2

Related Questions