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>
		// @formatter:on
		{% 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: tabler.getColor('body-bg'),
						stroke: tabler.getColor('border-color'),
						strokeWidth: 2,
						{% else %}
						fill: tabler.getColor('body-bg'),
						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 --------
				visualizeData: {
					scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
					values: {{ data.values }},
				},
				{% 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: tabler.getColor('{{ color }}')
					},
					hover: {
						fill: tabler.getColor('{{ color }}'),
						stroke: tabler.getColor('{{ 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();
			});
		});
		// @formatter:off
	</script>
	{% endcapture %}

	{% if include.show-scripts %}
		{{ script }}
	{% else %}
		{% capture_global scripts %}
			{{ script }}
		{% endcapture_global %}
	{% endif %}
{% endif %}