From 43e9fbe5cab186175d302b772ee3964ca881b310 Mon Sep 17 00:00:00 2001 From: Arvind Date: Tue, 29 Jan 2013 20:59:40 +0530 Subject: [PATCH] Added UI improvments - Markers have been added into a layer group and they can be hidden and shown. - Introduces a bug of labels not showing again when the layer is shown after being hidden. --- index.html | 5 +++-- main.js | 44 ++++++++++++++++++++++++++++++++++++-------- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 5746f4d..31421ea 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,11 @@ -

+ Reload to reset +

diff --git a/main.js b/main.js index e409c7d..5a39a49 100644 --- a/main.js +++ b/main.js @@ -1,16 +1,28 @@ var count = 0; var map; +var markers = new L.LayerGroup(); +var photos = new L.LayerGroup(); function init(){ - map = L.map('map').setView([14.31336, 76.64973], 13); + var tileLayer = L.tileLayer('http://{s}.tile.cloudmade.com/157f9082094e402f89d242e9b9144483/997/256/{z}/{x}/{y}.png', { + maxZoom: 18, + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery Â©CloudMade' + }); + var overlays = { + "Places" : markers, + "Photos": photos + }; + var baseLayer = { + "Base Map": tileLayer + }; + map = L.map('map', {layers:[tileLayer, markers, photos]}).setView([14.31336, 76.64973], 13); map.minZoom = 13; map.maxZoom = 13; map.zoomControl = false; - L.tileLayer('http://{s}.tile.cloudmade.com/157f9082094e402f89d242e9b9144483/997/256/{z}/{x}/{y}.png', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery Â©CloudMade' - }).addTo(map); + L.control.scale({position: 'bottomleft'}).addTo(map); + L.control.layers(baseLayer, overlays).addTo(map); loadWayPoints(); loadTrackPoints(); + } function loadWayPoints(){ var wayPointList = ['drdoway.json', 'iiscway.json', 'iiscway2.json']; @@ -19,15 +31,23 @@ function loadWayPoints(){ L.geoJson(keys, { pointToLayer: function(feature, latlng) { if(feature.properties.name != "Picture") { - var m = L.marker(latlng).bindLabel(feature.properties.name, {noHide: true}).addTo(map).showLabel(); + var m = L.marker(latlng).bindLabel(feature.properties.name, {noHide: true}).addTo(markers); + if(i == wayPointList.length){ + this.appendLabels(markers); + } return m; } else { count++; - var m = L.marker(latlng).bindLabel(count.toString(), {noHide: true}).addTo(map).showLabel(); + var m = L.marker(latlng).bindLabel(count.toString(), {noHide: true}).addTo(photos); var template = _.template($('#image-item-template').html()); x = $('body').append(template({cnt: count, src: feature.properties.link1_href})); - console.log(x); + m.on('click',function(e){ + e.target.bindPopup("

").openPopup(); + }); + if(i == wayPointList.length-1){ + this.appendLabels(photos); + } return m; } } @@ -35,6 +55,14 @@ function loadWayPoints(){ },'json'); } } +function appendLabels(x){ + console.log("test"); + x.eachLayer(function(layer){ + layer.showLabel(); + }); +} + + function loadTrackPoints() { var trackPointList = ['drdo.json', 'iisctrack.json', 'kaaval.json']; for(var i=0; i