Commit 43e9fbe5cab186175d302b772ee3964ca881b310

  • avatar
  • arvind
  • Tue Jan 29 20:59:40 IST 2013
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.
  • Diff rendering mode:
  • inline
  • side by side

index.html

15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>15 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
16</head>16</head>
17<body>17<body>
18 <div id="map" style="width: 1024px; height: 800px; margin-top:30px;"></div>
18 <b>Reload to reset</b>
19 <div id="map" style="width: 800x; height: 600px; margin-top:30px;"></div>
19 <script type="text/template" id="image-item-template">20 <script type="text/template" id="image-item-template">
20 <div id="image-wrapper">21 <div id="image-wrapper">
21 <em><%= cnt %></em>
22 <div><em><%= cnt %></em></div>
22 <img src="<%= src %>" style="height:200px;width:200px;">23 <img src="<%= src %>" style="height:200px;width:200px;">
23 </div>24 </div>
24 </script>25 </script>

main.js

1var count = 0;1var count = 0;
2var map;2var map;
3var markers = new L.LayerGroup();
4var photos = new L.LayerGroup();
3function init(){5function init(){
4 map = L.map('map').setView([14.31336, 76.64973], 13);
6 var tileLayer = L.tileLayer('http://{s}.tile.cloudmade.com/157f9082094e402f89d242e9b9144483/997/256/{z}/{x}/{y}.png', {
7 maxZoom: 18,
8 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'
9 });
10 var overlays = {
11 "Places" : markers,
12 "Photos": photos
13 };
14 var baseLayer = {
15 "Base Map": tileLayer
16 };
17 map = L.map('map', {layers:[tileLayer, markers, photos]}).setView([14.31336, 76.64973], 13);
5 map.minZoom = 13;18 map.minZoom = 13;
6 map.maxZoom = 13;19 map.maxZoom = 13;
7 map.zoomControl = false;20 map.zoomControl = false;
8 L.tileLayer('http://{s}.tile.cloudmade.com/157f9082094e402f89d242e9b9144483/997/256/{z}/{x}/{y}.png', {
9 maxZoom: 18,
10 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="http://cloudmade.com">CloudMade</a>'
11 }).addTo(map);
21 L.control.scale({position: 'bottomleft'}).addTo(map);
22 L.control.layers(baseLayer, overlays).addTo(map);
12 loadWayPoints();23 loadWayPoints();
13 loadTrackPoints();24 loadTrackPoints();
25
14}26}
15function loadWayPoints(){27function loadWayPoints(){
16 var wayPointList = ['drdoway.json', 'iiscway.json', 'iiscway2.json'];28 var wayPointList = ['drdoway.json', 'iiscway.json', 'iiscway2.json'];
……
31 L.geoJson(keys, {31 L.geoJson(keys, {
32 pointToLayer: function(feature, latlng) {32 pointToLayer: function(feature, latlng) {
33 if(feature.properties.name != "Picture") {33 if(feature.properties.name != "Picture") {
34 var m = L.marker(latlng).bindLabel(feature.properties.name, {noHide: true}).addTo(map).showLabel();
34 var m = L.marker(latlng).bindLabel(feature.properties.name, {noHide: true}).addTo(markers);
35 if(i == wayPointList.length){
36 this.appendLabels(markers);
37 }
35 return m;38 return m;
36 }39 }
37 else {40 else {
38 count++;41 count++;
39 var m = L.marker(latlng).bindLabel(count.toString(), {noHide: true}).addTo(map).showLabel();
42 var m = L.marker(latlng).bindLabel(count.toString(), {noHide: true}).addTo(photos);
40 var template = _.template($('#image-item-template').html());43 var template = _.template($('#image-item-template').html());
41 x = $('body').append(template({cnt: count, src: feature.properties.link1_href}));44 x = $('body').append(template({cnt: count, src: feature.properties.link1_href}));
42 console.log(x);
45 m.on('click',function(e){
46 e.target.bindPopup("<img src='"+feature.properties.link1_href+"' style='height:200px;width:200px;'>").openPopup();
47 });
48 if(i == wayPointList.length-1){
49 this.appendLabels(photos);
50 }
43 return m;51 return m;
44 }52 }
45 }53 }
……
55 },'json');55 },'json');
56 }56 }
57}57}
58function appendLabels(x){
59 console.log("test");
60 x.eachLayer(function(layer){
61 layer.showLabel();
62 });
63}
64
65
58function loadTrackPoints() {66function loadTrackPoints() {
59 var trackPointList = ['drdo.json', 'iisctrack.json', 'kaaval.json'];67 var trackPointList = ['drdo.json', 'iisctrack.json', 'kaaval.json'];
60 for(var i=0; i<trackPointList.length;i++) {68 for(var i=0; i<trackPointList.length;i++) {