{% load static %}
<!DOCTYPE html>
<html>
<head>
      
    <meta charset="utf-8" />
    <title>{% block title %}Карта{% endblock %}</title>
    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- Leaflet CSS -->
    <link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
    <link href="{% static 'leaflet-measure/leaflet-measure.css' %}" rel="stylesheet">
    <link href="{% static 'leaflet-tree/L.Control.Layers.Tree.css' %}" rel="stylesheet">
    
    <!-- Extra CSS -->
    {% block extra_css %}{% endblock %}

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
  
  <div id="map"></div>
  {% block content %}
  {% endblock %}
  <!-- Leaflet JavaScript -->
  <script src="{% static 'leaflet/leaflet.js' %}"></script>
  <script src="{% static 'leaflet-measure/leaflet-measure.ru.js' %}"></script>
  <script src="{% static 'leaflet-tree/L.Control.Layers.Tree.js' %}"></script>

  <script>
    let map = L.map('map').setView([0, 0], 2);
    L.control.scale({
          imperial: false,
          metric: true}).addTo(map);
    map.attributionControl.setPrefix(false);
    const street = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    street.addTo(map);
    const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    });
    const street_local = L.tileLayer('/tiles/styles/basic-preview/512/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: 'Local Tiles'
    });
    street_local.addTo(map);
    const baseLayers = {
      "Улицы": street,
      "Спутник": satellite,
      "Локально": street_local
    };
    L.control.layers(baseLayers).addTo(map);
    map.setMaxZoom(18);
    map.setMinZoom(0);
    L.control.measure({ primaryLengthUnit: 'kilometers' }).addTo(map);

    {% comment %} let imageUrl = '{% static "mapsapp/assets/world_map.jpg" %}';
    let imageBounds = [[-82, -180], [82, 180]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map); {% endcomment %}
    
  </script>

  {% block extra_js %}{% endblock %}
</body>
</html>