Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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: '© <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: '© <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement