{% load i18n staticfiles djeymtags djeymfilters %}
{% widthratio load_indicator_size 2 1 as margin_offset %}
<style type="text/css">
.djeym-ymap {
    position: relative;
}

#djeymModalLock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: #fff;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: linear;
}

#djeymLoadIndicator {
    width: {{ load_indicator_size }}px;
    height: {{ load_indicator_size }}px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -{{ margin_offset }}px 0 0 -{{ margin_offset }}px;
    content: url('{{ load_indicator }}');
    animation: djeym-spin {{ speed }}s infinite linear;
}

@keyframes djeym-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}
</style>
{% get_api_ymap lang=language_code %}
<script type="text/javascript">
var djeymAddress = "{{ address }}",
    djeymControls = {{ controls|lower }};
{% if tile is not None %}
var djeymTile = {
        maxZoom: {{ tile.maxzoom }},
        minZoom: {{ tile.minzoom }},
        copyrights: "{{ tile.copyrights|safe|escape_double_brackets }}"
    },
    djeymSource = function () { return "{% random_domain tile.source|safe tile.apikey %}"; };
{% endif %}
{% if marker is not None %}
var djeymMarker = {
        iconImageHref: "{{ marker.svg.url }}",
        iconImageOffset: {{ marker.get_offset }},
        iconImageSize: {{ marker.get_size }}
    }
{% endif %}
</script>
<script type="text/javascript" src="{% static 'djeym/js/geocoder.min.js' %}"></script>
