maps components, mapbox, small fixes

This commit is contained in:
codecalm
2020-02-21 13:33:54 +01:00
parent c34031ffb3
commit c25b25936d
18 changed files with 207 additions and 123 deletions
+1 -1
View File
@@ -196,7 +196,7 @@
show: true,
position: 'bottom',
height: 32,
offsetY: -12,
offsetY: 8,
markers: {
width: 8,
height: 8,
+40 -35
View File
@@ -1,44 +1,49 @@
{% assign id = include.map-id %}
{% assign height = include.height | default: 20 %}
{% assign data = site.data.maps[id] %}
{% assign data = site.data.maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'green' %}
{% if data %}
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
<div class="embed-responsive embed-responsive-16by9">
<div class="embed-responsive-item">
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% append_lib jqvmap %}
{% capture script %}
<script>
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
{% append_lib jqvmap %}
{% capture script %}
<script>
// @formatter:on
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
{% if data.zoom %}enableZoom: true,{% endif %}
{% if data.values %}
{% assign color-light = color | append: "-100" %}
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
normalizeFunction: 'polynomial',
values: (chart_data = {{ data.values }}),
onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>');
}
},
{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',
borderColor: 'transparent',
{% if data.zoom %}enableZoom: true,{% endif %}
{% if data.values %}
{% assign color-light = color | append: "-100" %}
scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_color }}"],
normalizeFunction: 'polynomial',
values: (chart_data = {{ data.values }}),
onLabelShow: function (event, label, code) {
if (chart_data[code] > 0) {
label.append(': <strong>' + chart_data[code] + '</strong>');
}
},
{% endif %}
});
});
});
</script>
{% endcapture %}
// @formatter:off
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
+31
View File
@@ -0,0 +1,31 @@
{% assign id = include.map-id %}
{% assign data = site.data.maps[id] %}
{% if data %}
<div class="embed-responsive embed-responsive-{{ data.ratio | default: include.ratio | default: '16by9' }}">
<div class="embed-responsive-item">
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% append_lib mapbox %}
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function() {
mapboxgl.accessToken = '{{ site.mapbox_key }}';
var map = new mapboxgl.Map({
container: 'map-{{ id }}',
style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
zoom: {{ data.zoom | default: 13 }},
{% if data.center %}
center: [{{ data.center[1] }}, {{ data.center[0] }}],
{% else %}
center: [13.404900, 52.518827],
{% endif %}
});
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}