{% load l10n static sekizai_tags thumbnail %}

{% addtoblock "css" %}<link href="{% static 'node_modules/leaflet/dist/leaflet.css' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static 'node_modules/leaflet/dist/leaflet.js' %}" type="text/javascript"></script>{% endaddtoblock %}

{% addtoblock "css" %}{% localize off %}
<style>
#cascadeelement_id-{{ instance.pk }} {
	width: {{ instance.glossary.map_width }};
	height: {{ instance.glossary.map_height }};{% with map_min_height=instance.glossary.map_min_height %}{% if map_min_height %}
	min-height: {{ map_min_height }};{% endif %}{% endwith %}
}
</style> 
{% endlocalize %}{% endaddtoblock %}

{% addtoblock "js" %}{% localize off %}
<script type="text/javascript">
(function() {
	var mapPosition = {{ instance.map_position }};
	var viewMap = L.map('cascadeelement_id-{{ instance.pk }}', {scrollWheelZoom: {{ instance.glossary.scroll_wheel_zoom|yesno:'true,false'}}}).setView([mapPosition.lat, mapPosition.lng], mapPosition.zoom);
	var settings = {{ settings }};
	L.tileLayer(
		settings.tilesURL,
		settings
	).addTo(viewMap);

	{% for marker in markers %}
	(function(data) {
		var marker;
		{% if marker.image %}
			{% thumbnail marker.image marker.size as thumb %}
			{% thumbnail marker.image marker.size2x as thumb2x %}
		var icon =  L.icon({
			iconUrl: "{{ thumb.url }}",
			iconRetinaUrl: "{{ thumb2x.url }}",
			{% if marker.anchor %}iconAnchor: {{ marker.anchor }},{% endif %}
			iconSize: {{ marker.size }}
		});
		marker = L.marker(data.position, {icon: icon});
		{% else %}
		marker = L.marker(data.position);
		{% endif %}
		marker.bindTooltip(data.title);
		if (data.popup_text) {
			marker.bindPopup(data.popup_text);
		}
		marker.addTo(viewMap);
	})({{ marker.data }});
	{% endfor %}
})();
</script>
{% endlocalize %}{% endaddtoblock %}

<div id="cascadeelement_id-{{ instance.pk|unlocalize }}"></div>
