Mercurial > hg > extraction-interface

comparison geotemco/js/Overlayloader/Overlayloader.js @ 0:b12c99b7c3f0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
commit for previous development
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 19 Jan 2015 17:13:49 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b12c99b7c3f0
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 };