web-mapping-leaflet 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa368a340b31d95e96481cd67f88df7af34b6859f04a3a3298ebab866a33c874
-  data.tar.gz: c2de1331aa90d555dc99567e76634df95f81ab0d5cf6f68d676e690106654989
+  metadata.gz: d335b8cfb675309323358b071d9fce8f280d7a426971dc8d8bf777b76578d700
+  data.tar.gz: 7fecab3b5eb0ed3244f43023ebbb20c1fb571ebca1a0ca0452edb6d9eaef9004
 SHA512:
-  metadata.gz: f7752aae1b22149676330bd9e7fac057a59e5986b843f536964214bdb7e146b6450f0d889570bcf9099049639d468b515c5b8f4d86427820740c677320a9c9df
-  data.tar.gz: b053d124ca1129a35665e91ab2a4dabe4836ca96a5c069b0a6d3ded7522d5c1f2113cc98280eb934645bbbcf967d3a05513ca49276626b2de38ce344d3e2faf0
+  metadata.gz: a9e260e2bc273745516d08f287f328fea92ab401b1b1419339965c58be3bbbe7d3a929e5e2ede6f65c4ae9bcdac9fba2257f1ed40b7af5a204af4781e257974c
+  data.tar.gz: 2cc6fb985905b2ad6a450607b0025f2f2fc133a6ebb27aad6c0fc15ede52c6cd7d821afa9c8bca4cc36b078308993710c987421ddb26009258f049e246dc383a

data/_includes/map.html

@@ -26,21 +26,41 @@
 
   // 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 }}
-  };
+
+    {% if i.createIcon == false %}
+      var {{i.name}}Style = {
+        radius: {{ i.radius }},
+        fillColor: "{{ i.fillColor }}",
+        color: "{{ i.color }}",
+        weight: {{ i.weight }},
+        opacity: {{ i.opacity }},
+        fillOpacity: {{ i.fillOpacity }}
+      };
+    {% else i.createIcon == true %}
+      var {{i.name}}Style = {
+        icon: '{{ i.icontype }}',
+        iconShape: '{{ i.iconShape }}',
+        borderColor: '{{ i.borderColor }}',
+        textColor: '{{ i.textColor }}',
+        innerIconStyle: 'font-size:10px;padding-top:1px;'
+      };
+
+      var {{i.name}}Beautify = L.BeautifyIcon.icon( {{i.name}}Style );
+    {% endif %}
+
   {% 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);
+          {% if i.createIcon == false %}
+          return L.circleMarker(latlng, {{ i.name }}Style);
+          {% else i.createIcon == true %}
+          return L.marker(latlng, {
+            icon: {{i.name}}Beautify
+          });
+          {% endif %}
       },
       onEachFeature: function (feature, layer) {
           var popupcontent = [];
@@ -83,11 +103,28 @@
   {% endfor %}
 
   // configuration for polygon data
+  function getColor(d) {
+    return d > 16000 ? '#800026' :
+    d > 14000  ? '#BD0026' :
+    d > 12000  ? '#E31A1C' :
+    d > 10000  ? '#FC4E2A' :
+    d > 8000   ? '#FD8D3C' :
+    d > 6000   ? '#FEB24C' :
+    d > 4000   ? '#FED976' :
+               '#FFEDA0';
+  }
   {% 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);
-      },
+    style: function (feature) {
+        return {
+          fillColor: getColor(feature.properties.{{i.featID}}),
+          weight: {{i.weight}},
+          opacity: {{i.opacity}},
+          color: "{{i.color}}",
+          dashArray: {{i.dashArray}},
+          fillOpacity: {{i.fillOpacity}}
+        };
+    },
       onEachFeature: function (feature, layer) {
           var popupcontent = [];
           for (var prop in feature.properties) {

data/_sass/web-mapping-leaflet.scss

@@ -3,8 +3,11 @@
 @import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css";
 @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";
+@import "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css";
+@import "https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.css";
 
 $background-color : #f8f9fa ;
+// $assetPath : "images";
 
 html, body, #container {
   height: 100%;
@@ -61,45 +64,71 @@ p, ul, ol, pre, blockquote {
   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);
-  }
-}
+// /* Leaflet fullscreen */
+//
+// .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);
+//   }
+// }
+
+// // Beautify Marker
+// .beautify-marker {
+//   text-align: center;
+//   font-weight: 700;
+//   font-family: monospace;
+//   position: absolute;
+//   -webkit-box-sizing: border-box;
+//   -moz-box-sizing: border-box;
+//   box-sizing: border-box;
+//   &.circle, &.circle-dot, &.doughnut {
+//     border-radius: 100%;
+//   }
+//   &.marker {
+//     border-top-left-radius: 50%;
+//     border-top-right-radius: 50% 100%;
+//     border-bottom-left-radius: 100% 50%;
+//     border-bottom-right-radius: 0%;
+//     /* rotating 45deg clockwise to get the corner bottom center */
+//     transform: rotate(45deg);
+//     > * {
+//       /* rotating 45deg counterclock to adjust marker content back to normal */
+//       transform: rotate(-45deg);
+//     }
+//   }
+// }