Mercurial > hg > ChinaGisRestApi
annotate gis_gui/blocks/map.js @ 270:3a5d51c60e40
Open Map in new Window
| author | fknauft |
|---|---|
| date | Fri, 27 Jan 2012 20:02:41 +0100 |
| parents | f25ee0424ce6 |
| 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 |