web-mapping-leaflet 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0d85753cbbddf067e6697503f1accec8fb89acd1d3473c573b90176afa88b64f
-  data.tar.gz: 432ce0827a159d22815f4817fe1c8da2180b702c7a5dd4cf94c26b62bfa7097e
+  metadata.gz: aa368a340b31d95e96481cd67f88df7af34b6859f04a3a3298ebab866a33c874
+  data.tar.gz: c2de1331aa90d555dc99567e76634df95f81ab0d5cf6f68d676e690106654989
 SHA512:
-  metadata.gz: 67e719b5aa02b2134f09ebe7680a86f35db1e73bf514f7e1f085c2f76bd89ea4c1fdab9ac46c89390276e2b7518e91d9899af086b914c3b48432bef8bdbd98c1
-  data.tar.gz: 6e73ee3ee9c8aeab020ca8bef0b3eb9c49416595f8f03fe073369e5f6c1028e7e3c8eb25569642e1e6bba25c8a0f1ea19739db5cb08b97d09fb595c95b70e596
+  metadata.gz: f7752aae1b22149676330bd9e7fac057a59e5986b843f536964214bdb7e146b6450f0d889570bcf9099049639d468b515c5b8f4d86427820740c677320a9c9df
+  data.tar.gz: b053d124ca1129a35665e91ab2a4dabe4836ca96a5c069b0a6d3ded7522d5c1f2113cc98280eb934645bbbcf967d3a05513ca49276626b2de38ce344d3e2faf0

data/_includes/map.html

@@ -6,63 +6,118 @@
     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);
+  {% for map in site.data.map_config.param %}
+  var coords = [{{ map.lat }}, {{ map.long }}]; // the geographic center of our map
+  var zoomLevel = {{ map.zoom }}; // the map scale
+
+  var map = L.map('map', {
+    center: coords,
+    zoom: zoomLevel,
+    maxZoom: {{ map.maxZoom }},
+    minZoom: {{ map.minZoom }},
+    layers: OSM
+  });
+  {% endfor %}
 
-  //Styles
-  var geojsonMarkerOptions = {
-      radius: 8,
-      fillColor: "#ff7800",
-      color: "#000",
-      weight: 1,
-      opacity: 1,
-      fillOpacity: 0.8
+  // load basemap
+  var baseMaps = {
+    "OpenStreetMap": OSM,
   };
 
-  var markerClusters = L.markerClusterGroup({showCoverageOnHover: false});
-
-  var mydata= L.geoJson(null, {
-      // pointToLayer: function (feature, latlng) {
-      //     return L.circleMarker(latlng, geojsonMarkerOptions);
-      // },
-
+  // configuration for point data
+  {% for i in site.data.map_data.geojson.point %}
+  var {{i.name}}Style = {
+      radius: {{ i.radius }},
+      fillColor: "{{ i.fillColor }}",
+      color: "{{ i.color }}",
+      weight: {{ i.weight }},
+      opacity: {{ i.opacity }},
+      fillOpacity: {{ i.fillOpacity }}
+  };
+  {% endfor %}
+
+  {% for i in site.data.map_data.geojson.point %}
+  var {{i.name}}_markerClusters = L.markerClusterGroup({showCoverageOnHover: false});
+  var {{i.name}}= L.geoJson(null, {
+      pointToLayer: function (feature, latlng) {
+          return L.circleMarker(latlng, {{i.name}}Style);
+      },
       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 )
+          {{i.name}}_markerClusters.addLayer( layer )
       } //end onEachFeature
 
   });
-
-
-  $.getJSON("assets/cities.geojson", function (data) {
-    mydata.addData(data);
+  $.getJSON("{{ i.url }}", function (data) {
+    {{i.name}}.addData(data);
   });
+  {% endfor %}
+
+  // configuration for line data
+  {% for i in site.data.map_data.geojson.line %}
+  var {{i.name}}= L.geoJson(null, {
+      style: function (feature) {
+          return {
+            color: "{{ i.color }}",
+            weight: {{ i.weight }},
+            dashArray: "{{ i.dashArray }}",
+            opacity: {{ i.opacity }},
+          };
+      },
+      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 />"));
+      } //end onEachFeature
 
+  });
+  $.getJSON("{{ i.url }}", function (data) {
+    {{i.name}}.addData(data);
+  });
+  {% endfor %}
+
+  // configuration for polygon data
+  {% for i in site.data.map_data.geojson.area %}
+  var {{i.name}}= L.geoJson(null, {
+      pointToLayer: function (feature, latlng) {
+          return L.circleMarker(latlng, {{i.name}}Style);
+      },
+      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 />"));
+      } //end onEachFeature
 
-  // load basemap
-  var baseMaps = {
-    "OpenStreetMap": OSM,
-  };
+  });
+  $.getJSON("{{ i.url }}", function (data) {
+    {{i.name}}.addData(data);
+  });
+  {% endfor %}
 
   // load overlay
   var overlay = {
-    "Cities": markerClusters,
+    {% for i in site.data.map_data.geojson.point %}
+    "{{i.name}}": {{i.name}}_markerClusters,
+    {% endfor %}
+    {% for i in site.data.map_data.geojson.line %}
+    "{{i.name}}": {{i.name}},
+    {% endfor %}
+    {% for i in site.data.map_data.geojson.area %}
+    "{{i.name}}": {{i.name}},
+    {% endfor %}
   };
 
+  L.control.layers(baseMaps, overlay, {collapsed: true}).addTo(map);
 
-  // markerClusters.addLayer( mydata );
+  map.addControl(new L.Control.Fullscreen());
 
-  L.control.layers(baseMaps, overlay, {collapsed: true}).addTo(map);
 
 </script>

data/_sass/web-mapping-leaflet.scss

@@ -4,7 +4,6 @@
 @import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css";
 @import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css";
 
-
 $background-color : #f8f9fa ;
 
 html, body, #container {
@@ -61,3 +60,46 @@ p, ul, ol, pre, blockquote {
 .footer p {
   font-size: 11px;
 }
+
+/* Leaflet fullscreen */
+$assetPath : "images";
+.leaflet-control-fullscreen a {
+  background: #fff url(#{$assetPath}/fullscreen.png) no-repeat 0 0;
+  background-size: 26px 52px;
+}
+
+.leaflet-touch .leaflet-control-fullscreen a {
+  background-position: 2px 2px;
+}
+
+.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+  background-position: 0 -26px;
+}
+
+.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+  background-position: 2px -24px;
+}
+
+/* Do not combine these two rules; IE will break. */
+
+.leaflet-container {
+  &:-webkit-full-screen, &.leaflet-fullscreen-on {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.leaflet-pseudo-fullscreen {
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 99999;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .leaflet-control-fullscreen a {
+    background-image: url(#{$assetPath}/fullscreen@2x.png);
+  }
+}