Leaflet minimal map

by Alex Azuero

HTML

<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
var baseLayer1 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 1"
  }).addTo(map);

function clickHandler(e) {
  var clickBounds = L.latLngBounds(e.latlng, e.latlng);

  var intersectingFeatures = [];
    for (var l in map._layers) {
    var overlay = map._layers[l];
    if (overlay._layers) {
      for (var f in overlay._layers) {
        var feature = overlay._layers[f];
        var bounds;
        if (feature.getBounds) bounds = feature.getBounds();
        else if (feature._latlng) {
          bounds = L.latLngBounds(feature._latlng, feature._latlng);
        }
        if (bounds && clickBounds.intersects(bounds)) {
          intersectingFeatures.push(feature);
        }
      }
    }
  }
  var html = "Found features: " + intersectingFeatures.length + "<br/>" + intersectingFeatures.map(function(o) {
    return o.properties.type
  }).join('<br/>');

  map.openPopup(html, e.latlng, {
    offset: L.point(0, -24)
  });
}

map.on("click", clickHandler);

// add some markers
function createMarker(lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.on("click", clickHandler);
  marker.properties = {
    type: "point"
  }; // add some dummy properties; usually would be geojson
  return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];

// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers).addTo(map);

// show features
map.fitBounds(overlay.getBounds(), {
  maxZoom: 11
});

// create another layer for shapes or whatever
var circle = L.circle([36.9, -2.45], 2250, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
});
circle.on('click', clickHandler);
circle.properties = {
  type: "circle"
};
var overlay2 = L.featureGroup([circle]).addTo(map);