tabler.tabler/shared/includes/ui/map-vector.html

{% removeemptylines %} 
{% assign id = include.map-id %}
{% assign data = maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'primary' %}

{% if data %}
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
	<div>
		<div id="map-{{ id }}" class="w-100 h-100"></div>
	</div>
</div>

{% capture script %}
{% removeemptylines %}
<script>
	{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}

	document.addEventListener("DOMContentLoaded", function() {
		const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
			selector: '#map-{{ id }}',
			map: '{{ data.map }}',
			backgroundColor: 'transparent',
			regionStyle: {
				initial: {
					{% unless data.filled %}
					fill: 'var(--tblr-bg-surface-secondary)',
					stroke: 'var(--tblr-border-color)',
					strokeWidth: 2,
					{% else %}
					fill: 'var(--tblr-bg-surface-secondary)',
					stroke: '#fff',
					strokeWidth: 1,
					{% endunless %}
				}
			},
			zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
			zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
			{% if data.values %}
			series: {
				regions: [{
					attribute: "fill",
					scale: {
						{% for i in (1..10) %}
						scale{{ i }}: 'color-mix(in srgb, transparent, var(--tblr-primary) {{ i | times: 10 }}%)',
						{% endfor %}
					},
					values: {{ data.values | json }},
				}]
			}
			{% endif %}
			{% if data.markers %}
			markers: [
				{% for marker in data.markers %}
				{
					coords: [{{ marker.coords }}],
					name: "{{ marker.name }}",
				},
				{% endfor %}
			],
			markerStyle: {
				initial: {
					r: 4,
					stroke: '#fff',
					opacity: 1,
					strokeWidth: 3,
					stokeOpacity: .5,
					fill: 'var(--tblr-{{ color }})'
				},
				hover: {
					fill: 'var(--tblr-{{ color }})',
					stroke: 'var(--tblr-{{ color }})'
				}
			},
			markerLabelStyle: {
				initial: {
					fontSize: 10
				},
			},
			labels: {
				markers: {
					render: function(marker) {
						return marker.name
					},
				},
			},
			{% endif %}
			{% if data.lines %}
			lines: [
				{% for line in data.lines %}
				{
					from: "{{ line.from }}",
					to: "{{ line.to }}"
				},
				{% endfor %}
			],
			lineStyle: {
				strokeDasharray:"4 4",
				animation: true,
				stroke: "rgba(98, 105, 118, .75)",
				strokeWidth: .5,
			},
			{% endif %}
		});

		window.addEventListener("resize", () => {
			map.updateSize();
		});
	});
{% endremoveemptylines %}
</script>
{%- endcapture %}

{% capture_script %}
	{{ script }}
{% endcapture_script %}
{% endif %}
{% endremoveemptylines %}