|
0
|
1 /*
|
|
|
2 * Overlayloader.js
|
|
|
3 *
|
|
|
4 * Copyright (c) 2013, Sebastian Kruse. All rights reserved.
|
|
|
5 *
|
|
|
6 * This library is free software; you can redistribute it and/or
|
|
|
7 * modify it under the terms of the GNU Lesser General Public
|
|
|
8 * License as published by the Free Software Foundation; either
|
|
|
9 * version 3 of the License, or (at your option) any later version.
|
|
|
10 *
|
|
|
11 * This library is distributed in the hope that it will be useful,
|
|
|
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
|
14 * Lesser General Public License for more details.
|
|
|
15 *
|
|
|
16 * You should have received a copy of the GNU Lesser General Public
|
|
|
17 * License along with this library; if not, write to the Free Software
|
|
|
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
|
|
19 * MA 02110-1301 USA
|
|
|
20 */
|
|
|
21
|
|
|
22 /**
|
|
|
23 * @class Overlayloader
|
|
|
24 * Implementation for a Overlayloader UI
|
|
|
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
|
|
|
26 *
|
|
|
27 * @param {HTML object} parent div to append the Overlayloader
|
|
|
28 */
|
|
|
29 function Overlayloader(parent) {
|
|
|
30
|
|
|
31 this.overlayLoader = this;
|
|
|
32
|
|
|
33 this.parent = parent;
|
|
|
34 this.options = parent.options;
|
|
|
35 this.attachedMapWidgets = parent.attachedMapWidgets;
|
|
|
36
|
|
|
37 this.overlays = [];
|
|
|
38
|
|
|
39 this.initialize();
|
|
|
40 }
|
|
|
41
|
|
|
42 Overlayloader.prototype = {
|
|
|
43
|
|
|
44 show : function() {
|
|
|
45 this.overlayloaderDiv.style.display = "block";
|
|
|
46 },
|
|
|
47
|
|
|
48 hide : function() {
|
|
|
49 this.overlayloaderDiv.style.display = "none";
|
|
|
50 },
|
|
|
51
|
|
|
52 initialize : function() {
|
|
|
53
|
|
|
54 this.addKMLLoader();
|
|
|
55 this.addKMZLoader();
|
|
|
56 this.addArcGISWMSLoader();
|
|
|
57 this.addXYZLoader();
|
|
|
58 this.addRomanEmpireLoader();
|
|
|
59 this.addMapsForFreeWaterLayer();
|
|
|
60 this.addConfigLoader();
|
|
|
61
|
|
|
62 // trigger change event on the select so
|
|
|
63 // that only the first loader div will be shown
|
|
|
64 $(this.parent.gui.loaderTypeSelect).change();
|
|
|
65 },
|
|
|
66
|
|
|
67 distributeKML : function(kmlURL) {
|
|
|
68 var newOverlay = new Object();
|
|
|
69 newOverlay.name = kmlURL;
|
|
|
70 newOverlay.layers = [];
|
|
|
71
|
|
|
72 $(this.attachedMapWidgets).each(function(){
|
|
|
73 var newLayer = new OpenLayers.Layer.Vector("KML", {
|
|
|
74 projection: this.openlayersMap.displayProjection,
|
|
|
75 strategies: [new OpenLayers.Strategy.Fixed()],
|
|
|
76 protocol: new OpenLayers.Protocol.HTTP({
|
|
|
77 url: kmlURL,
|
|
|
78 format: new OpenLayers.Format.KML({
|
|
|
79 extractStyles: true,
|
|
|
80 extractAttributes: true
|
|
|
81 })
|
|
|
82 })
|
|
|
83 });
|
|
|
84
|
|
|
85 newOverlay.layers.push({map:this.openlayersMap,layer:newLayer});
|
|
|
86
|
|
|
87 this.openlayersMap.addLayer(newLayer);
|
|
|
88 });
|
|
|
89
|
|
|
90 this.overlays.push(newOverlay);
|
|
|
91 this.parent.gui.refreshOverlayList();
|
|
|
92 },
|
|
|
93
|
|
|
94 distributeKMZ : function(kmzURL) {
|
|
|
95 var newOverlay = new Object();
|
|
|
96 newOverlay.name = kmzURL;
|
|
|
97 newOverlay.layers = [];
|
|
|
98
|
|
|
99 $(this.attachedMapWidgets).each(function(){
|
|
|
100 var newLayer = new OpenLayers.Layer.Vector("KML", {
|
|
|
101 projection: this.openlayersMap.displayProjection,
|
|
|
102 strategies: [new OpenLayers.Strategy.Fixed()],
|
|
|
103 format: OpenLayers.Format.KML,
|
|
|
104 extractAttributes: true
|
|
|
105 });
|
|
|
106
|
|
|
107 newOverlay.layers.push({map:this.openlayersMap,layer:newLayer});
|
|
|
108
|
|
|
109 var map = this.openlayersMap;
|
|
|
110
|
|
|
111 GeoTemConfig.getKmz(kmzURL, function(kmlDoms){
|
|
|
112 $(kmlDoms).each(function(){
|
|
|
113 var kml = new OpenLayers.Format.KML().read(this);
|
|
|
114 newLayer.addFeatures(kml);
|
|
|
115 map.addLayer(newLayer);
|
|
|
116 });
|
|
|
117 });
|
|
|
118 });
|
|
|
119
|
|
|
120 this.overlays.push(newOverlay);
|
|
|
121 this.parent.gui.refreshOverlayList();
|
|
|
122 },
|
|
|
123
|
|
|
124 distributeArcGISWMS : function(wmsURL, wmsLayer) {
|
|
|
125 var newOverlay = new Object();
|
|
|
126 newOverlay.name = wmsURL + " - " + wmsLayer;
|
|
|
127 newOverlay.layers = [];
|
|
|
128
|
|
|
129 var newLayer = new OpenLayers.Layer.WMS("ArcGIS WMS label", wmsURL, {
|
|
|
130 layers: wmsLayer,
|
|
|
131 format: "image/png",
|
|
|
132 transparent: "true"
|
|
|
133 }
|
|
|
134 ,{
|
|
|
135 displayOutsideMaxExtent: true,
|
|
|
136 isBaseLayer: false,
|
|
|
137 projection : "EPSG:3857"
|
|
|
138 }
|
|
|
139 );
|
|
|
140
|
|
|
141 newLayer.setIsBaseLayer(false);
|
|
|
142 $(this.attachedMapWidgets).each(function(){
|
|
|
143 this.openlayersMap.addLayer(newLayer);
|
|
|
144 newOverlay.layers.push({map:this.openlayersMap,layer:newLayer});
|
|
|
145 });
|
|
|
146
|
|
|
147 this.overlays.push(newOverlay);
|
|
|
148 this.parent.gui.refreshOverlayList();
|
|
|
149 },
|
|
|
150
|
|
|
151 distributeXYZ : function(xyzURL,zoomOffset) {
|
|
|
152 var newOverlay = new Object();
|
|
|
153 newOverlay.name = xyzURL;
|
|
|
154 newOverlay.layers = [];
|
|
|
155
|
|
|
156 var newLayer = new OpenLayers.Layer.XYZ(
|
|
|
157 "XYZ Layer",
|
|
|
158 [
|
|
|
159 xyzURL
|
|
|
160 ], {
|
|
|
161 sphericalMercator: true,
|
|
|
162 transitionEffect: "resize",
|
|
|
163 buffer: 1,
|
|
|
164 numZoomLevels: 12,
|
|
|
165 transparent : true,
|
|
|
166 isBaseLayer : false,
|
|
|
167 zoomOffset:zoomOffset?zoomOffset:0
|
|
|
168 }
|
|
|
169 );
|
|
|
170
|
|
|
171 newLayer.setIsBaseLayer(false);
|
|
|
172 $(this.attachedMapWidgets).each(function(){
|
|
|
173 this.openlayersMap.addLayer(newLayer);
|
|
|
174 newOverlay.layers.push({map:this.openlayersMap,layer:newLayer});
|
|
|
175 });
|
|
|
176
|
|
|
177 this.overlays.push(newOverlay);
|
|
|
178 this.parent.gui.refreshOverlayList();
|
|
|
179 },
|
|
|
180
|
|
|
181 addKMLLoader : function() {
|
|
|
182 $(this.parent.gui.loaderTypeSelect).append("<option value='KMLLoader'>KML File URL</option>");
|
|
|
183
|
|
|
184 this.KMLLoaderTab = document.createElement("div");
|
|
|
185 $(this.KMLLoaderTab).attr("id","KMLLoader");
|
|
|
186
|
|
|
187 this.kmlURL = document.createElement("input");
|
|
|
188 $(this.kmlURL).attr("type","text");
|
|
|
189 $(this.KMLLoaderTab).append(this.kmlURL);
|
|
|
190
|
|
|
191 this.loadKMLButton = document.createElement("button");
|
|
|
192 $(this.loadKMLButton).text("load KML");
|
|
|
193 $(this.KMLLoaderTab).append(this.loadKMLButton);
|
|
|
194
|
|
|
195 $(this.loadKMLButton).click($.proxy(function(){
|
|
|
196 var kmlURL = $(this.kmlURL).val();
|
|
|
197 if (kmlURL.length == 0)
|
|
|
198 return;
|
|
|
199 if (typeof GeoTemConfig.proxy != 'undefined')
|
|
|
200 kmlURL = GeoTemConfig.proxy + kmlURL;
|
|
|
201
|
|
|
202 this.distributeKML(kmlURL);
|
|
|
203 },this));
|
|
|
204
|
|
|
205 $(this.parent.gui.loaders).append(this.KMLLoaderTab);
|
|
|
206 },
|
|
|
207
|
|
|
208 addKMZLoader : function() {
|
|
|
209 $(this.parent.gui.loaderTypeSelect).append("<option value='KMZLoader'>KMZ File URL</option>");
|
|
|
210
|
|
|
211 this.KMZLoaderTab = document.createElement("div");
|
|
|
212 $(this.KMZLoaderTab).attr("id","KMZLoader");
|
|
|
213
|
|
|
214 this.kmzURL = document.createElement("input");
|
|
|
215 $(this.kmzURL).attr("type","text");
|
|
|
216 $(this.KMZLoaderTab).append(this.kmzURL);
|
|
|
217
|
|
|
218 this.loadKMZButton = document.createElement("button");
|
|
|
219 $(this.loadKMZButton).text("load KMZ");
|
|
|
220 $(this.KMZLoaderTab).append(this.loadKMZButton);
|
|
|
221
|
|
|
222 $(this.loadKMZButton).click($.proxy(function(){
|
|
|
223 var kmzURL = $(this.kmzURL).val();
|
|
|
224 if (kmzURL.length == 0)
|
|
|
225 return;
|
|
|
226 if (typeof GeoTemConfig.proxy != 'undefined')
|
|
|
227 kmzURL = GeoTemConfig.proxy + kmzURL;
|
|
|
228
|
|
|
229 this.distributeKMZ(kmzURL);
|
|
|
230 },this));
|
|
|
231
|
|
|
232 $(this.parent.gui.loaders).append(this.KMZLoaderTab);
|
|
|
233 },
|
|
|
234
|
|
|
235 addArcGISWMSLoader : function() {
|
|
|
236 $(this.parent.gui.loaderTypeSelect).append("<option value='ArcGISWMSLoader'>ArcGIS WMS</option>");
|
|
|
237
|
|
|
238 this.ArcGISWMSLoaderTab = document.createElement("div");
|
|
|
239 $(this.ArcGISWMSLoaderTab).attr("id","ArcGISWMSLoader");
|
|
|
240
|
|
|
241 $(this.ArcGISWMSLoaderTab).append("URL: ");
|
|
|
242
|
|
|
243 this.wmsURL = document.createElement("input");
|
|
|
244 $(this.wmsURL).attr("type","text");
|
|
|
245 $(this.ArcGISWMSLoaderTab).append(this.wmsURL);
|
|
|
246
|
|
|
247 $(this.ArcGISWMSLoaderTab).append("Layer: ");
|
|
|
248
|
|
|
249 this.wmsLayer = document.createElement("input");
|
|
|
250 $(this.wmsLayer).attr("type","text");
|
|
|
251 $(this.ArcGISWMSLoaderTab).append(this.wmsLayer);
|
|
|
252
|
|
|
253 this.loadArcGISWMSButton = document.createElement("button");
|
|
|
254 $(this.loadArcGISWMSButton).text("load Layer");
|
|
|
255 $(this.ArcGISWMSLoaderTab).append(this.loadArcGISWMSButton);
|
|
|
256
|
|
|
257 $(this.loadArcGISWMSButton).click($.proxy(function(){
|
|
|
258 var wmsURL = $(this.wmsURL).val();
|
|
|
259 var wmsLayer = $(this.wmsLayer).val();
|
|
|
260 if (wmsURL.length == 0)
|
|
|
261 return;
|
|
|
262
|
|
|
263 this.distributeArcGISWMS(wmsURL, wmsLayer);
|
|
|
264 },this));
|
|
|
265
|
|
|
266 $(this.parent.gui.loaders).append(this.ArcGISWMSLoaderTab);
|
|
|
267 },
|
|
|
268
|
|
|
269 addXYZLoader : function() {
|
|
|
270 $(this.parent.gui.loaderTypeSelect).append("<option value='XYZLoader'>XYZ Layer</option>");
|
|
|
271
|
|
|
272 this.XYZLoaderTab = document.createElement("div");
|
|
|
273 $(this.XYZLoaderTab).attr("id","XYZLoader");
|
|
|
274
|
|
|
275 $(this.XYZLoaderTab).append("URL (with x,y,z variables): ");
|
|
|
276
|
|
|
277 this.xyzURL = document.createElement("input");
|
|
|
278 $(this.xyzURL).attr("type","text");
|
|
|
279 $(this.XYZLoaderTab).append(this.xyzURL);
|
|
|
280
|
|
|
281 this.loadXYZButton = document.createElement("button");
|
|
|
282 $(this.loadXYZButton).text("load Layer");
|
|
|
283 $(this.XYZLoaderTab).append(this.loadXYZButton);
|
|
|
284
|
|
|
285 $(this.loadXYZButton).click($.proxy(function(){
|
|
|
286 var xyzURL = $(this.xyzURL).val();
|
|
|
287 if (xyzURL.length == 0)
|
|
|
288 return;
|
|
|
289
|
|
|
290 this.distributeXYZ(xyzURL);
|
|
|
291 },this));
|
|
|
292
|
|
|
293 $(this.parent.gui.loaders).append(this.XYZLoaderTab);
|
|
|
294 },
|
|
|
295
|
|
|
296 addRomanEmpireLoader : function() {
|
|
|
297 $(this.parent.gui.loaderTypeSelect).append("<option value='RomanEmpireLoader'>Roman Empire</option>");
|
|
|
298
|
|
|
299 this.RomanEmpireLoaderTab = document.createElement("div");
|
|
|
300 $(this.RomanEmpireLoaderTab).attr("id","RomanEmpireLoader");
|
|
|
301
|
|
|
302 this.loadRomanEmpireButton = document.createElement("button");
|
|
|
303 $(this.loadRomanEmpireButton).text("load Layer");
|
|
|
304 $(this.RomanEmpireLoaderTab).append(this.loadRomanEmpireButton);
|
|
|
305
|
|
|
306 $(this.loadRomanEmpireButton).click($.proxy(function(){
|
|
|
307 this.distributeXYZ("http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png",1);
|
|
|
308 },this));
|
|
|
309
|
|
|
310 $(this.parent.gui.loaders).append(this.RomanEmpireLoaderTab);
|
|
|
311 },
|
|
|
312
|
|
|
313 addMapsForFreeWaterLayer : function() {
|
|
|
314 $(this.parent.gui.loaderTypeSelect).append("<option value='MapsForFreeWaterLayerLoader'>Water Layer (Maps-For-Free)</option>");
|
|
|
315
|
|
|
316 this.MapsForFreeWaterTab = document.createElement("div");
|
|
|
317 $(this.MapsForFreeWaterTab).attr("id","MapsForFreeWaterLayerLoader");
|
|
|
318
|
|
|
319 this.loadMapsForFreeWaterLayerButton = document.createElement("button");
|
|
|
320 $(this.loadMapsForFreeWaterLayerButton).text("load Layer");
|
|
|
321 $(this.MapsForFreeWaterTab).append(this.loadMapsForFreeWaterLayerButton);
|
|
|
322
|
|
|
323 $(this.loadMapsForFreeWaterLayerButton).click($.proxy(function(){
|
|
|
324 this.distributeXYZ("http://maps-for-free.com/layer/water/z${z}/row${y}/${z}_${x}-${y}.gif",1);
|
|
|
325 },this));
|
|
|
326
|
|
|
327 $(this.parent.gui.loaders).append(this.MapsForFreeWaterTab);
|
|
|
328 },
|
|
|
329
|
|
|
330 addConfigLoader : function() {
|
|
|
331 if ( (this.parent.options.wms_overlays instanceof Array) &&
|
|
|
332 (this.parent.options.wms_overlays.length > 0) ){
|
|
|
333 var overlayloader = this;
|
|
|
334
|
|
|
335 $(this.parent.gui.loaderTypeSelect).append("<option value='ConfigLoader'>Other WMS maps</option>");
|
|
|
336
|
|
|
337 this.ConfigLoaderTab = document.createElement("div");
|
|
|
338 $(this.ConfigLoaderTab).attr("id","ConfigLoader");
|
|
|
339
|
|
|
340 this.ConfigMapSelect = document.createElement("select");
|
|
|
341 $(this.parent.options.wms_overlays).each(function(){
|
|
|
342 var name = this.name, server = this.server, layer = this.layer;
|
|
|
343 $(overlayloader.ConfigMapSelect).append("<option layer='"+layer+"' server='"+server+"' >"+name+"</option>");
|
|
|
344 });
|
|
|
345
|
|
|
346 $(this.ConfigLoaderTab).append(this.ConfigMapSelect);
|
|
|
347
|
|
|
348 this.loadConfigMapButton = document.createElement("button");
|
|
|
349 $(this.loadConfigMapButton).text("load Layer");
|
|
|
350 $(this.ConfigLoaderTab).append(this.loadConfigMapButton);
|
|
|
351
|
|
|
352 $(this.loadConfigMapButton).click($.proxy(function(){
|
|
|
353 var server = $(this.ConfigMapSelect).find(":selected").attr("server");
|
|
|
354 var layer = $(this.ConfigMapSelect).find(":selected").attr("layer");
|
|
|
355 this.distributeArcGISWMS(server,layer);
|
|
|
356 },this));
|
|
|
357
|
|
|
358 $(this.parent.gui.loaders).append(this.ConfigLoaderTab);
|
|
|
359 }
|
|
|
360 }
|
|
|
361
|
|
|
362 };
|
