{% 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>

{% append_lib jqvmap %}
{% capture script %}
<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 %}
	      {% assign color-light = color | append: "-100" %}
			scaleColors: ["{{ color | tabler_color: '100' }}", "{{ color | tabler_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 %}

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