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