mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
37 lines
1.2 KiB
HTML
37 lines
1.2 KiB
HTML
{% assign id = include.map-id %}
|
|
{% assign data = maps[id] %}
|
|
|
|
{% if data %}
|
|
<div class="ratio ratio-{{ data.ratio | default: include.ratio | default: '16x9' }}">
|
|
<div>
|
|
<div id="map-{{ id }}" class="w-100 h-100{% if data.card %} rounded{% endif %}"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{% capture_script %}
|
|
<script>
|
|
{% if environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
mapboxgl.accessToken = '{{ site.mapboxKey }}';
|
|
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 %}
|
|
});
|
|
|
|
{% for marker in data.markers %}
|
|
|
|
new mapboxgl.Marker({ color: "var(--tblr-primary)" }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
|
|
{% endfor %}
|
|
|
|
{% if environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
|
|
});
|
|
</script>
|
|
{% endcapture_script %}
|
|
{% endif %} |