web-mapping-leaflet 0.1.1 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: aa368a340b31d95e96481cd67f88df7af34b6859f04a3a3298ebab866a33c874
4
- data.tar.gz: c2de1331aa90d555dc99567e76634df95f81ab0d5cf6f68d676e690106654989
3
+ metadata.gz: '079ccc06399d1239a217718506c8af45a13e65b6faa5e1f7156ac43d105afb82'
4
+ data.tar.gz: 85797d5297572b078e58e07d46c897e9706d0559427956ddc1ca334a0209fa8e
5
5
  SHA512:
6
- metadata.gz: f7752aae1b22149676330bd9e7fac057a59e5986b843f536964214bdb7e146b6450f0d889570bcf9099049639d468b515c5b8f4d86427820740c677320a9c9df
7
- data.tar.gz: b053d124ca1129a35665e91ab2a4dabe4836ca96a5c069b0a6d3ded7522d5c1f2113cc98280eb934645bbbcf967d3a05513ca49276626b2de38ce344d3e2faf0
6
+ metadata.gz: 3edabff4671a0e49fac46e01fd91ef74af4e4bf6c10d2f8412f03cff899bb4f174bd7c20661821b0f15aa8ded65c15ff625a949a570a32a9458d5324a8902b33
7
+ data.tar.gz: f755a21b0d978094e0881fccf0e6338b28df3da5f1bf96b9ef5352d62c492ec18ca0c92212f05b591ffd709109e4e8a0b216f67b2f5410d9abcfa93bbdd6638d
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2019 wslerry
3
+ Copyright (c) 2019 Lerry William Seling
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
data/README.md CHANGED
@@ -4,7 +4,7 @@ Welcome to your new Jekyll theme! In this directory, you'll find the files you n
4
4
 
5
5
  To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
6
6
 
7
- TODO: Delete this and the text above, and describe your gem
7
+ [DEMO](https://lerryws.xyz/web-mapping-leaflet/)
8
8
 
9
9
 
10
10
  ## Installation
@@ -35,7 +35,7 @@ TODO: Write usage instructions here. Describe your available layouts, includes,
35
35
 
36
36
  ## Contributing
37
37
 
38
- 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.
38
+ 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.
39
39
 
40
40
  ## Development
41
41
 
@@ -0,0 +1,24 @@
1
+ title: Web Mapping Jekyll & Leaflet
2
+ author: Lerry William # change this to your name
3
+ email:
4
+ description: >- # this means to ignore newlines until "baseurl:"
5
+ A template for web-mapping website build in Jekyll + leaflet
6
+ baseurl: ""
7
+ url: "https://lerryws.xyz/web-mapping-leaflet/" # change this to your url
8
+
9
+ markdown: kramdown
10
+
11
+ theme: web-mapping-leaflet
12
+
13
+ plugins:
14
+ - jekyll-feed
15
+ - jekyll-seo-tag
16
+ - jekyll-include-cache
17
+
18
+ exclude : [
19
+ "Gemfile",
20
+ "Gemfile.lock",
21
+ "README.md",
22
+ "LICENSE.txt",
23
+ "web-mapping-leaflet.gemspec",
24
+ ]
@@ -0,0 +1,2 @@
1
+ description: >-
2
+ 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 :)
@@ -0,0 +1,7 @@
1
+ description: >-
2
+ Put your map legends or any map description here or do whatever you want.
3
+
4
+ # TODO: legend .svg or .png
5
+ # display png or svg legeds
6
+ # legend:
7
+ # - path to svg or png
@@ -0,0 +1,15 @@
1
+ css-baseurl:
2
+ - "/assets/css/main.css"
3
+ - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
4
+ - "https://cdn.jsdelivr.net/gh/wslerry/BeautifyMarker/leaflet-beautify-marker-icon.css"
5
+
6
+ js-baseurl:
7
+ - "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
8
+ - "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
9
+ - "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
10
+ - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
11
+ - "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"
12
+ - "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"
13
+ - "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"
14
+ - "https://cdn.jsdelivr.net/gh/wslerry/BeautifyMarker/leaflet-beautify-marker-icon.js"
15
+ - "https://raw.githubusercontent.com/timwis/leaflet-choropleth/gh-pages/src/choropleth.js"
@@ -0,0 +1,12 @@
1
+ map_bound: false
2
+ param:
3
+ -
4
+ lat: 1 #centre
5
+ long: 114 #centre
6
+ zoom: 2
7
+ minZoom: 2 #minimum zoom level
8
+ maxZoom: 18 #maximum zoom level
9
+ x1: 108.99437294 #longitude lower left
10
+ y1: -0.04073073 #latitude lower left
11
+ x2: 115.89948784 #longitude upper right
12
+ y2: 5.75707846 #latitude upper right
@@ -0,0 +1,55 @@
1
+ geojson:
2
+ point:
3
+ -
4
+ name: "Cities"
5
+ url: "assets/cities.geojson"
6
+ createIcon: false
7
+ iconURL:
8
+ radius: 10
9
+ fillColor: "#9817f2"
10
+ color: "#be85ff"
11
+ weight: 5
12
+ opacity: 0.7
13
+ fillOpacity: 1
14
+ # icon setting
15
+ icontype: "virus" # refer to font-awesome icons for icon of your interest
16
+ iconShape: "marker" # circle / marker
17
+ borderColor: "#f46118"
18
+ textColor: "#f46118"
19
+
20
+ -
21
+ name: "Random"
22
+ url: "assets/random.geojson"
23
+ createIcon: false
24
+ iconURL:
25
+ radius: 6
26
+ fillColor: "#f26617"
27
+ color: "#ffa985"
28
+ weight: 5
29
+ opacity: 0.7
30
+ fillOpacity: 1
31
+ # Icon setting
32
+ icontype: "leaf" # refer to font-awesome icons for icon of your interest
33
+ iconShape: "marker" # circle / marker
34
+ borderColor: "#f9ae89"
35
+ textColor: "#f9ae89"
36
+
37
+ line:
38
+ -
39
+ name: "Line"
40
+ url: "assets/polyline.geojson"
41
+ color: "#ff0000"
42
+ weight: 2
43
+ dashArray: "10"
44
+ opacity: 1
45
+
46
+ area:
47
+ -
48
+ name: "Countries"
49
+ url: "assets/countries_dummy.geojson"
50
+ featID: 'pop'
51
+ weight: 2
52
+ opacity: 0.7
53
+ color: "#ffffff"
54
+ dashArray: "3"
55
+ fillOpacity: 0.8
@@ -0,0 +1,67 @@
1
+ base:
2
+ -
3
+ select: true
4
+ extrajs: false
5
+ leaflet-js:
6
+ format: L.tileLayer
7
+ id: OSM
8
+ name: OpenStreetMap
9
+ url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
10
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
11
+ -
12
+ select: false
13
+ extrajs: false
14
+ leaflet-js:
15
+ format: L.tileLayer
16
+ id: esri_sat
17
+ name: ESRI Imagery
18
+ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
19
+ attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
20
+ -
21
+ select: false
22
+ extrajs: false
23
+ leaflet-js:
24
+ format: L.tileLayer
25
+ id: esri_street
26
+ name: ESRI Street
27
+ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
28
+ attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
29
+ -
30
+ select: false
31
+ extrajs: false
32
+ leaflet-js:
33
+ format: L.tileLayer
34
+ id: esri_topo
35
+ name: ESRI Topo
36
+ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
37
+ attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
38
+
39
+ # Add overlay layer maps (web tiles)
40
+ overlay:
41
+ # -
42
+ # select: false
43
+ # extrajs: false
44
+ # leaflet-js:
45
+ # format: L.tileLayer
46
+ # id: esri_sat_overlay
47
+ # name: ESRI Imagery
48
+ # url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
49
+ # attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
50
+ # -
51
+ # select: false
52
+ # extrajs: false
53
+ # leaflet-js:
54
+ # format: L.tileLayer
55
+ # id: esri_street_overlay
56
+ # name: ESRI Street
57
+ # url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
58
+ # attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
59
+ # -
60
+ # select: false
61
+ # extrajs: false
62
+ # leaflet-js:
63
+ # format: L.tileLayer
64
+ # id: esri_topo_overlay
65
+ # name: ESRI Topo
66
+ # url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
67
+ # attribution: 'Powered by &copy; <a href="https://www.esri.com/en-us/legal/copyright-trademarks">ESRI</a>'
File without changes
@@ -8,7 +8,7 @@
8
8
  </button>
9
9
  </div>
10
10
  <div class="modal-body">
11
- {{ site.description }}
11
+ {{ site.data.about.description }}
12
12
  </div>
13
13
  <div class="modal-footer">
14
14
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -10,12 +10,20 @@
10
10
 
11
11
  {%- seo -%}
12
12
 
13
- {% for css in site.css-baseurl %}
13
+ <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png">
14
+ <!-- <link rel="icon" type="image/png" href="assets/icons/favicon.png"> -->
15
+ <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/android-chrome-192x192.png">
16
+ <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/android-chrome-512x512.png">
17
+ <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
18
+ <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
19
+ <link rel="manifest" href="assets/icons/site.webmanifest">
20
+
21
+ {% for css in site.data.libs.css-baseurl %}
14
22
  <link rel="stylesheet" href="{{ css | absolute_url }}">
15
23
  {% endfor %}
16
24
 
17
- {% for js in site.js-baseurl %}
18
- <script type="text/javascript" src="{{ js }}"></script>
25
+ {% for js in site..data.libs.js-baseurl %}
26
+ <script type="text/javascript" src="{{ js | absolute_url }}"></script>
19
27
  {% endfor %}
20
28
 
21
29
  </head>
@@ -2,13 +2,13 @@
2
2
  <div class="modal-dialog" role="document">
3
3
  <div class="modal-content">
4
4
  <div class="modal-header">
5
- <h5 class="modal-title" id="exampleModalLabel">About</h5>
5
+ <h5 class="modal-title" id="exampleModalLabel">Legends</h5>
6
6
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7
7
  <span aria-hidden="true">&times;</span>
8
8
  </button>
9
9
  </div>
10
10
  <div class="modal-body">
11
- Legends goes here...
11
+ {{ site.data.legends.description }}
12
12
  </div>
13
13
  <div class="modal-footer">
14
14
  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -2,45 +2,105 @@
2
2
  <div id="map"></div>
3
3
  </div>
4
4
  <script>
5
- var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
6
- attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
5
+ // var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
6
+ // attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
7
+ // });
8
+
9
+ {% for map in site.data.map_source.base %}
10
+ var {{% if map.id %}}{{ map.id }} = {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
11
+ attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
7
12
  });
13
+ {% endfor %}
14
+
15
+ {% for map in site.data.map_source.overlay %}
16
+ var {{% if map.id %}}{{ map.id }} = {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
17
+ attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
18
+ });
19
+ {% endfor %}
20
+
21
+ {% if site.data.map_config.map_bound == true %}
22
+ {% for map in site.data.map_config.param %}
23
+ var corner1 = L.latLng({{ map.y1 }}, {{ map.x1 }}),
24
+ corner2 = L.latLng({{ map.y2 }}, {{ map.x2 }});
25
+ var bounds = L.latLngBounds(corner1, corner2);
26
+ {% endfor %}
27
+ {% endif %}
8
28
 
9
29
  {% for map in site.data.map_config.param %}
10
30
  var coords = [{{ map.lat }}, {{ map.long }}]; // the geographic center of our map
11
31
  var zoomLevel = {{ map.zoom }}; // the map scale
12
-
13
- var map = L.map('map', {
14
- center: coords,
15
- zoom: zoomLevel,
16
- maxZoom: {{ map.maxZoom }},
17
- minZoom: {{ map.minZoom }},
18
- layers: OSM
19
- });
20
32
  {% endfor %}
21
33
 
34
+ {% if site.data.map_config.map_bound == true %}
35
+ {% for map in site.data.map_config.param %}
36
+ var map = L.map('map', {
37
+ maxBounds: bounds,
38
+ center: coords,
39
+ zoom: zoomLevel,
40
+ maxZoom: {{ map.maxZoom }},
41
+ minZoom: {{ map.minZoom }},
42
+ layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
43
+ {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
44
+ });
45
+ {% endfor %}
46
+ {% else %}
47
+ {% for map in site.data.map_config.param %}
48
+ var map = L.map('map', {
49
+ center: coords,
50
+ zoom: zoomLevel,
51
+ maxZoom: {{ map.maxZoom }},
52
+ minZoom: {{ map.minZoom }},
53
+ layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
54
+ {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
55
+ });
56
+ {% endfor %}
57
+ {% endif %}
58
+
59
+
22
60
  // load basemap
23
61
  var baseMaps = {
24
- "OpenStreetMap": OSM,
62
+ {% for map in site.data.map_source.base %}
63
+ "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
64
+ {% endfor %}
25
65
  };
26
66
 
27
67
  // configuration for point data
28
68
  {% for i in site.data.map_data.geojson.point %}
29
- var {{i.name}}Style = {
30
- radius: {{ i.radius }},
31
- fillColor: "{{ i.fillColor }}",
32
- color: "{{ i.color }}",
33
- weight: {{ i.weight }},
34
- opacity: {{ i.opacity }},
35
- fillOpacity: {{ i.fillOpacity }}
36
- };
69
+
70
+ {% if i.createIcon == false %}
71
+ var {{i.name}}Style = {
72
+ radius: {{ i.radius }},
73
+ fillColor: "{{ i.fillColor }}",
74
+ color: "{{ i.color }}",
75
+ weight: {{ i.weight }},
76
+ opacity: {{ i.opacity }},
77
+ fillOpacity: {{ i.fillOpacity }}
78
+ };
79
+ {% else i.createIcon == true %}
80
+ var {{i.name}}Style = {
81
+ icon: '{{ i.icontype }}',
82
+ iconShape: '{{ i.iconShape }}',
83
+ borderColor: '{{ i.borderColor }}',
84
+ textColor: '{{ i.textColor }}',
85
+ innerIconStyle: 'font-size:10px;padding-top:1px;'
86
+ };
87
+
88
+ var {{i.name}}Beautify = L.BeautifyIcon.icon( {{i.name}}Style );
89
+ {% endif %}
90
+
37
91
  {% endfor %}
38
92
 
39
93
  {% for i in site.data.map_data.geojson.point %}
40
94
  var {{i.name}}_markerClusters = L.markerClusterGroup({showCoverageOnHover: false});
41
95
  var {{i.name}}= L.geoJson(null, {
42
96
  pointToLayer: function (feature, latlng) {
43
- return L.circleMarker(latlng, {{i.name}}Style);
97
+ {% if i.createIcon == false %}
98
+ return L.circleMarker(latlng, {{ i.name }}Style);
99
+ {% else i.createIcon == true %}
100
+ return L.marker(latlng, {
101
+ icon: {{i.name}}Beautify
102
+ });
103
+ {% endif %}
44
104
  },
45
105
  onEachFeature: function (feature, layer) {
46
106
  var popupcontent = [];
@@ -83,11 +143,45 @@
83
143
  {% endfor %}
84
144
 
85
145
  // configuration for polygon data
146
+ function getColor(d) {
147
+ return d > 16000 ? '#800026' :
148
+ d > 14000 ? '#BD0026' :
149
+ d > 12000 ? '#E31A1C' :
150
+ d > 10000 ? '#FC4E2A' :
151
+ d > 8000 ? '#FD8D3C' :
152
+ d > 6000 ? '#FEB24C' :
153
+ d > 4000 ? '#FED976' :
154
+ '#FFEDA0';
155
+ }
156
+
157
+ // // configuration for polygon data
158
+ // function getColor(d) {
159
+ // // d should be between 0 and 1
160
+ // //
161
+ // // 6 scale blues
162
+ // var blue = ['rgb(239,243,255)',
163
+ // 'rgb(198,219,239)',
164
+ // 'rgb(158,202,225)',
165
+ // 'rgb(107,174,214)',
166
+ // 'rgb(49,130,189)',
167
+ // 'rgb(8,81,156)'
168
+ // ];
169
+ //
170
+ // return blue[Math.round(d*6)];
171
+ // }
172
+
86
173
  {% for i in site.data.map_data.geojson.area %}
87
174
  var {{i.name}}= L.geoJson(null, {
88
- pointToLayer: function (feature, latlng) {
89
- return L.circleMarker(latlng, {{i.name}}Style);
90
- },
175
+ style: function (feature) {
176
+ return {
177
+ fillColor: getColor(feature.properties['{{i.featID}}']),
178
+ weight: {{i.weight}},
179
+ opacity: {{i.opacity}},
180
+ color: "{{i.color}}",
181
+ dashArray: {{i.dashArray}},
182
+ fillOpacity: {{i.fillOpacity}}
183
+ };
184
+ },
91
185
  onEachFeature: function (feature, layer) {
92
186
  var popupcontent = [];
93
187
  for (var prop in feature.properties) {
@@ -104,6 +198,10 @@
104
198
 
105
199
  // load overlay
106
200
  var overlay = {
201
+ {% for map in site.data.map_source.overlay %}
202
+ "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
203
+ {% endfor %}
204
+
107
205
  {% for i in site.data.map_data.geojson.point %}
108
206
  "{{i.name}}": {{i.name}}_markerClusters,
109
207
  {% endfor %}