mirror of
https://github.com/tabler/tabler.git
synced 2026-08-25 20:34:25 +04:00
maps components, mapbox, small fixes
This commit is contained in:
@@ -196,7 +196,7 @@
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
height: 32,
|
||||
offsetY: -12,
|
||||
offsetY: 8,
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
Reference in New Issue
Block a user