[GIS] Leaflet OSM Geocoder not working

geocodingjavascriptleafletopenstreetmap

Maybe this sounds a silly question but the leaflet OSM Geocoder published here Leaflet Control Geocoder
doesn't work for me. I can see the search bar but when I search something, nothing happens. The map works, the layer control works. My html is stored locally on my hard disk. I created it for practice purposes. Is this a reason? Please ignore the bad structure of the code.

var myIcon = L.icon({
    iconUrl: 'iconred.png',
    iconSize:     [20, 20]
}),

    myIcon2 = L.icon({
    iconUrl: 'iconblue.png',
    iconSize:     [15, 15]
});



var termini = L.marker([41.90165, 12.50079], {icon: myIcon}),
   terminiPopup = termini.bindPopup("Termini (Main Station)"),

   colosseum = L.marker([41.89029, 12.49231]),
   colosseumPopup = colosseum.bindPopup("Colosseum"),

   forum = L.marker([41.892574, 12.486913]),
   forumPopup = forum.bindPopup("Roman Forum"),

   palantine = L.marker([41.892592, 12.487466]),
   palantinePopup = palantine.bindPopup("Palantine Hill"),

   pantheon = L.marker([41.898539, 12.477216]),
   pantheonPopup = pantheon.bindPopup("Pantheon"),

   lateran = L.marker([41.885913, 12.505952]),
   lateranPopup = lateran.bindPopup("Arcbasilica of St. John Lateran"),

   peter = L.marker([41.902143, 12.454312]),
   peterPopup = peter.bindPopup("St. Peter's Basilica"),

   vatican = L.marker([41.906659, 12.453765]),
   vaticanPopup = vatican.bindPopup("Vatican Museums"),

   trevi = L.marker([41.901108, 12.483388]),
   treviPopup = trevi.bindPopup("Trevi Mountain"),

   navona = L.marker([41.899210, 12.473340]),
   navonaPopup = navona.bindPopup("Piazza Navona"),

   gianicolo = L.marker([41.891518, 12.461428]),
   gianicoloPopup = gianicolo.bindPopup("Gianicolo Hill"),   

   spanish = L.marker([41.905932, 12.483083]),
   spanishPopup = spanish.bindPopup("Spanish Steps"),

   trastevere = L.marker([41.879897, 12.469241]),
   trasteverePopup = trastevere.bindPopup("Trastevere District"),

   villaBorghese = L.marker([41.912793, 12.485364]),
   villaBorghesePopup = villaBorghese.bindPopup("Villa Borghese"),

   repubblica = L.marker([41.90276, 12.49583], {icon: myIcon}),
   repubblicaPopup = repubblica.bindPopup("Repubblica"),

   barberini = L.marker([41.90383, 12.48876], {icon: myIcon}),
   barberiniPopup = barberini.bindPopup("Barberini"),

   spagna = L.marker([41.90680, 12.48450], {icon: myIcon}),
   spagnaPopup = spagna.bindPopup("Spagna"),

   flaminio = L.marker([41.91282, 12.47712], {icon: myIcon}),
   flaminioPopup = flaminio.bindPopup("Flaminio"),

   lepanto = L.marker([41.91136, 12.46617], {icon: myIcon}),
   lepantoPopup = lepanto.bindPopup("Lepanto"),

   ottaviano = L.marker([41.90941, 12.45831], {icon: myIcon}),
   ottavianoPopup = ottaviano.bindPopup("Ottaviano"),

   cipro = L.marker([41.90737, 12.44769], {icon: myIcon}),
   ciproPopup = cipro.bindPopup("Cipro"),

   valleAurelia = L.marker([41.90288, 12.44139], {icon: myIcon}),
   valleAureliaPopup = valleAurelia.bindPopup("Valle Aurelia"),

   baldoDegli = L.marker([41.89889, 12.43305], {icon: myIcon}),
   baldoDegliPopup = baldoDegli.bindPopup("Baldo Degli Ubadli"),

   cornelia = L.marker([41.90053, 12.42642], {icon: myIcon}),
   corneliaPopup = cornelia.bindPopup("Cornelia"),

   battistini = L.marker([41.90614, 12.41510], {icon: myIcon}),
   battistiniPopup = battistini.bindPopup("Battistini"),

   vittorioE = L.marker([41.89489, 12.50446], {icon: myIcon}),
   vittorioEPopup = vittorioE.bindPopup("Vittorio Emanuele"),

   manzoni = L.marker([41.89034, 12.50685], {icon: myIcon}),
   manzoniPopup = manzoni.bindPopup("Manzoni"),

   sanGiovanni = L.marker([41.88669, 12.50918], {icon: myIcon}),
   sanGiovanniPopup = sanGiovanni.bindPopup("San Giovanni"),

   reDiRoma = L.marker([41.88163, 12.51440], {icon: myIcon}),
   reDiRomaPopup = reDiRoma.bindPopup("Re Di Roma"),

   ponteLungo = L.marker([41.87785, 12.51896], {icon: myIcon}),
   ponteLungoPopup = ponteLungo.bindPopup("Ponte Lungo"),

   furioCamillo = L.marker([41.87475, 12.52302], {icon: myIcon}),
   furioCamilloPopup = furioCamillo.bindPopup("Furio Camillo"),

   colliAlbani = L.marker([41.86939, 12.53009], {icon: myIcon}),
   colliAlbaniPopup = colliAlbani.bindPopup("Colli Albani"),

   arcoDiTravertino = L.marker([41.86638, 12.53509], {icon: myIcon}),
   arcoDiTravertinoPopup = arcoDiTravertino.bindPopup("Arco Di Travertino"),

   portaFurba = L.marker([41.86379, 12.54821], {icon: myIcon}),
   portaFurbaPopup = portaFurba.bindPopup("Porta Furba Quadraro"),

   numidio = L.marker([41.86213, 12.55266], {icon: myIcon}),
   numidioPopup = numidio.bindPopup("Numidio Quadrato"),

   lucioSestio = L.marker([41.85970, 12.55728], {icon: myIcon}),
   lucioSestioPopup = lucioSestio.bindPopup("Lucio Sestio"),

   giulioAgricola = L.marker([41.85660, 12.56263], {icon: myIcon}),
   giulioAgricolaPopup = giulioAgricola.bindPopup("Giulio Agricola"),

   subaugusta = L.marker([41.85383, 12.56770], {icon: myIcon}),
   subaugustaPopup = subaugusta.bindPopup("Subaugusta"),

   cinecitta = L.marker([41.84930, 12.57438], {icon: myIcon}),
   cinecittaPopup = cinecitta.bindPopup("Cinecitta"),

   anagnina = L.marker([41.84257, 12.58601], {icon: myIcon}),
   anagninaPopup = anagnina.bindPopup("Anagnina");

   cavour = L.marker([41.89482, 12.49352], {icon: myIcon2}).bindPopup("Cavour"),

   colosseo = L.marker([41.89143, 12.49149], {icon: myIcon2}).bindPopup("Colosseo"),

   circoMassimo = L.marker([41.88352, 12.48803], {icon: myIcon2}).bindPopup("Circo 

Massimo"),

   piramide = L.marker([41.87487, 12.48246], {icon: myIcon2}).bindPopup("Piramide"),

   garbatella = L.marker([41.86633, 12.48308], {icon: myIcon2}).bindPopup("Garbatella"),

   basilicaSPaolo = L.marker([41.85588, 12.47818], {icon: myIcon2}).bindPopup("Basilica San 

Paolo"),

   marconi = L.marker([41.84934, 12.47563], {icon: myIcon2}).bindPopup("Marconi"),

   eurMagliana = L.marker([41.83958, 12.46330], {icon: myIcon2}).bindPopup("EUR Magliana"),

   eurPalasport = L.marker([41.83004, 12.46670], {icon: myIcon2}).bindPopup("EUR 

Palasport"),

   eurFermi = L.marker([41.82886, 12.47087], {icon: myIcon2}).bindPopup("EUR Fermi"),

   laurentina = L.marker([41.82706, 12.48128], {icon: myIcon2}).bindPopup("Laurentina"),

   castroPretorio = L.marker([41.90630, 12.50555], {icon: myIcon2}).bindPopup("Castro 

Pretorio"), 

   policlinico = L.marker([41.90866, 12.51211], {icon: myIcon2}).bindPopup("Policlinico"),

   bologna = L.marker([41.91366, 12.52081], {icon: myIcon2}).bindPopup("Bologna"),

   tiburtina = L.marker([41.91076, 12.53033], {icon: myIcon2}).bindPopup("Tiburtina"),

   quintiliani = L.marker([41.91522, 12.53883], {icon: myIcon2}).bindPopup("Quintiliani"),

   montiTiburtini = L.marker([41.91575, 12.54800], {icon: myIcon2}).bindPopup("Monti 

Tiburtini"),

   pietralata = L.marker([41.91493, 12.55508], {icon: myIcon2}).bindPopup("Pietralata"),

   delSoccorso = L.marker([41.91550, 12.56060], {icon: myIcon2}).bindPopup("Santa Maria del 

Soccorso"),

   ponteMammolo = L.marker([41.92080, 12.56514], {icon: myIcon2}).bindPopup("Ponte 

Mammolo"),

   rebibbia = L.marker([41.92571, 12.57291], {icon: myIcon2}).bindPopup("Rebibbia");



var myTrip = L.layerGroup([termini, colosseum, forum, palantine, pantheon, lateran, peter,   

vatican, trevi, navona, gianicolo, spanish, trastevere, villaBorghese]),

    metroStops = L.layerGroup([anagnina, cinecitta, subaugusta, lucioSestio,      numidio, 

portaFurba, arcoDiTravertino, colliAlbani, furioCamillo, ponteLungo, reDiRoma, sanGiovanni, 

manzoni, vittorioE, battistini, cornelia, baldoDegli, valleAurelia, cipro, ottaviano, 

lepanto, flaminio, spagna, barberini, repubblica, cavour, rebibbia, ponteMammolo, 

pietralata, montiTiburtini, quintiliani, tiburtina, bologna, policlinico, castroPretorio, 

laurentina, eurFermi, eurPalasport, eurMagliana, marconi, basilicaSPaolo, garbatella, 

piramide, circoMassimo, colosseo]);



function terminiFunction() {
    map.panTo([41.901042, 12.500272])
    terminiPopup.openPopup()
}
function colosseumFunction() {
    map.panTo([41.89029, 12.49231])
    colosseumPopup.openPopup()
}
function forumFunction() {
    map.panTo([41.892574, 12.486913])
    forumPopup.openPopup()
}
function palantineFunction() {
    map.panTo([41.892592, 12.487466])
    palantinePopup.openPopup()
}
function pantheonFunction() {
    map.panTo([41.898539, 12.477216])
    pantheonPopup.openPopup()
}
function lateranFunction() {
    map.panTo([41.886089, 12.505684])
    lateranPopup.openPopup()
}
function treviFunction() {
    map.panTo([41.901108, 12.483388])
    treviPopup.openPopup()
}
function navonaFunction() {
    map.panTo([41.899210, 12.473340])
    navonaPopup.openPopup()
}
function peterFunction() {
    map.panTo([41.902143, 12.454312])
    peterPopup.openPopup()
}
function vaticanFunction() {
    map.panTo([41.906659, 12.453765])
    vaticanPopup.openPopup()
}
function gianicoloFunction() {
    map.panTo([41.891518, 12.461428])
    gianicoloPopup.openPopup()
}
function spanishFunction() {
    map.panTo([41.905932, 12.483083])
    spanishPopup.openPopup()
}
function trastevereFunction() {
    map.panTo([41.879897, 12.469241])
    trasteverePopup.openPopup()
}
function villaBorgheseFunction() {
    map.panTo([41.914250, 12.492380])
    villaBorghesePopup.openPopup()
}

var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> 

contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}),

   map = L.map('map', {
   center: [41.901318, 12.496635],
   zoom: 13, 
   layers: [osmBase, myTrip]
});

var overlayMaps = {
    "Metro Stops": metroStops,
    "My Trip": myTrip
     };

L.control.layers(null, overlayMaps, {collapsed:false}).addTo(map); 

var osmGeocoder = new L.Control.OSMGeocoder();
    map.addControl(osmGeocoder);

Best Answer

As already pointed out in the comments, the problem is that you are directly opening the HTML file in your browser. This will show up like file:///C:/map.html in your address bar.

The OSMGeocoder plugin is calling the URL location.protocol+//nominatim.openstreetmap.org/search (see source code). This works on webservers because the location.protocol is either http: or https: and will result in a valid URL, but in your case the protocol is file:. The Geocoder tries to access file:///nominatim.openstreetmap.org/search which is a folder or file on your computer, but that does not exist.

As a workaround you can replace protocol in the file Control.OSMGeocoder.js with https::

var url = "https://nominatim.openstreetmap.org/search" + L.Util.getParamString(params),

Another way is to install a webserver on your computer, which make files accessible via http://localhost/. If you have Python installed you can run python -m SimpleHTTPServer in a command line window or terminal in the folder where your map html file is. Other well-known webservers are Apache or nginx.

Related Question