base tabler

liquid/includes/ui/map-vector.html

@@ -0,0 +1,117 @@
+{% 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 %}