Mercurial > hg > ChinaGisRestApi
annotate gis_gui/blocks/map.js @ 278:4ade9b80b563 default tip
more cleanup.
descriptions work better now.
author | casties |
---|---|
date | Fri, 24 Feb 2012 16:41:30 +0100 |
parents | 3a5d51c60e40 |
children |
rev | line source |
---|---|
63 | 1 |
67 | 2 guiBlocks.prototype.addMapBlock = function(url, baseId, params, firstLayer) { |
3 var block = this.addBlock(url, baseId, params, function() { | |
63 | 4 // function after add block finished |
67 | 5 console.debug("in mapblock after block load!"); |
63 | 6 var be = block.element; |
68 | 7 params = block.params; |
67 | 8 block.type = "map"; |
9 params.type = "map"; | |
68 | 10 if (params.map_layers == null) { |
11 params.map_layers = []; | |
12 } | |
13 if (firstLayer != null) { | |
63 | 14 block.appendMapLayer(firstLayer); |
15 } | |
68 | 16 // show block |
63 | 17 block.showMapParams(); |
18 $(be).fadeIn(); | |
19 | |
20 // save map params in block.param -- too early | |
21 //params = block.readLayerParams(); | |
22 | |
23 // load map | |
237 | 24 var map=block.updateMap(be,params); |
63 | 25 |
65 | 26 // add layer button |
27 $(be).find(".layer_add_button").click(function() { | |
28 console.debug("layer add"); | |
29 params = block.readMapParams(); | |
30 block.addMapLayer(be,params); | |
31 }); | |
63 | 32 // update button |
70 | 33 $(be).find(".map_update_button").click(function () { |
63 | 34 console.debug("map update"); |
35 params = block.readMapParams(); | |
237 | 36 map=block.updateMap(be,params); |
63 | 37 }); |
253
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
38 // reload button |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
39 $(be).find(".reload_button").click(function () { |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
40 console.debug("map update"); |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
41 params = block.readMapParams(); |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
42 map=block.updateMap(be,params); |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
43 }); |
264 | 44 // e4D button |
45 $(be).find(".map_e4D_button").click(function () { | |
46 console.debug("map to e4D"); | |
47 params = block.readMapParams(); | |
48 layers = []; | |
49 for (var i = 0; i < params.map_layers.length; i++) { | |
50 layers[i]= params.map_layers[i].layer.table; | |
51 } | |
52 map=blocks.e4DOpen("Europeana4D",layers); | |
53 }); | |
253
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
54 |
226 | 55 // new window button |
268 | 56 $(be).find(".map_newwindow_button").click(function () { |
226 | 57 console.debug("map in new window"); |
58 params = block.readMapParams(); | |
270 | 59 var newWindow = window.open("blocks/map_newwindow.html?map_id="+params.id); |
268 | 60 //map=block.updateMap(newWindow.document.getElementById("map_box"),params); |
226 | 61 }); |
268 | 62 |
237 | 63 // reload button |
64 $(be).find(".map_reload_button").click(function () { | |
65 console.debug("reload map"); | |
253
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
66 block.reloadMap(); |
237 | 67 }); |
68 // save button | |
70 | 69 $(be).find(".map_save_button").click(function () { |
67 | 70 console.debug("map save. this=",this," block=",block); |
71 params = block.readMapParams(be,params); | |
72 block.storeBlock("test1"); | |
73 }); | |
63 | 74 }); |
75 }; | |
76 | |
70 | 77 guiBlocks.Block.prototype.appendMapLayer = function (layerparams) { |
63 | 78 // add layer to this map |
70 | 79 var layerinfo = { |
80 display: true, | |
81 layer: layerparams | |
82 }; | |
63 | 83 var layers = this.params.map_layers; |
84 layers.push(layerinfo); | |
85 // update indexes | |
86 for (var i = 0; i < layers.length; i++) { | |
87 layers[i].idx = i; | |
88 } | |
65 | 89 return this.params; |
63 | 90 }; |
91 | |
72 | 92 guiBlocks.Block.prototype.deleteMapLayer = function (idx) { |
93 // remove layer from this map | |
94 var layers = this.params.map_layers; | |
95 layers.splice(idx,1); | |
96 // update indexes | |
97 for (var i = 0; i < layers.length; i++) { | |
98 layers[i].idx = i; | |
99 } | |
100 return this.params; | |
101 }; | |
102 | |
70 | 103 guiBlocks.Block.prototype.showMapParams = function (elem, params) { |
63 | 104 // create html with layer parameters from params |
72 | 105 var i, layers, $tmpl, lp, idx; |
106 var block = this; | |
68 | 107 if (elem == null) { |
63 | 108 elem = this.element; |
109 } | |
68 | 110 if (params == null) { |
63 | 111 params = this.params; |
112 } | |
72 | 113 var $elem = $(elem); |
114 $elem.find(".map_name").val(params.name); | |
70 | 115 layers = params.map_layers; |
63 | 116 // remove old info |
65 | 117 $(elem).find(".map_layer_table .layer_info").remove(); |
63 | 118 // write new info |
119 if (layers.length > 0) { | |
72 | 120 $tmpl = $elem.find(".layer_info_tmpl").tmpl(layers); |
121 $elem.find(".map_layer_header").after($tmpl); | |
69 | 122 // arm edit and delete buttons |
70 | 123 for (i = 0; i < layers.length; ++i) { |
124 lp = layers[i].layer; | |
125 idx = layers[i].idx; | |
126 console.debug("showmapparams lp=", lp, " idx=", idx); | |
72 | 127 $tmpl.find(".layer_edit_"+idx).click(function () { |
128 var param = lp; | |
70 | 129 console.debug("open layer ",idx); |
72 | 130 blocks.addLayerBlock("blocks/layer.html?table="+escape(lp.table),"layer", param); |
131 }); | |
132 $tmpl.find(".layer_delete_"+idx).click(function () { | |
133 var layerIdx = idx; | |
134 console.debug("del layer ",layerIdx); | |
135 params = block.deleteMapLayer(layerIdx); | |
136 block.showMapParams(elem, params); | |
237 | 137 var map = block.updateMap(elem, params); |
70 | 138 }); |
139 } | |
63 | 140 } |
141 }; | |
142 | |
143 guiBlocks.Block.prototype.readMapParams = function(elem,params) { | |
144 // read layer parameters from html element and store in param | |
68 | 145 if (elem == null) { |
63 | 146 elem = this.element; |
147 } | |
68 | 148 if (params == null) { |
63 | 149 params = this.params; |
150 } | |
151 params.name = $(elem).find(".map_name").val(); | |
152 var layers = params.map_layers; | |
153 for (var i = 0; i < layers.length; i++) { | |
154 layers[i].display = $(elem).find(".layer_display_"+i).attr("checked"); | |
155 } | |
156 //params.position_field = $(elem).find(".map_position_select").val(); | |
157 //params.connect_line = $(elem).find(".layer_line_checkbox").attr("checked"); | |
158 return params; | |
159 }; | |
160 | |
253
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
161 guiBlocks.Block.prototype.reloadMap = function(elem) { |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
162 if (elem == null) { |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
163 elem = this.element; |
d6c7bedf4370
New reload button active in upper right corner of block
fknauft
parents:
249
diff
changeset
|
164 } |
243 | 165 /*var center = map.getCenter(); |
240 | 166 var dummymarker = new google.maps.Marker(); |
167 dummymarker.setPosition(center); | |
168 dummymarker.setVisible(false); | |
169 dummymarker.setMap(map); | |
243 | 170 */ |
242 | 171 console.debug("map: ", map); |
241 | 172 console.debug("map reloaded"); |
240 | 173 |
237 | 174 }; |
175 | |
268 | 176 guiBlocks.Block.prototype.updateMapId = function(id) { |
177 | |
178 //************ | |
179 console.debug("updateMap:", id); | |
180 //************* | |
181 data2= blocks.loadListOfItems("test1","map",data); | |
182 var params = jQuery.grep(data, function(x){return (x.key == mapname);})[0].val; | |
183 if (elem == null) { | |
184 elem = this.element; | |
185 } | |
186 if (map_params == null) { | |
187 map_params = params; | |
188 } | |
189 var map = block.updateMap(elem, params); | |
190 }; | |
191 | |
63 | 192 guiBlocks.Block.prototype.updateMap = function(elem,map_params) { |
226 | 193 |
194 //************ | |
242 | 195 console.debug("updateMap:", elem, ", ", map_params); |
226 | 196 //************* |
197 | |
198 if (elem == null) { | |
65 | 199 elem = this.element; |
200 } | |
68 | 201 if (map_params == null) { |
65 | 202 map_params = this.params; |
203 } | |
63 | 204 // update and draw the google map |
205 var le = $(elem).find(".map_box").get(0); | |
206 // create empty map | |
226 | 207 |
68 | 208 if (google != null) { |
63 | 209 var latlng = new google.maps.LatLng(29, 116); |
210 var mapOpts = { | |
231 | 211 zoom: 2, |
63 | 212 center: latlng, |
244 | 213 mapTypeId: google.maps.MapTypeId.TERRAIN, |
214 scaleControl: true | |
63 | 215 }; |
216 var map = new google.maps.Map(le, mapOpts); | |
217 console.debug("new google map=",map," on el=",le); | |
218 } | |
219 // add the layers | |
220 var layerList = map_params.map_layers; | |
221 for (var i = 0; i < layerList.length; i++) { | |
222 if (!layerList[i].display) { | |
223 continue; | |
224 } | |
225 var params = layerList[i].layer; | |
226 var paramstr = "format=KML_URL"; | |
227 if (params.position_field && params.position_field != "Default") { | |
228 paramstr += "&gis_id_field="+params.position_field; | |
229 } | |
159 | 230 if (params.color_field != "Default") { |
231 paramstr += "&color_field="+params.color_field; | |
232 } | |
233 if (params.geometry_field != "Default") { | |
234 paramstr += "&geometry_field="+params.geometry_field; | |
235 } | |
249 | 236 if (params.sort_field != "Default") { |
237 paramstr += "&sort_field="+params.sort_field; | |
238 } | |
63 | 239 if (params.connect_line) { |
240 paramstr += "&connect_line="+params.connect_line; | |
241 } | |
242 var layerurl = "../db/RESTdb/db/public/" + escape(params.table) + "?" + paramstr; | |
72 | 243 jQuery.get(layerurl, function (data, textStatus, XMLHttpRequest) { |
63 | 244 // function after load kml url finished |
234 | 245 console.debug("kml url loaded! this=", this ); |
246 console.debug(" data=", data ); | |
236 | 247 console.debug(" data type=", typeof(data)); |
63 | 248 if (typeof(data) == "string") { |
249 var kmlURL = data; | |
250 } else { | |
251 // broken, what now? | |
252 return; | |
253 } | |
254 // render layer | |
68 | 255 if (google != null) { |
63 | 256 var newMarker=new google.maps.KmlLayer(kmlURL); |
245 | 257 console.debug("new marker layer no",i,"=",newMarker); |
234 | 258 console.debug(" map=",map); |
63 | 259 newMarker.setMap(map); |
234 | 260 console.debug("Map-Update finished"); |
63 | 261 } |
262 }); | |
263 } | |
237 | 264 return map; |
63 | 265 }; |
65 | 266 |
267 guiBlocks.Block.prototype.addMapLayer = function(elem,params) { | |
268 var block = this; | |
269 // show list of layers, select and add to map | |
270 var layerList = []; | |
271 var $dlg = $(elem).find(".dialog.add_layer_select"); | |
272 var $sel = $dlg.find("select.add_layer_select"); | |
273 // fill list of layers | |
274 blocks.loadListOfItems("test1", "layer", function(data) { | |
275 console.debug("add layer list of items=",data); | |
276 layerList = data; | |
277 $sel.empty(); | |
278 for (var i=0; i < data.length; i++) { | |
279 var key = data[i].key; | |
280 var val = data[i].val; | |
281 var name = val.name; | |
282 console.debug("layer",i," key=",key," value=",name); | |
283 $sel.append('<option value="'+key+'">'+name+'</option>'); | |
284 } | |
285 }); | |
286 console.debug("dlg=",$dlg); | |
287 $dlg.dialog({ | |
288 buttons: { | |
289 "Ok": function() { | |
290 var layerName = $(this).find(".add_layer_select").val(); | |
291 $(this).dialog("close"); | |
292 var layerParams = jQuery.grep(layerList, function(x){return (x.key == layerName);})[0].val; | |
293 console.debug("addlayerok params=",layerParams); | |
294 params = block.appendMapLayer(layerParams); | |
295 block.showMapParams(elem, params); | |
296 params = block.readMapParams(); | |
297 block.updateMap(elem,params); | |
298 }, | |
299 "Cancel": function() { | |
300 $(this).dialog("close"); | |
301 } | |
302 } | |
303 }); | |
304 }; | |
305 |