tabler/preview/pages/_includes/ui/map-vector.html

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

{% 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 %}
	<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();
			});
		});
	</script>
	{% endcapture %}

	{% if include.show-scripts %}
		{{ script }}
	{% else %}
		{% capture_script %}
			{{ script }}
		{% endcapture_script %}
	{% endif %}
{% endif %}