Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<title>Leaflet How-to</title>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
body {margin:0;padding:0;}
#map {position: absolute;top:0;bottom:0;right:0;left:0;}
<div id="map"></div>
var map = new'map').setView([50.7344700,7.0987190], 15);
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: '&copy; <a href="" target="_blank">OpenStreetMap</a> Mitwirkende',
var api = new L.OverPassLayer({
endpoint: "",
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 ( in this.instance._ids) return;
this.instance._ids[] = true;
var pos = new L.LatLng(, e.lon);
var popup = this.instance._poiInfo(e.tags,;
var color = e.tags.collection_times ? 'green':'red';
var circle =, 50, {
color: color,
fillOpacity: 0

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[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