1

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);
Improve this question
3
  • 1
    What does the browser console log say? Are you using the HTML file directly? Try using it via a server.
    – bugmenot123
    Feb 8, 2016 at 14:07
  • I just checked and it says 'Failed to load resource: net::ERR_FILE_NOT_FOUND' to the OSM nominatim geocoder. And yes I'm directly using the HTML file.
    – Salman
    Feb 8, 2016 at 14:11
  • Just as an alternative (ignore this if you are satisfied with the solution here): via liedman.net/leaflet-routing-machine you can even implement different geocoders and different routing engines as plugin.
    – stephan75
    Feb 9, 2016 at 17:02

1 Answer 1

Reset to default
5

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.

Improve this answer
1
  • Thanks alot. I installed Apache and now it works. Thanks for the other suggestions on how to make a webserver too.
    – Salman
    Feb 8, 2016 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.