






	{% extends 'baze.html' %}
    {% block content %}

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
    
    <style>
    .leaflet-container {
    height: 600px;
    width: 100%;
        }
    </style>




<div id="mapem" ></div>


                            				
                               


<script>

 
//Kondisaun ba interface mapa husi kada user sira

  var map = L.map('mapem').setView([{{kordinate_centru}}], 17);

  var basemaps = {
    OpenStreetMap: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 22,
         attribution: "{{html|safe}}   <br><font size='3'>Distancia Kada linha , <a href='' data-toggle='modal'  id='butaun_modal_detallu'  data-target= '#detallu_linha'>Hare Detallu<a>  </font>   ",
         layers: 'TOPO-WMS'
    }),

    GoogleSatelite: L.tileLayer.wms('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
         maxZoom: 22,
         attribution: "{{html|safe}}   <br> <font size='3'>Distancia Kada linha , <a href='' data-toggle='modal'  id='butaun_modal_detallu'  data-target= '#detallu_linha'>Hare Detallu<a></font>  ",
        subdomains:['mt0','mt1','mt2','mt3']
    }),

};

L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);

basemaps.OpenStreetMap.addTo(map);


       
var marker1 = L.icon({
    iconUrl:  '../../media/iconmaps/1.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

var marker2 = L.icon({
    iconUrl:  '../../media/iconmaps/2.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});


var marker3 = L.icon({
    iconUrl:  '../../media/iconmaps/3.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});


var marker4 = L.icon({
    iconUrl:  '../../media/iconmaps/4.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

var marker5= L.icon({
    iconUrl:  '../../media/iconmaps/5.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});


var marker6= L.icon({
    iconUrl:  '../../media/iconmaps/6.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});




var marker7= L.icon({
    iconUrl:  '../../media/iconmaps/7.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});




var marker8= L.icon({
    iconUrl:  '../../media/iconmaps/8.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});



var marker9= L.icon({
    iconUrl:  '../../media/iconmaps/9.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});



var marker10= L.icon({
    iconUrl:  '../../media/iconmaps/10.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});



var marker11= L.icon({
    iconUrl:  '../../media/iconmaps/11.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});


var marker12= L.icon({
    iconUrl:  '../../media/iconmaps/12.png',
    iconSize:     [15, 15], // size of the icon
    shadowSize:   [15, 15], // size of the shadow
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});



    
    
    
    var polygonPoints = [{{kordinate_area}}];
          var poly = L.polygon(polygonPoints).addTo(map);
             poly.setStyle({
    color: 'black',
    weight: 3,
    opacity: 1.0
      
    });
    
    
    
    {% for dados in data_distance  %}
    
    
    
    L.marker([ {{dados.kor1}}], { icon:marker{{forloop.counter}} }).addTo(map).bindPopup("localizasaun");
    // alert({{forloop.counter}})
    
    {% endfor %}
    

</script>





<div class="modal  fade" tabindex="-1" id="detallu_linha" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
       
     
            Distancia kada linha 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          
        <div class="modal-body">
            {% for dados in data_distance  %} <br> <font size='3'>  {{forloop.counter}} . {{dados.husi}} ba {{dados.ba}}  : {{dados.distancia}} Metru <br> {% endfor %} </font>
        </div>
  
      </div>
    </div>
  </div>
  </div>


{% endblock content %}