A Leaflet Plugin to create a custom POI overlay - thanks to the OSM-Dataset and the OverPass-API
checkout the Demo
var attr_osm = 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors',
attr_overpass = 'POI via <a href="http://www.overpass-api.de/">Overpass API</a>';
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm, attr_overpass].join(', ')});
var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(52.265, 10.524), 14);
//OverPassAPI overlay
var opl = new L.OverPassLayer({
query: "node(BBOX)['amenity'='post_box'];out;",
}
map.addLayer(opl);
In order to get an valid query the Overpass-turbo IDE might help.
You can specify an options object as an argument of L.OverPassLayer.
options: {
endpoint: "http://overpass.osm.rambler.ru/cgi/",
query: "node(BBOX)['amenity'='post_box'];out;",
callback: function(data) {
for(var i=0;i<data.elements.length;i++) {
var e = data.elements[i];
if (e.id in this.instance._ids) return;
this.instance._ids[e.id] = true;
var pos = new L.LatLng(e.lat, e.lon);
var popup = this.instance._poiInfo(e.tags,e.id);
var color = e.tags.collection_times ? 'green':'red';
var circle = L.circle(pos, 50, {
color: color,
fillColor: '#fa3',
fillOpacity: 0.5
})
.bindPopup(popup);
this.instance.addLayer(circle);
}
},
minZoomIndicatorOptions: {
position: 'topright',
minZoomMessageNoLayer: "no layer assigned",
minZoomMessage: "current Zoom-Level: CURRENTZOOM all data at Level: MINZOOMLEVEL"
}
};
- Leaflet (tried with version 0.6.2, 0.7.3)
- OverPass result to -> geoJSON to -> Leaflet Layer to support ways and areas as well (see also PoiMap, OverPassTurbo)
- improve popup text. use links, format addresses and contact details (compare with OpenLinkMap)
- improve caching - allow to store data for some days in browser