Contents

<div id="container">
  <div id="map"></div>
</div>
<script>
  var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });

  var coords = [0, 0]; // the geographic center of our map
  var zoomLevel = 3; // the map scale
  // var map = L.map('map', {
  //   center: coords,
  //   zoom: zoomLevel,
  //   layers: OSM
  // });

  var map = L.map('map',{layers: OSM}).setView(coords, zoomLevel);

  //Styles
  var geojsonMarkerOptions = {
      radius: 8,
      fillColor: "#ff7800",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
  };

  var markerClusters = L.markerClusterGroup({showCoverageOnHover: false});

  var mydata= L.geoJson(null, {
      // pointToLayer: function (feature, latlng) {
      //     return L.circleMarker(latlng, geojsonMarkerOptions);
      // },

      onEachFeature: function (feature, layer) {
          var popupcontent = [];
          for (var prop in feature.properties) {
              popupcontent.push("<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>" + prop + "</th><td>"+ feature.properties[prop] + "</td></tr>" + "<table>");
          }
          layer.bindPopup(popupcontent.join("<hr />"));
          markerClusters.addLayer( layer )
      } //end onEachFeature

  });


  $.getJSON("assets/cities.geojson", function (data) {
    mydata.addData(data);
  });


  // load basemap
  var baseMaps = {
    "OpenStreetMap": OSM,
  };

  // load overlay
  var overlay = {
    "Cities": markerClusters,
  };


  // markerClusters.addLayer( mydata );

  L.control.layers(baseMaps, overlay, {collapsed: true}).addTo(map);

</script>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
web-mapping-leaflet-0.1.0	_includes/map.html