leaflet overpass layer plugin

by Nikolay Petrov

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="http://kartenkarsten.github.io/leaflet-layer-overpass/dist/OverPassLayer.js"></script>
<div id="map"></div>

CSS

#map { 
    height: 400px; 
}

JavaScript

var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { subdomains: 'abc'});

// https://github.com/kartenkarsten/leaflet-layer-overpass
var postboxes = new L.OverPassLayer({
  minzoom: 12,
  query: "node(BBOX)[amenity=post_box];out;",
  callback: function(data) {
    for(i=0;i<data.elements.length;i++) {
      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, 20, {
        color: color,
        fillColor: '#fa3',
        fillOpacity: 0.5
      })
      .bindPopup(popup);
      this.instance.addLayer(circle);
    }
  },
});

var map = L.map('map', {center: L.latLng(57.80783,28.35478),zoom: 14});

L.control.layers(
  { "OSM":osm.addTo(map)}, 
  { "Почта": postboxes }, 
  { collapsed: false }
).addTo(map);