Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active January 24, 2020 07:46
Show Gist options
  • Save d3noob/7746162 to your computer and use it in GitHub Desktop.
Save d3noob/7746162 to your computer and use it in GitHub Desktop.
OSMGeocoder plugin for Leaflet.

An example of a map presented with leaflet.js and the OSMGeocoder plugin with a range of options.

<!DOCTYPE html>
<html>
<head>
<title>osmGeocoder Search Plugin for Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
<link
rel="stylesheet"
href="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.css"
/>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="http://k4r573n.github.io/leaflet-control-osm-geocoder/Control.OSMGeocoder.js">
</script>
<script>
var map = L.map('map').setView([-41.2858, 174.78682], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var osmGeocoder = new L.Control.OSMGeocoder({
collapsed: false,
position: 'bottomright',
text: 'Find!',
});
map.addControl(osmGeocoder);
</script>
</body>
</html>
@mradovic123
Copy link

Hi , I was running your code yesterday and worked perfectly.
But when I tried to run in this morning after restarting my computer the code does not run .
The error says "Uncaught SyntaxError: Unexpected string " ( I am running it on Chrome).
This does not make sense, I was just typing Baltimore in Find Box. I did not make any changes to the code, just copy paste and ran it on my local machine.

Thanks ,
mat

@mstangeo
Copy link

var map = L.map('map').setView([-41.2858, 174.78682], 14); i got this error highlighted in yellow what is the problem..help please

@Vitalii-Dev
Copy link

Vitalii-Dev commented Jan 23, 2020

Is it possible to configure the response of API? First of all I am interested in "addressdetails=1", something like this: https://nominatim.org/release-docs/develop/api/Lookup/#output-details

@d3noob
Copy link
Author

d3noob commented Jan 24, 2020

I haven't reviewed this plugin as part of the update yet, so My knowledge is about five years old on this. I'm afraid that I just don't know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment