Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<title>DIVI Map</title>

{% include 'libraries.html' %}

<!-- LEAFLET -->
<link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
<link rel="stylesheet" href="../static/lib/orderlayers/css/leaflet.control.orderlayers.css">
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>
<script src="../static/js/L.TileLayer.DVT.js"></script>
<script src="../static/lib/orderlayers/leaflet.control.orderlayers.js"></script>

<!-- GOOGLE FONT -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>
<style>
#map {
  height: 100vh;
  width: 80%;
  float: right;
  display: inline-block;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
#sidebar {
  padding: 15px;
  height : 100vh;
  width: 20%;
  display: inline-block;
}
.leaflet-popup-content {
  max-height:500px;
  overflow: auto;
  overflow-x: hidden;
}
canvas.leaflet-tile {
  visibility: visible;
  opacity: 1 !important;
}

.leaflet-container {
  cursor: pointer;
}
.leaflet-top .leaflet-control {
  margin-top: 50px;
}
.hamburger {
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  z-index: 9999;
  position: absolute;
  top: 10px;
  left: 10px
}
.card {
  margin-top: 20px;
  padding:30px 20px 20px 20px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    padding: 5px;
    font-size: 12px;
}
</style>
<body>
    <div id="sidebar">
      <p align="center"><img src="{{url_for('static',filename='img/logodivi.png')}}" height="60px" alt="MVP Ready"></p>
      <!--
      <p>Data stworzenia: <span data-bind="text: created_at().slice(0,10)"></span></p>
      <p>Data wygaĹniÄcia: <span data-bind="text: valid_to().slice(0,10)"></span></p>
      -->
       <div class="card">
          <h3 data-bind="text: title"></h3>
          <p data-bind="text: description"></p>
        </div>
    </div>
    <div id="map">
      <div class="leaflet-bar" data-bind="click: sidebarToggle"><a class="leaflet-bar hamburger"><i id="icon" class="fa fa-chevron-left"></i></a></div>
    </div>
  <script>
    var map;
    function maplinkModel() {
      var self = this;

      var token = '{{ token }}';
      var mlid = '{{ mlid }}'
      var zoom_lvl = '{{ zoom_lvl }}';
      var center_point = '{{ center_point }}';
      center_point = center_point.replace(/\s+/g, '').split(',');

      self.title = ko.observable('{{ title }}');
      self.description = ko.observable('{{ description }}');
      self.created_at = ko.observable('{{ created_at }}');
      self.valid_to = ko.observable('{{ valid_to }}');

      self.currentBasemaps = ko.observableArray();
      self.currentLayers = ko.observableArray();
      self.currentWMSLayers = ko.observableArray();
      self.projectLayers = ko.observableArray();

      map = L.map('map').setView([center_point[1], center_point[0]], zoom_lvl);
      var osm_basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a>', noWrap: true}).addTo(map);
      var base = {"OSM": osm_basemap};
      var overlay = {};

      self.getBasemaps = function(){
        return $.getJSON('../link_basemaps/'+mlid, function(r){
          self.currentBasemaps(r.data)
          self.currentBasemaps().forEach(function(layer){
            var baseLayer = L.tileLayer(layer.url,{attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a>'})
            base[layer.name] = baseLayer
          })
        })
      };
      self.getLayers = function(){
         return $.getJSON('../link_layers/'+mlid, function(r){
          self.currentLayers(r.data)
          self.currentLayers().forEach(function(layer){
            var tLayer = undefined;
            if(layer['data_type'] == 'raster') {
                tLayer = L.tileLayer('../tiles/'+layer.id_projects+'/'+layer.id+'/{z}/{x}/{y}.png?token='+token,{});
            }
            else {
                tLayer = new L.TileLayer.DVT('../dvt/'+layer.id+'/{z}/{x}/{y}.json?token='+token,{
                  style: layer.visual
                })
            }
            overlay[layer.name] = tLayer
            tLayer.addTo(map);
          })
        })
      };
      self.getWMSLayers = function(){
        return $.getJSON('../link_services/'+mlid, function(r){
          self.currentWMSLayers(r.data)
          self.currentWMSLayers().forEach(function(layer){
            var WMSLayer = L.tileLayer.wms(layer.url, {layers: layer.layer, format: layer.format, transparent: true})
            overlay[layer.name] = WMSLayer
            WMSLayer.addTo(map)
            //self.updateSwitcher()
          })
        })
      };

      self.updateSwitcher = function(){
        layerControl = L.control.orderlayers(base, overlay, {position: 'bottomright', collapsed:true, order: 'qgis', title: ' '}).addTo(map);
      }

      map.on('click', function(e) {
        map.eachLayer(function(layer){
          if(layer instanceof L.TileLayer.DVT) {
            var featuresFound = layer.featureAt(e);
            var attributes = [];
            for(var f in featuresFound) {
                layer.unhighlightAll()
                layer.highlightFeature(f)
              for(var attr in featuresFound[f]['properties']) {
                attributes.push([attr,featuresFound[f]['properties'][attr]])

              }
            }
            if(attributes.length) {
              var popup = attributes.map(function(elem){
                return '<tr><td>'+elem[0]+'</td><td>'+elem[1]+'</td></tr>'
              })
              var popupContent = '<table><tr><td><strong>nazwa atrybutu</strong></td><td><strong>wartoĹÄ</strong></td></tr>';
              popup.forEach(function(data){
                popupContent += data
              })
              popupContent += '</table>'
              L.popup().setLatLng([e.latlng.lat, e.latlng.lng]).setContent(popupContent).openOn(map)
            }
          }
        })
      });

      self.sidebarToggle = function(){
        if($('#sidebar').css('width') == '0px'){
          $('#map').css('width','80%')
          $('#sidebar').css('width','20%')
          $('#sidebar').css('padding','15px')
          $('#icon').attr('class', 'fa fa-chevron-left')
        }else{
          $('#sidebar').css('padding','0')
          $('#sidebar').css('width','0%')
          $('#map').css('width','100%')
          $('#icon').attr('class', 'fa fa-chevron-right')
        }
        map.invalidateSize()
      }

      $.when(self.getBasemaps(),self.getLayers(),self.getWMSLayers()).done(function(a,b,c){
          self.updateSwitcher();
      })

    }
    var vm = new maplinkModel();
    ko.applyBindings(vm);

  </script>
</body>
</html>