web-mapping-leaflet 0.1.1 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa368a340b31d95e96481cd67f88df7af34b6859f04a3a3298ebab866a33c874
-  data.tar.gz: c2de1331aa90d555dc99567e76634df95f81ab0d5cf6f68d676e690106654989
+  metadata.gz: '079ccc06399d1239a217718506c8af45a13e65b6faa5e1f7156ac43d105afb82'
+  data.tar.gz: 85797d5297572b078e58e07d46c897e9706d0559427956ddc1ca334a0209fa8e
 SHA512:
-  metadata.gz: f7752aae1b22149676330bd9e7fac057a59e5986b843f536964214bdb7e146b6450f0d889570bcf9099049639d468b515c5b8f4d86427820740c677320a9c9df
-  data.tar.gz: b053d124ca1129a35665e91ab2a4dabe4836ca96a5c069b0a6d3ded7522d5c1f2113cc98280eb934645bbbcf967d3a05513ca49276626b2de38ce344d3e2faf0
+  metadata.gz: 3edabff4671a0e49fac46e01fd91ef74af4e4bf6c10d2f8412f03cff899bb4f174bd7c20661821b0f15aa8ded65c15ff625a949a570a32a9458d5324a8902b33
+  data.tar.gz: f755a21b0d978094e0881fccf0e6338b28df3da5f1bf96b9ef5352d62c492ec18ca0c92212f05b591ffd709109e4e8a0b216f67b2f5410d9abcfa93bbdd6638d

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 wslerry
+Copyright (c) 2019 Lerry William Seling
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -4,7 +4,7 @@ Welcome to your new Jekyll theme! In this directory, you'll find the files you n
 
 To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
 
-TODO: Delete this and the text above, and describe your gem
+[DEMO](https://lerryws.xyz/web-mapping-leaflet/)
 
 
 ## Installation
@@ -35,7 +35,7 @@ TODO: Write usage instructions here. Describe your available layouts, includes,
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/wslerry/web-mapping-leaflet. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ## Development
 

data/_config.yml

@@ -0,0 +1,24 @@
+title: Web Mapping Jekyll & Leaflet
+author: Lerry William # change this to your name
+email:
+description: >- # this means to ignore newlines until "baseurl:"
+  A template for web-mapping website build in Jekyll + leaflet
+baseurl: ""
+url: "https://lerryws.xyz/web-mapping-leaflet/" # change this to your url
+
+markdown: kramdown
+
+theme: web-mapping-leaflet
+
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-include-cache
+
+exclude : [
+  "Gemfile",
+  "Gemfile.lock",
+  "README.md",
+  "LICENSE.txt",
+  "web-mapping-leaflet.gemspec",
+  ]

data/_data/about.yml

@@ -0,0 +1,2 @@
+description: >-
+  This map template can be use for any web mapping purposes, it powered by Jekyll and Leaflet! Do whatever you want with it, be creative :)

data/_data/legends.yml

@@ -0,0 +1,7 @@
+description: >-
+  Put your map legends or any map description here or do whatever you want.
+
+# TODO: legend .svg or .png
+# display png or svg legeds
+# legend:
+#   - path to svg or png

data/_data/libs.yml

@@ -0,0 +1,15 @@
+css-baseurl:
+  - "/assets/css/main.css"
+  - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+  - "https://cdn.jsdelivr.net/gh/wslerry/BeautifyMarker/leaflet-beautify-marker-icon.css"
+
+js-baseurl:
+  - "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
+  - "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+  - "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+  - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
+  - "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"
+  - "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"
+  - "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"
+  - "https://cdn.jsdelivr.net/gh/wslerry/BeautifyMarker/leaflet-beautify-marker-icon.js"
+  - "https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/src/choropleth.js"

data/_data/map_config.yml

@@ -0,0 +1,12 @@
+map_bound: false
+param:
+  -
+    lat: 1 #centre
+    long: 114 #centre
+    zoom: 2
+    minZoom: 2 #minimum zoom level
+    maxZoom: 18 #maximum zoom level
+    x1: 108.99437294 #longitude lower left
+    y1: -0.04073073 #latitude lower left
+    x2: 115.89948784 #longitude upper right
+    y2: 5.75707846 #latitude upper right

data/_data/map_data.yml

@@ -0,0 +1,55 @@
+geojson:
+  point:
+    -
+      name: "Cities"
+      url: "assets/cities.geojson"
+      createIcon: false
+      iconURL:
+      radius: 10
+      fillColor: "#9817f2"
+      color: "#be85ff"
+      weight: 5
+      opacity: 0.7
+      fillOpacity: 1
+      # icon setting
+      icontype: "virus" # refer to font-awesome icons for icon of your interest
+      iconShape: "marker" # circle / marker
+      borderColor: "#f46118"
+      textColor: "#f46118"
+
+    -
+      name: "Random"
+      url: "assets/random.geojson"
+      createIcon: false
+      iconURL:
+      radius: 6
+      fillColor: "#f26617"
+      color: "#ffa985"
+      weight: 5
+      opacity: 0.7
+      fillOpacity: 1
+      # Icon setting
+      icontype: "leaf" # refer to font-awesome icons for icon of your interest
+      iconShape: "marker" # circle / marker
+      borderColor: "#f9ae89"
+      textColor: "#f9ae89"
+
+  line:
+    -
+      name: "Line"
+      url: "assets/polyline.geojson"
+      color: "#ff0000"
+      weight: 2
+      dashArray: "10"
+      opacity: 1
+
+  area:
+    -
+      name: "Countries"
+      url: "assets/countries_dummy.geojson"
+      featID: 'pop'
+      weight: 2
+      opacity: 0.7
+      color: "#ffffff"
+      dashArray: "3"
+      fillOpacity: 0.8

data/_data/map_source.yml

@@ -0,0 +1,67 @@
+base:
+  -
+    select: true
+    extrajs: false
+    leaflet-js:
+    format: L.tileLayer
+    id: OSM
+    name: OpenStreetMap
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  -
+    select: false
+    extrajs: false
+    leaflet-js:
+    format: L.tileLayer
+    id: esri_sat
+    name: ESRI Imagery
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+    attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
+  -
+    select: false
+    extrajs: false
+    leaflet-js:
+    format: L.tileLayer
+    id: esri_street
+    name: ESRI Street
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
+    attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
+  -
+    select: false
+    extrajs: false
+    leaflet-js:
+    format: L.tileLayer
+    id: esri_topo
+    name: ESRI Topo
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
+    attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
+
+# Add overlay layer maps (web tiles)
+overlay:
+  # -
+  #   select: false
+  #   extrajs: false
+  #   leaflet-js:
+  #   format: L.tileLayer
+  #   id: esri_sat_overlay
+  #   name: ESRI Imagery
+  #   url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+  #   attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
+  # -
+  #   select: false
+  #   extrajs: false
+  #   leaflet-js:
+  #   format: L.tileLayer
+  #   id: esri_street_overlay
+  #   name: ESRI Street
+  #   url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
+  #   attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
+  # -
+  #   select: false
+  #   extrajs: false
+  #   leaflet-js:
+  #   format: L.tileLayer
+  #   id: esri_topo_overlay
+  #   name: ESRI Topo
+  #   url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
+  #   attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'

data/_includes/about.html

@@ -8,7 +8,7 @@
         </button>
       </div>
       <div class="modal-body">
-        {{ site.description }}
+        {{ site.data.about.description }}
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

data/_includes/head.html

@@ -10,12 +10,20 @@
 
   {%- seo -%}
 
-  {% for css in site.css-baseurl %}
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
+  <!-- <link rel="icon" type="image/png" href="assets/icons/favicon.png"> -->
+  <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/android-chrome-192x192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/android-chrome-512x512.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
+  <link rel="manifest" href="assets/icons/site.webmanifest">
+
+  {% for css in site.data.libs.css-baseurl %}
   <link rel="stylesheet" href="{{ css  | absolute_url }}">
   {% endfor %}
 
-  {% for js in site.js-baseurl %}
-  <script type="text/javascript" src="{{ js }}"></script>
+  {% for js in site..data.libs.js-baseurl %}
+  <script type="text/javascript" src="{{ js | absolute_url }}"></script>
   {% endfor %}
 
 </head>

data/_includes/map-legends.html

@@ -2,13 +2,13 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">About</h5>
+        <h5 class="modal-title" id="exampleModalLabel">Legends</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
-        Legends goes here...
+        {{ site.data.legends.description }}
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

data/_includes/map.html

@@ -2,45 +2,105 @@
   <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 OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
+  //   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  // });
+
+  {% for map in site.data.map_source.base %}
+  var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
+    attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
   });
+  {% endfor %}
+
+  {% for map in site.data.map_source.overlay %}
+    var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
+      attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
+    });
+  {% endfor %}
+
+  {% if site.data.map_config.map_bound == true %}
+    {% for map in site.data.map_config.param %}
+      var corner1  = L.latLng({{ map.y1 }}, {{ map.x1 }}),
+      corner2  = L.latLng({{ map.y2 }}, {{ map.x2 }});
+      var bounds = L.latLngBounds(corner1, corner2);
+    {% endfor %}
+  {% endif %}
 
   {% 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 %}
 
+  {% if site.data.map_config.map_bound == true %}
+    {% for map in site.data.map_config.param %}
+      var map = L.map('map', {
+        maxBounds: bounds,
+        center: coords,
+        zoom: zoomLevel,
+        maxZoom: {{ map.maxZoom }},
+        minZoom: {{ map.minZoom }},
+        layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
+            {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
+      });
+    {% endfor %}
+  {% else %}
+    {% for map in site.data.map_config.param %}
+      var map = L.map('map', {
+        center: coords,
+        zoom: zoomLevel,
+        maxZoom: {{ map.maxZoom }},
+        minZoom: {{ map.minZoom }},
+        layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
+            {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
+      });
+    {% endfor %}
+  {% endif %}
+
+
   // load basemap
   var baseMaps = {
-    "OpenStreetMap": OSM,
+    {% for map in site.data.map_source.base %}
+    "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
+    {% endfor %}
   };
 
   // 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 +143,45 @@
   {% 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';
+  }
+
+  // // configuration for polygon data
+  // function getColor(d) {
+  //   // d should be between 0 and 1
+  //   //
+  //   // 6 scale blues
+  //   var blue = ['rgb(239,243,255)',
+  //       'rgb(198,219,239)',
+  //       'rgb(158,202,225)',
+  //       'rgb(107,174,214)',
+  //       'rgb(49,130,189)',
+  //       'rgb(8,81,156)'
+  //       ];
+  //
+  //   return blue[Math.round(d*6)];
+  // }
+
   {% 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) {
@@ -104,6 +198,10 @@
 
   // load overlay
   var overlay = {
+    {% for map in site.data.map_source.overlay %}
+      "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
+    {% endfor %}
+
     {% for i in site.data.map_data.geojson.point %}
     "{{i.name}}": {{i.name}}_markerClusters,
     {% endfor %}