tabler/pages/_includes/ui/map.html

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

{% if data %}
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
{% capture_global scripts %}
<script>
	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}

	document.addEventListener("DOMContentLoaded", function() {
	   {% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
			map: '{{ data.map }}',
			backgroundColor: 'transparent',
			color: 'rgba(120, 130, 140, .1)',
			borderColor: 'transparent',
			{% if data.zoom %}enableZoom: true,{% endif %}
			{% if data.values %}
			scaleColors: [tabler.colorVariation('{{ color }}', 'lightest'), tabler.colors.{{ color }}],
			normalizeFunction: 'polynomial',
			values: (chart_data = {{ data.values }}),
			onLabelShow: function (event, label, code) {
				if (chart_data[code] > 0) {
					label.append(': <strong>' + chart_data[code] + '</strong>');
				}
			},
			{% endif %}
		});
	});
</script>
{% endcapture_global %}
{% endif %}