web-mapping-leaflet 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_includes/map.html +49 -12
- data/_sass/web-mapping-leaflet.scss +71 -42
- data/assets/countries.geojson +186 -182
- data/assets/countries_dummy.geojson +188 -0
- data/assets/countries_dummy.geojson.tmp +188 -0
- data/assets/js/leaflet-beautify-marker-icon.js +206 -0
- data/assets/polyline.geojson +8 -8
- data/assets/random.geojson +362 -362
- metadata +4 -2
- data/assets/js/Leaflet.fullscreen.min.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d335b8cfb675309323358b071d9fce8f280d7a426971dc8d8bf777b76578d700
|
|
4
|
+
data.tar.gz: 7fecab3b5eb0ed3244f43023ebbb20c1fb571ebca1a0ca0452edb6d9eaef9004
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a9e260e2bc273745516d08f287f328fea92ab401b1b1419339965c58be3bbbe7d3a929e5e2ede6f65c4ae9bcdac9fba2257f1ed40b7af5a204af4781e257974c
|
|
7
|
+
data.tar.gz: 2cc6fb985905b2ad6a450607b0025f2f2fc133a6ebb27aad6c0fc15ede52c6cd7d821afa9c8bca4cc36b078308993710c987421ddb26009258f049e246dc383a
|
data/_includes/map.html
CHANGED
|
@@ -26,21 +26,41 @@
|
|
|
26
26
|
|
|
27
27
|
// configuration for point data
|
|
28
28
|
{% for i in site.data.map_data.geojson.point %}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
|
|
30
|
+
{% if i.createIcon == false %}
|
|
31
|
+
var {{i.name}}Style = {
|
|
32
|
+
radius: {{ i.radius }},
|
|
33
|
+
fillColor: "{{ i.fillColor }}",
|
|
34
|
+
color: "{{ i.color }}",
|
|
35
|
+
weight: {{ i.weight }},
|
|
36
|
+
opacity: {{ i.opacity }},
|
|
37
|
+
fillOpacity: {{ i.fillOpacity }}
|
|
38
|
+
};
|
|
39
|
+
{% else i.createIcon == true %}
|
|
40
|
+
var {{i.name}}Style = {
|
|
41
|
+
icon: '{{ i.icontype }}',
|
|
42
|
+
iconShape: '{{ i.iconShape }}',
|
|
43
|
+
borderColor: '{{ i.borderColor }}',
|
|
44
|
+
textColor: '{{ i.textColor }}',
|
|
45
|
+
innerIconStyle: 'font-size:10px;padding-top:1px;'
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
var {{i.name}}Beautify = L.BeautifyIcon.icon( {{i.name}}Style );
|
|
49
|
+
{% endif %}
|
|
50
|
+
|
|
37
51
|
{% endfor %}
|
|
38
52
|
|
|
39
53
|
{% for i in site.data.map_data.geojson.point %}
|
|
40
54
|
var {{i.name}}_markerClusters = L.markerClusterGroup({showCoverageOnHover: false});
|
|
41
55
|
var {{i.name}}= L.geoJson(null, {
|
|
42
56
|
pointToLayer: function (feature, latlng) {
|
|
43
|
-
|
|
57
|
+
{% if i.createIcon == false %}
|
|
58
|
+
return L.circleMarker(latlng, {{ i.name }}Style);
|
|
59
|
+
{% else i.createIcon == true %}
|
|
60
|
+
return L.marker(latlng, {
|
|
61
|
+
icon: {{i.name}}Beautify
|
|
62
|
+
});
|
|
63
|
+
{% endif %}
|
|
44
64
|
},
|
|
45
65
|
onEachFeature: function (feature, layer) {
|
|
46
66
|
var popupcontent = [];
|
|
@@ -83,11 +103,28 @@
|
|
|
83
103
|
{% endfor %}
|
|
84
104
|
|
|
85
105
|
// configuration for polygon data
|
|
106
|
+
function getColor(d) {
|
|
107
|
+
return d > 16000 ? '#800026' :
|
|
108
|
+
d > 14000 ? '#BD0026' :
|
|
109
|
+
d > 12000 ? '#E31A1C' :
|
|
110
|
+
d > 10000 ? '#FC4E2A' :
|
|
111
|
+
d > 8000 ? '#FD8D3C' :
|
|
112
|
+
d > 6000 ? '#FEB24C' :
|
|
113
|
+
d > 4000 ? '#FED976' :
|
|
114
|
+
'#FFEDA0';
|
|
115
|
+
}
|
|
86
116
|
{% for i in site.data.map_data.geojson.area %}
|
|
87
117
|
var {{i.name}}= L.geoJson(null, {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
118
|
+
style: function (feature) {
|
|
119
|
+
return {
|
|
120
|
+
fillColor: getColor(feature.properties.{{i.featID}}),
|
|
121
|
+
weight: {{i.weight}},
|
|
122
|
+
opacity: {{i.opacity}},
|
|
123
|
+
color: "{{i.color}}",
|
|
124
|
+
dashArray: {{i.dashArray}},
|
|
125
|
+
fillOpacity: {{i.fillOpacity}}
|
|
126
|
+
};
|
|
127
|
+
},
|
|
91
128
|
onEachFeature: function (feature, layer) {
|
|
92
129
|
var popupcontent = [];
|
|
93
130
|
for (var prop in feature.properties) {
|
|
@@ -3,8 +3,11 @@
|
|
|
3
3
|
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css";
|
|
4
4
|
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css";
|
|
5
5
|
@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css";
|
|
6
|
+
@import "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css";
|
|
7
|
+
@import "https://marslan390.github.io/BeautifyMarker/leaflet-beautify-marker-icon.css";
|
|
6
8
|
|
|
7
9
|
$background-color : #f8f9fa ;
|
|
10
|
+
// $assetPath : "images";
|
|
8
11
|
|
|
9
12
|
html, body, #container {
|
|
10
13
|
height: 100%;
|
|
@@ -61,45 +64,71 @@ p, ul, ol, pre, blockquote {
|
|
|
61
64
|
font-size: 11px;
|
|
62
65
|
}
|
|
63
66
|
|
|
64
|
-
/* Leaflet fullscreen */
|
|
65
|
-
|
|
66
|
-
.leaflet-control-fullscreen a {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.leaflet-touch .leaflet-control-fullscreen a {
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* Do not combine these two rules; IE will break. */
|
|
84
|
-
|
|
85
|
-
.leaflet-container {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.leaflet-pseudo-fullscreen {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
67
|
+
// /* Leaflet fullscreen */
|
|
68
|
+
//
|
|
69
|
+
// .leaflet-control-fullscreen a {
|
|
70
|
+
// background: #fff url(#{$assetPath}/fullscreen.png) no-repeat 0 0;
|
|
71
|
+
// background-size: 26px 52px;
|
|
72
|
+
// }
|
|
73
|
+
//
|
|
74
|
+
// .leaflet-touch .leaflet-control-fullscreen a {
|
|
75
|
+
// background-position: 2px 2px;
|
|
76
|
+
// }
|
|
77
|
+
//
|
|
78
|
+
// .leaflet-fullscreen-on .leaflet-control-fullscreen a {
|
|
79
|
+
// background-position: 0 -26px;
|
|
80
|
+
// }
|
|
81
|
+
//
|
|
82
|
+
// .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
|
|
83
|
+
// background-position: 2px -24px;
|
|
84
|
+
// }
|
|
85
|
+
//
|
|
86
|
+
// /* Do not combine these two rules; IE will break. */
|
|
87
|
+
//
|
|
88
|
+
// .leaflet-container {
|
|
89
|
+
// &:-webkit-full-screen, &.leaflet-fullscreen-on {
|
|
90
|
+
// width: 100% !important;
|
|
91
|
+
// height: 100% !important;
|
|
92
|
+
// }
|
|
93
|
+
// }
|
|
94
|
+
//
|
|
95
|
+
// .leaflet-pseudo-fullscreen {
|
|
96
|
+
// position: fixed !important;
|
|
97
|
+
// width: 100% !important;
|
|
98
|
+
// height: 100% !important;
|
|
99
|
+
// top: 0 !important;
|
|
100
|
+
// left: 0 !important;
|
|
101
|
+
// z-index: 99999;
|
|
102
|
+
// }
|
|
103
|
+
//
|
|
104
|
+
// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
105
|
+
// .leaflet-control-fullscreen a {
|
|
106
|
+
// background-image: url(#{$assetPath}/fullscreen@2x.png);
|
|
107
|
+
// }
|
|
108
|
+
// }
|
|
109
|
+
|
|
110
|
+
// // Beautify Marker
|
|
111
|
+
// .beautify-marker {
|
|
112
|
+
// text-align: center;
|
|
113
|
+
// font-weight: 700;
|
|
114
|
+
// font-family: monospace;
|
|
115
|
+
// position: absolute;
|
|
116
|
+
// -webkit-box-sizing: border-box;
|
|
117
|
+
// -moz-box-sizing: border-box;
|
|
118
|
+
// box-sizing: border-box;
|
|
119
|
+
// &.circle, &.circle-dot, &.doughnut {
|
|
120
|
+
// border-radius: 100%;
|
|
121
|
+
// }
|
|
122
|
+
// &.marker {
|
|
123
|
+
// border-top-left-radius: 50%;
|
|
124
|
+
// border-top-right-radius: 50% 100%;
|
|
125
|
+
// border-bottom-left-radius: 100% 50%;
|
|
126
|
+
// border-bottom-right-radius: 0%;
|
|
127
|
+
// /* rotating 45deg clockwise to get the corner bottom center */
|
|
128
|
+
// transform: rotate(45deg);
|
|
129
|
+
// > * {
|
|
130
|
+
// /* rotating 45deg counterclock to adjust marker content back to normal */
|
|
131
|
+
// transform: rotate(-45deg);
|
|
132
|
+
// }
|
|
133
|
+
// }
|
|
134
|
+
// }
|