web-mapping-leaflet 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b9f70b475b44b0c6e3f51953a26f6b44096e30f58517e21c0992b269f9fc5f3
-  data.tar.gz: dc619e4ae24c820926dd457ddd955c5affa4eebf50fd5ae1e737abb675773d8f
+  metadata.gz: '079ccc06399d1239a217718506c8af45a13e65b6faa5e1f7156ac43d105afb82'
+  data.tar.gz: 85797d5297572b078e58e07d46c897e9706d0559427956ddc1ca334a0209fa8e
 SHA512:
-  metadata.gz: 599fced62c088ca80d58c1138d1a5578332de4ab00b6d0ad7441e0a919b9bec199d8b4760a30eb53856b858702af56bbae46d258322372b3d63364417975c331
-  data.tar.gz: 742845dc78d4c0c43817fd6f288d84fedb68f8b1f19fe98e12ceacd37dd0011c1bffb8e8fe279c6f6351b7c961f452fb1122b26bdd0bf10091dba82315a4f031
+  metadata.gz: 3edabff4671a0e49fac46e01fd91ef74af4e4bf6c10d2f8412f03cff899bb4f174bd7c20661821b0f15aa8ded65c15ff625a949a570a32a9458d5324a8902b33
+  data.tar.gz: f755a21b0d978094e0881fccf0e6338b28df3da5f1bf96b9ef5352d62c492ec18ca0c92212f05b591ffd709109e4e8a0b216f67b2f5410d9abcfa93bbdd6638d

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

@@ -1,2 +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 :)
+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

@@ -1,5 +1,5 @@
-description:
-  - Put your map legends or any map description here or do whatever you want.
+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

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

@@ -1,11 +1,12 @@
+map_bound: false
 param:
   -
-    lat: -0.857
-    long: 113.643
-    zoom: 5
+    lat: 1 #centre
+    long: 114 #centre
+    zoom: 2
     minZoom: 2 #minimum zoom level
     maxZoom: 18 #maximum zoom level
-    x1:  #longitude lower left
-    y1:  #latitude lower left
-    x2:  #longitude upper right
-    y2:  #latitude upper right
+    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

@@ -3,16 +3,16 @@ geojson:
     -
       name: "Cities"
       url: "assets/cities.geojson"
-      createIcon: true
-      iconURL: "assets/icons/icon.png"
-      radius: 6
+      createIcon: false
+      iconURL:
+      radius: 10
       fillColor: "#9817f2"
       color: "#be85ff"
       weight: 5
       opacity: 0.7
       fillOpacity: 1
       # icon setting
-      icontype: "building" # refer to font-awesome icons for icon of your interest
+      icontype: "virus" # refer to font-awesome icons for icon of your interest
       iconShape: "marker" # circle / marker
       borderColor: "#f46118"
       textColor: "#f46118"
@@ -21,7 +21,7 @@ geojson:
       name: "Random"
       url: "assets/random.geojson"
       createIcon: false
-      iconURL: "assets/icons/icon.png"
+      iconURL:
       radius: 6
       fillColor: "#f26617"
       color: "#ffa985"
@@ -40,14 +40,14 @@ geojson:
       url: "assets/polyline.geojson"
       color: "#ff0000"
       weight: 2
-      dashArray: "3"
+      dashArray: "10"
       opacity: 1
 
   area:
     -
       name: "Countries"
       url: "assets/countries_dummy.geojson"
-      featID: "pop"
+      featID: 'pop'
       weight: 2
       opacity: 0.7
       color: "#ffffff"

data/_data/map_source.yml

@@ -1 +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/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.html

@@ -2,26 +2,66 @@
   <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
@@ -113,11 +153,28 @@
     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, {
     style: function (feature) {
         return {
-          fillColor: getColor(feature.properties.{{i.featID}}),
+          fillColor: getColor(feature.properties['{{i.featID}}']),
           weight: {{i.weight}},
           opacity: {{i.opacity}},
           color: "{{i.color}}",
@@ -141,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 %}

data/_includes/navbar.html

@@ -1,11 +1,18 @@
 <header>
   <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
-    <i class="fa fa-globe-asia fa-2x" aria-hidden="true"></i>
+
+    <!-- <i class="fa fa-globe-asia fa-2x" aria-hidden="false"></i> -->
+    <!-- change this to your icon -->
+    <img width="50px" src="assets/icons/jekylleaf.png"/>
+
     <br>
+
     <a class="navbar-brand" href="#"> {{ site.title }} </a>
+
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
+
     <div class="collapse navbar-collapse" id="navbarCollapse">
       <ul class="nav navbar-nav ml-auto">
         <li class="nav-item" role="presentation">
@@ -19,5 +26,6 @@
         </li>
       </ul>
     </div>
+
   </nav>
 </header>

data/_layouts/page.html

@@ -1,4 +1,4 @@
 ---
 layout: default
 ---
-{{ content }}
+{% include_cached map.html %}

data/_sass/web-mapping-leaflet.scss

@@ -57,6 +57,15 @@ p, ul, ol, pre, blockquote {
   background-color: $background-color;
 }
 
+@media (min-width: 768px) {
+  .navbar img{
+    display: none;
+  }
+  .navbar .fa{
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .navbar .navbar-brand{
     font-size: 0;
@@ -80,7 +89,7 @@ p, ul, ol, pre, blockquote {
 // .beautify-marker {
 //   text-align: center;
 //   font-weight: 700;
-//   font-family: monospace;
+//   font-family: sans-serif;
 //   position: absolute;
 //   -webkit-box-sizing: border-box;
 //   -moz-box-sizing: border-box;
@@ -102,7 +111,7 @@ p, ul, ol, pre, blockquote {
 //   }
 // }
 
-// Leaflet
+//* Leaflet *//
 
 .leaflet-top .leaflet-control {
     margin-top: 24px;

data/assets/icons/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

data/index.md

@@ -1,6 +1,4 @@
 ---
 layout: page
-permalink: 
+permalink:
 ---
-
-{% include_cached map.html %}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: web-mapping-leaflet
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - wslerry
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-25 00:00:00.000000000 Z
+date: 2020-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,6 +24,76 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+- !ruby/object:Gem::Dependency
+  name: jekyll-include-cache
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.0
+- !ruby/object:Gem::Dependency
+  name: kramdown-parser-gfm
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: wdm
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.1.0
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -54,15 +124,17 @@ dependencies:
         version: '12.0'
 description: 
 email:
-- ghostspell89@yahoo.com
+- wslerry2@hotmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _config.yml
 - _data/about.yml
 - _data/legends.yml
+- _data/libs.yml
 - _data/map_config.yml
 - _data/map_data.yml
 - _data/map_source.yml
@@ -85,6 +157,13 @@ files:
 - assets/css/images/fullscreen.png
 - assets/css/images/fullscreen@2x.png
 - assets/css/main.scss
+- assets/icons/android-chrome-192x192.png
+- assets/icons/android-chrome-512x512.png
+- assets/icons/apple-touch-icon.png
+- assets/icons/favicon-16x16.png
+- assets/icons/favicon-32x32.png
+- assets/icons/jekylleaf.png
+- assets/icons/site.webmanifest
 - assets/js/leaflet-beautify-marker-icon.js
 - assets/polyline.geojson
 - assets/random.geojson