Create a gist now

Instantly share code, notes, and snippets.

Embed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Leaflet How-to</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://kartenkarsten.github.io/leaflet-layer-overpass/OverPassLayer.js"></script>
<style>
body {margin:0;padding:0;}
#map {position: absolute;top:0;bottom:0;right:0;left:0;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new L.map('map').setView([50.7344700,7.0987190], 15);
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> Mitwirkende',
}).addTo(map);
var api = new L.OverPassLayer({
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,
fillOpacity: 0
})
.bindPopup(popup);
this.instance.addLayer(circle);
}
},
});
map.addLayer(api);
</script>
</body>
</html>
@matkoniecz

This comment has been minimized.

Show comment
Hide comment
@matkoniecz

matkoniecz Apr 3, 2015

I wanted to test it, so I downloaded this file and opened in Firefox.

Overpass queries are not working, with following output in console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];node(50.708634,7.119141,50.722547,7.141113)[amenity=post_box];out;. This can be fixed by moving the resource to the same domain or enabling CORS.

I wanted to test it, so I downloaded this file and opened in Firefox.

Overpass queries are not working, with following output in console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];node(50.708634,7.119141,50.722547,7.141113)[amenity=post_box];out;. This can be fixed by moving the resource to the same domain or enabling CORS.

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