| 1 | /* |
||
| 2 | * Copyright (c) 2008-2018 Mark C. Prins <[email protected]> |
||
| 3 | * |
||
| 4 | * Permission to use, copy, modify, and distribute this software for any |
||
| 5 | * purpose with or without fee is hereby granted, provided that the above |
||
| 6 | * copyright notice and this permission notice appear in all copies. |
||
| 7 | * |
||
| 8 | * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES |
||
| 9 | * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF |
||
| 10 | * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR |
||
| 11 | * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES |
||
| 12 | * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN |
||
| 13 | * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF |
||
| 14 | * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. |
||
| 15 | */ |
||
| 16 | |||
| 17 | /** |
||
| 18 | * @fileoverview Javascript voor OpenLayers plugin. |
||
| 19 | * |
||
| 20 | * @requires {lib/OpenLayers.js} or a full openlayers build |
||
| 21 | * @author Mark C. Prins <[email protected]> |
||
| 22 | * |
||
| 23 | */ |
||
| 24 | |||
| 25 | /** |
||
| 26 | * Openlayers selectcontrol. |
||
| 27 | * |
||
| 28 | * @type {OpenLayers.Control.SelectFeature} |
||
| 29 | * @private |
||
| 30 | */ |
||
| 31 | var selectControl; |
||
| 32 | |||
| 33 | /** |
||
| 34 | * handle feature select event. |
||
| 35 | * |
||
| 36 | * @param {OpenLayers.Feature.Vector} |
||
| 37 | * selFeature the selected feature |
||
| 38 | */ |
||
| 39 | function onFeatureSelect(selFeature) { |
||
| 40 | // 'this' is selectFeature control |
||
| 41 | var pPos = selFeature.geometry.getBounds().getCenterLonLat(); |
||
| 42 | // != OpenLayers.Geometry.Point |
||
| 43 | if (selFeature.geometry.CLASS_NAME === "OpenLayers.Geometry.LineString") { |
||
| 44 | try { |
||
| 45 | // for lines make the popup show at the cursor position |
||
| 46 | pPos = selFeature.layer.map.getLonLatFromViewPortPx(this.handlers.feature.evt.xy); |
||
| 47 | } catch (anErr) { |
||
| 48 | OpenLayers.Console.warn("unable to get event position; reverting to boundingbox center."); |
||
|
0 ignored issues
–
show
|
|||
| 49 | pPos = selFeature.geometry.getBounds().getCenterLonLat(); |
||
| 50 | } |
||
| 51 | } |
||
| 52 | |||
| 53 | var pContent = '<div class="spacer"> </div>'; |
||
| 54 | var locDesc = ''; |
||
| 55 | if (selFeature.data.rowId !== undefined) { |
||
| 56 | pContent += '<span class="rowId">' + selFeature.data.rowId + ': </span>'; |
||
| 57 | } |
||
| 58 | if (selFeature.data.name !== undefined) { |
||
| 59 | pContent += '<span class="txt">' + selFeature.data.name + '</span>'; |
||
| 60 | locDesc = selFeature.data.name; |
||
|
0 ignored issues
–
show
|
|||
| 61 | // TODO strip <p> tag from locDesc |
||
| 62 | // locDesc = selFeature.data.name.split(/\s+/).slice(0,2).join('+'); |
||
| 63 | } |
||
| 64 | if (selFeature.data.ele !== undefined) { |
||
| 65 | pContent += '<div class="ele">elevation: ' + selFeature.data.ele + '</div>'; |
||
| 66 | } |
||
| 67 | if (selFeature.data.type !== undefined) { |
||
| 68 | pContent += '<div>' + selFeature.data.type + '</div>'; |
||
| 69 | } |
||
| 70 | if (selFeature.data.time !== undefined) { |
||
| 71 | pContent += '<div class="time">time: ' + selFeature.data.time + '</div>'; |
||
| 72 | } |
||
| 73 | if (selFeature.data.description !== undefined) { |
||
| 74 | pContent += '<div class="desc">' + selFeature.data.description + '</div>'; |
||
| 75 | } |
||
| 76 | // mapillary layer |
||
| 77 | if (selFeature.attributes.location !== undefined) { |
||
| 78 | pContent += '<div class="desc">' + selFeature.data.location + '</div>'; |
||
| 79 | } |
||
| 80 | // mapillary layer |
||
| 81 | if (selFeature.attributes.image !== undefined) { |
||
| 82 | pContent += '<img class="img" src=' + selFeature.data.image + ' width="320" />'; |
||
| 83 | } |
||
| 84 | // mapillary layer |
||
| 85 | if (selFeature.attributes.ca !== undefined) { |
||
| 86 | var angle = Math.floor(selFeature.data.ca); |
||
| 87 | pContent += '<div class="coord"><img src="' + DOKU_BASE + 'lib/plugins/openlayersmapoverlays/icons/arrow-up-20.png' |
||
|
0 ignored issues
–
show
The variable
DOKU_BASE seems to be never declared. If this is a global, consider adding a /** global: DOKU_BASE */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 88 | + '" width="16" height="16" style="transform:rotate(' + angle + 'deg)" alt="' + angle + 'º"/> '+OpenLayers.i18n("compass") + angle + 'º</div>'; |
||
| 89 | } |
||
| 90 | |||
| 91 | if (selFeature.attributes.img !== undefined) { |
||
| 92 | pContent += '<div class="coord" title="lat;lon"><img src="' + selFeature.attributes.img |
||
| 93 | + '" width="16" height="16" style="transform:rotate(' + selFeature.attributes.angle + 'deg)" /> ' |
||
| 94 | + '<a href="geo:'+ selFeature.data.lat + ',' + selFeature.data.lon |
||
| 95 | + '?q=' + selFeature.data.lat + ',' + selFeature.data.lon + '(' + selFeature.data.alt + ')" title="' + OpenLayers.i18n("navi") + '">' |
||
| 96 | + selFeature.data.latlon + '</a></div>'; |
||
| 97 | } |
||
| 98 | if (pContent.length > 0) { |
||
| 99 | // only show when there is something to show... |
||
| 100 | var popup = new OpenLayersMap.Popup.FramedCloud("olPopup", pPos, null, pContent, null, true, function() { |
||
|
0 ignored issues
–
show
The variable
OpenLayersMap seems to be never declared. If this is a global, consider adding a /** global: OpenLayersMap */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 101 | selectControl.unselect(selFeature); |
||
| 102 | jQuery('#' + selectControl.layer.map.div.id).focus(); |
||
| 103 | }); |
||
| 104 | selFeature.popup = popup; |
||
| 105 | selFeature.layer.map.addPopup(popup); |
||
| 106 | jQuery('#olPopup').attr("tabindex", -1).focus(); |
||
| 107 | } |
||
| 108 | } |
||
| 109 | |||
| 110 | /** |
||
| 111 | * handle feature unselect event. remove & destroy the popup. |
||
| 112 | * |
||
| 113 | * @param {OpenLayers.Feature.Vector} |
||
| 114 | * selFeature the un-selected feature |
||
| 115 | */ |
||
| 116 | function onFeatureUnselect(selFeature) { |
||
| 117 | if (selFeature.popup !== null) { |
||
| 118 | selFeature.layer.map.removePopup(selFeature.popup); |
||
| 119 | selFeature.popup.destroy(); |
||
| 120 | selFeature.popup = null; |
||
| 121 | } |
||
| 122 | } |
||
| 123 | /** |
||
| 124 | * Test for css support in the browser by sniffing for a css class we added |
||
| 125 | * using javascript added by the action plugin; this is an edge case because |
||
| 126 | * browsers that support javascript generally support css as well. |
||
| 127 | * |
||
| 128 | * @returns {Boolean} true when the browser supports css (and implicitly |
||
| 129 | * javascript) |
||
| 130 | */ |
||
| 131 | function olTestCSSsupport() { |
||
| 132 | return (jQuery('.olCSSsupported').length > 0); |
||
| 133 | } |
||
| 134 | |||
| 135 | /** |
||
| 136 | * Creates a DocumentFragment to insert into the dom. |
||
| 137 | * |
||
| 138 | * @param mapid |
||
| 139 | * id for the map div |
||
| 140 | * @param width |
||
| 141 | * width for the map div |
||
| 142 | * @param height |
||
| 143 | * height for the map div |
||
| 144 | * @returns a {DocumentFragment} element that can be injected into the dom |
||
| 145 | */ |
||
| 146 | function olCreateMaptag(mapid, width, height) { |
||
| 147 | var mEl = '<div id="' + mapid + '-olContainer" class="olContainer olWebOnly">' |
||
| 148 | // map |
||
| 149 | + '<div id="' + mapid + '" tabindex="0" style="width:' + width + ';height:' + height + ';" class="olMap"></div>' |
||
| 150 | // statusbar |
||
| 151 | + '<div id="' + mapid + '-olStatusBar" style="width:' + width + ';" class="olStatusBarContainer">' + ' <div id="' |
||
| 152 | + mapid + '-statusbar-scale" class="olStatusBar olStatusBarScale">scale</div>' + ' <div id="' + mapid |
||
| 153 | + '-statusbar-mouseposition" class="olStatusBar olStatusBarMouseposition"></div>' + ' <div id="' + mapid |
||
| 154 | + '-statusbar-projection" class="olStatusBar olStatusBarProjection">proj</div>' + ' <div id="' + mapid |
||
| 155 | + '-statusbar-text" class="olStatusBar olStatusBarText">txt</div>' + '</div>' |
||
| 156 | // |
||
| 157 | + '</div>', |
||
| 158 | // fragment |
||
| 159 | frag = document.createDocumentFragment(), |
||
| 160 | // temp node |
||
| 161 | temp = document.createElement('div'); |
||
| 162 | temp.innerHTML = mEl; |
||
| 163 | while (temp.firstChild) { |
||
| 164 | frag.appendChild(temp.firstChild); |
||
| 165 | } |
||
| 166 | return frag; |
||
| 167 | } |
||
| 168 | |||
| 169 | /** |
||
| 170 | * Create the map based on the params given. |
||
| 171 | * |
||
| 172 | * @param {Object} |
||
| 173 | * mapOpts MapOptions hash {id:'olmap', width:500px, height:500px, |
||
| 174 | * lat:6710200, lon:506500, zoom:13, statusbar:1, controls:1, |
||
| 175 | * poihoverstyle:1, baselyr:'', kmlfile:'', gpxfile:'', geojsonfile, |
||
| 176 | * summary:''} |
||
| 177 | * @param {Array} |
||
| 178 | * OLmapPOI array with POI's [ {lat:6710300,lon:506000,txt:'instap |
||
| 179 | * punt',angle:180,opacity:.9,img:'', rowId:n},... ]); |
||
| 180 | * |
||
| 181 | * @return {OpenLayers.Map} the created map |
||
| 182 | */ |
||
| 183 | function createMap(mapOpts, OLmapPOI) { |
||
| 184 | if (!olEnable) { |
||
| 185 | return; |
||
|
0 ignored issues
–
show
Comprehensibility
Best Practice
introduced
by
|
|||
| 186 | } |
||
| 187 | if (!olTestCSSsupport()) { |
||
| 188 | olEnable = false; |
||
| 189 | return; |
||
|
0 ignored issues
–
show
Comprehensibility
Best Practice
introduced
by
|
|||
| 190 | } |
||
| 191 | OpenLayers.ImgPath = DOKU_BASE + 'lib/plugins/openlayersmap/lib/img/'; |
||
|
0 ignored issues
–
show
The variable
DOKU_BASE seems to be never declared. If this is a global, consider adding a /** global: DOKU_BASE */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
The variable
OpenLayers seems to be never declared. If this is a global, consider adding a /** global: OpenLayers */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 192 | OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; |
||
| 193 | |||
| 194 | // find map element location |
||
| 195 | var cleartag = document.getElementById(mapOpts.id + '-clearer'); |
||
| 196 | if (cleartag === null) { |
||
| 197 | return; |
||
|
0 ignored issues
–
show
Comprehensibility
Best Practice
introduced
by
|
|||
| 198 | } |
||
| 199 | // create map element and add to document |
||
| 200 | var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height); |
||
| 201 | cleartag.parentNode.insertBefore(fragment, cleartag); |
||
| 202 | |||
| 203 | /** dynamic map extent. */ |
||
| 204 | var extent = new OpenLayers.Bounds(), |
||
| 205 | |||
| 206 | /** map. */ |
||
| 207 | m = new OpenLayers.Map({ |
||
| 208 | div : mapOpts.id, |
||
| 209 | projection : 'EPSG:3857', |
||
| 210 | displayProjection : new OpenLayers.Projection("EPSG:4326"), |
||
| 211 | numZoomLevels : 22, |
||
| 212 | controls : [], |
||
| 213 | theme : null |
||
| 214 | }); |
||
| 215 | |||
| 216 | if (osmEnable) { |
||
| 217 | /* add OSM map layers */ |
||
| 218 | m.addLayer(new OpenLayers.Layer.OSM()); |
||
| 219 | |||
| 220 | /* open cycle map */ |
||
| 221 | m.addLayer(new OpenLayersMap.Layer.OCM("cycle map",[ |
||
|
0 ignored issues
–
show
The variable
OpenLayersMap seems to be never declared. If this is a global, consider adding a /** global: OpenLayersMap */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 222 | 'https://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey, |
||
| 223 | 'https://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey, |
||
| 224 | 'https://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey='+tfApiKey ], { |
||
| 225 | visibility : mapOpts.baselyr === "transport", |
||
| 226 | apikey : tfApiKey |
||
| 227 | })); |
||
| 228 | m.addLayer(new OpenLayersMap.Layer.OCM("transport", [ |
||
| 229 | "https://a.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 230 | "https://b.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 231 | "https://c.tile.thunderforest.com/transport/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 232 | visibility : mapOpts.baselyr === "transport", |
||
| 233 | apikey : tfApiKey |
||
| 234 | })); |
||
| 235 | m.addLayer(new OpenLayersMap.Layer.OCM("landscape", [ |
||
| 236 | "https://a.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 237 | "https://b.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 238 | "https://c.tile.thunderforest.com/landscape/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 239 | visibility : mapOpts.baselyr === "landscape", |
||
| 240 | apikey : tfApiKey |
||
| 241 | })); |
||
| 242 | m.addLayer(new OpenLayersMap.Layer.OCM("outdoors", [ |
||
| 243 | "https://a.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 244 | "https://b.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey, |
||
| 245 | "https://c.tile.thunderforest.com/outdoors/${z}/${x}/${y}.png?apikey="+tfApiKey ], { |
||
| 246 | visibility : mapOpts.baselyr === "outdoors", |
||
| 247 | apikey : tfApiKey |
||
| 248 | })); |
||
| 249 | /* hike and bike map seem to be offline |
||
| 250 | m.addLayer(new OpenLayers.Layer.OSM( |
||
| 251 | "hike and bike map", "http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png", { |
||
| 252 | visibility : mapOpts.baselyr === "hike and bike map", |
||
| 253 | tileOptions : { |
||
| 254 | crossOriginKeyword : null |
||
| 255 | } |
||
| 256 | })); |
||
| 257 | */ |
||
| 258 | } |
||
| 259 | /* |
||
| 260 | * add Stamen map layers, see: http://maps.stamen.com/ |
||
| 261 | */ |
||
| 262 | if (stamenEnable) { |
||
| 263 | m.addLayer(new OpenLayersMap.Layer.StamenTerrain()); |
||
| 264 | m.addLayer(new OpenLayersMap.Layer.StamenToner()); |
||
| 265 | } |
||
| 266 | |||
| 267 | if (gEnable) { |
||
| 268 | /* load google maps */ |
||
| 269 | try { |
||
| 270 | m.addLayer(new OpenLayers.Layer.Google("google relief", { |
||
| 271 | type : google.maps.MapTypeId.TERRAIN, |
||
|
0 ignored issues
–
show
The variable
google seems to be never declared. If this is a global, consider adding a /** global: google */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 272 | numZoomLevels : 16, |
||
| 273 | animationEnabled : true, |
||
| 274 | visibility : mapOpts.baselyr === "google relief" |
||
| 275 | })); |
||
| 276 | m.addLayer(new OpenLayers.Layer.Google("google sat", { |
||
| 277 | type : google.maps.MapTypeId.SATELLITE, |
||
| 278 | animationEnabled : true, |
||
| 279 | visibility : mapOpts.baselyr === "google sat" |
||
| 280 | })); |
||
| 281 | m.addLayer(new OpenLayers.Layer.Google("google hybrid", { |
||
| 282 | type : google.maps.MapTypeId.HYBRID, |
||
| 283 | animationEnabled : true, |
||
| 284 | visibility : mapOpts.baselyr === "google hybrid" |
||
| 285 | })); |
||
| 286 | m.addLayer(new OpenLayers.Layer.Google("google road", { |
||
| 287 | animationEnabled : true, |
||
| 288 | visibility : mapOpts.baselyr === "google road" |
||
| 289 | })); |
||
| 290 | } catch (ol_err1) { |
||
| 291 | Openlayers.Console.userError('Error loading Google maps' + ol_err1); |
||
|
0 ignored issues
–
show
The variable
Openlayers seems to be never declared. If this is a global, consider adding a /** global: Openlayers */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 292 | } |
||
| 293 | } |
||
| 294 | |||
| 295 | if (bEnable && bApiKey !== '') { |
||
| 296 | try { |
||
| 297 | /* add Bing tiles */ |
||
| 298 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 299 | key : bApiKey, |
||
| 300 | type : "Road", |
||
| 301 | name : "bing road", |
||
| 302 | visibility : mapOpts.baselyr === "bing road", |
||
| 303 | wrapDateLine : true, |
||
| 304 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 305 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 306 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 307 | })); |
||
| 308 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 309 | key : bApiKey, |
||
| 310 | type : "Aerial", |
||
| 311 | name : "bing sat", |
||
| 312 | visibility : mapOpts.baselyr === "bing sat", |
||
| 313 | wrapDateLine : true, |
||
| 314 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 315 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 316 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 317 | })); |
||
| 318 | m.addLayer(new OpenLayers.Layer.Bing({ |
||
| 319 | key : bApiKey, |
||
| 320 | type : "AerialWithLabels", |
||
| 321 | name : "bing hybrid", |
||
| 322 | visibility : mapOpts.baselyr === "bing hybrid", |
||
| 323 | wrapDateLine : true, |
||
| 324 | attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">' |
||
| 325 | + 'Bing™</a><img src="//www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}' |
||
| 326 | + '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>' |
||
| 327 | })); |
||
| 328 | } catch (ol_errBing) { |
||
| 329 | Openlayers.Console.userError('Error loading Bing maps: ' + ol_errBing); |
||
| 330 | } |
||
| 331 | } |
||
| 332 | |||
| 333 | m.setCenter(new OpenLayers.LonLat(mapOpts.lon, mapOpts.lat).transform(m.displayProjection, m.projection), |
||
| 334 | mapOpts.zoom); |
||
| 335 | extent.extend(m.getExtent()); |
||
| 336 | |||
| 337 | // change/set alternative baselyr |
||
| 338 | try { |
||
| 339 | m.setBaseLayer(((m.getLayersByName(mapOpts.baselyr))[0])); |
||
| 340 | } catch (ol_err4) { |
||
| 341 | m.setBaseLayer(m.layers[0]); |
||
| 342 | } |
||
| 343 | |||
| 344 | m.addControls([ new OpenLayers.Control.ScaleLine({ |
||
| 345 | geodesic : true |
||
| 346 | }), new OpenLayers.Control.KeyboardDefaults({ |
||
| 347 | observeElement : mapOpts.id |
||
| 348 | }), new OpenLayers.Control.Navigation() ]); |
||
| 349 | |||
| 350 | if (mapOpts.statusbar === 1) { |
||
| 351 | // statusbar control: mouse pos. |
||
| 352 | m.addControl(new OpenLayers.Control.MousePosition({ |
||
| 353 | 'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-mouseposition') |
||
| 354 | })); |
||
| 355 | // statusbar control: scale |
||
| 356 | m.addControl(new OpenLayers.Control.Scale(mapOpts.id + '-statusbar-scale')); |
||
| 357 | // statusbar control: attribution |
||
| 358 | m.addControl(new OpenLayers.Control.Attribution({ |
||
| 359 | 'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-text') |
||
| 360 | })); |
||
| 361 | // statusbar control: projection |
||
| 362 | OpenLayers.Util.getElement(mapOpts.id + '-statusbar-projection').innerHTML = m.displayProjection; |
||
| 363 | } else { |
||
| 364 | OpenLayers.Util.getElement(mapOpts.id + '-olStatusBar').display = 'none'; |
||
| 365 | } |
||
| 366 | |||
| 367 | if (OLmapPOI.length > 0) { |
||
| 368 | var markers = new OpenLayers.Layer.Vector("POI", { |
||
| 369 | styleMap : new OpenLayers.StyleMap({ |
||
| 370 | "default" : { |
||
| 371 | cursor : "help", |
||
| 372 | externalGraphic : "${img}", |
||
| 373 | graphicHeight : 16, |
||
| 374 | graphicWidth : 16, |
||
| 375 | // graphicXOffset : 0, |
||
| 376 | // graphicYOffset : -8, |
||
| 377 | graphicOpacity : "${opacity}", |
||
| 378 | rotation : "${angle}", |
||
| 379 | backgroundGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker_shadow.png", |
||
| 380 | // backgroundXOffset : 0, |
||
| 381 | // backgroundYOffset : -4, |
||
| 382 | backgroundRotation : "${angle}", |
||
| 383 | pointRadius : 10, |
||
| 384 | labelXOffset : 8, |
||
| 385 | labelYOffset : 8, |
||
| 386 | labelAlign : "lb", |
||
| 387 | label : "${label}", |
||
| 388 | // fontColor : "", |
||
| 389 | fontFamily : "monospace", |
||
| 390 | fontSize : "12px", |
||
| 391 | fontWeight : "bold" |
||
| 392 | }, |
||
| 393 | "select" : { |
||
| 394 | cursor : "help", |
||
| 395 | externalGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker-red.png", |
||
| 396 | graphicHeight : 16, |
||
| 397 | graphicWidth : 16, |
||
| 398 | // graphicXOffset : 0, |
||
| 399 | // graphicYOffset : -8, |
||
| 400 | graphicOpacity : 1.0, |
||
| 401 | rotation : "${angle}" |
||
| 402 | } |
||
| 403 | }), |
||
| 404 | isBaseLayer : false, |
||
| 405 | rendererOptions : { |
||
| 406 | yOrdering : true |
||
| 407 | } |
||
| 408 | }); |
||
| 409 | m.addLayer(markers); |
||
| 410 | var features = []; |
||
| 411 | for (var j = 0; j < OLmapPOI.length; j++) { |
||
| 412 | var feat = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(OLmapPOI[j].lon, OLmapPOI[j].lat) |
||
| 413 | .transform(m.displayProjection, m.projection), { |
||
| 414 | angle : OLmapPOI[j].angle, |
||
| 415 | opacity : OLmapPOI[j].opacity, |
||
| 416 | img : DOKU_BASE + "lib/plugins/openlayersmap/icons/" + OLmapPOI[j].img, |
||
| 417 | label : OLmapPOI[j].rowId |
||
| 418 | }); |
||
| 419 | var _latlon = OLmapPOI[j].lat + 'º;' + OLmapPOI[j].lon + 'º'; |
||
| 420 | if (mapOpts.displayformat === 'DMS') { |
||
| 421 | _latlon = OpenLayers.Util.getFormattedLonLat(OLmapPOI[j].lat, 'lat') + ';' |
||
| 422 | + OpenLayers.Util.getFormattedLonLat(OLmapPOI[j].lon, 'lon'); |
||
| 423 | } |
||
| 424 | feat.data = { |
||
| 425 | name : OLmapPOI[j].txt, |
||
| 426 | rowId : OLmapPOI[j].rowId, |
||
| 427 | latlon : _latlon, |
||
| 428 | lat: OLmapPOI[j].lat, |
||
| 429 | lon: OLmapPOI[j].lon, |
||
| 430 | alt : OLmapPOI[j].img.substring(0, OLmapPOI[j].img.lastIndexOf(".")) |
||
| 431 | }; |
||
| 432 | features.push(feat); |
||
| 433 | } |
||
| 434 | markers.addFeatures(features); |
||
| 435 | if (mapOpts.autozoom) { |
||
| 436 | extent.extend(markers.getDataExtent()); |
||
| 437 | m.zoomToExtent(extent); |
||
| 438 | } |
||
| 439 | } |
||
| 440 | |||
| 441 | /* GPX layer */ |
||
| 442 | if (mapOpts.gpxfile.length > 0) { |
||
| 443 | var layerGPX = new OpenLayers.Layer.Vector("GPS route", { |
||
| 444 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 445 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile, |
||
| 446 | format : new OpenLayers.Format.GPX({ |
||
| 447 | extractWaypoints : true, |
||
| 448 | extractTracks : true, |
||
| 449 | extractStyles : true, |
||
| 450 | extractAttributes : true, |
||
| 451 | handleHeight : true, |
||
| 452 | maxDepth : 3 |
||
| 453 | }) |
||
| 454 | }), |
||
| 455 | style : { |
||
| 456 | strokeColor : "#0000FF", |
||
| 457 | strokeWidth : 3, |
||
| 458 | strokeOpacity : 0.7, |
||
| 459 | pointRadius : 4, |
||
| 460 | fillColor : "#0099FF", |
||
| 461 | fillOpacity : 0.7 |
||
| 462 | // , label:"${name}" |
||
| 463 | }, |
||
| 464 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 465 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 466 | }); |
||
| 467 | m.addLayer(layerGPX); |
||
| 468 | if (mapOpts.autozoom) { |
||
| 469 | layerGPX.events.register('loadend', m, function() { |
||
| 470 | extent.extend(layerGPX.getDataExtent()); |
||
| 471 | m.zoomToExtent(extent); |
||
| 472 | }); |
||
| 473 | } |
||
| 474 | } |
||
| 475 | |||
| 476 | /* GeoJSON layer */ |
||
| 477 | if (mapOpts.geojsonfile.length > 0) { |
||
| 478 | var layerGJS = new OpenLayers.Layer.Vector("json data", { |
||
| 479 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 480 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile, |
||
| 481 | format : new OpenLayers.Format.GeoJSON({ |
||
| 482 | ignoreExtraDims : true |
||
| 483 | }) |
||
| 484 | }), |
||
| 485 | style : { |
||
| 486 | strokeColor : "#FF00FF", |
||
| 487 | strokeWidth : 3, |
||
| 488 | strokeOpacity : 0.7, |
||
| 489 | pointRadius : 4, |
||
| 490 | fillColor : "#FF99FF", |
||
| 491 | fillOpacity : 0.7 |
||
| 492 | // , label:"${name}" |
||
| 493 | }, |
||
| 494 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 495 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 496 | }); |
||
| 497 | m.addLayer(layerGJS); |
||
| 498 | if (mapOpts.autozoom) { |
||
| 499 | layerGJS.events.register('loadend', m, function() { |
||
| 500 | extent.extend(layerGJS.getDataExtent()); |
||
| 501 | m.zoomToExtent(extent); |
||
| 502 | }); |
||
| 503 | } |
||
| 504 | } |
||
| 505 | |||
| 506 | /* KML layer */ |
||
| 507 | if (mapOpts.kmlfile.length > 0) { |
||
| 508 | var layerKML = new OpenLayers.Layer.Vector("KML file", { |
||
| 509 | protocol : new OpenLayers.Protocol.HTTP({ |
||
| 510 | url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile, |
||
| 511 | format : new OpenLayers.Format.KML({ |
||
| 512 | extractStyles : true, |
||
| 513 | extractAttributes : true, |
||
| 514 | maxDepth : 3 |
||
| 515 | }) |
||
| 516 | }), |
||
| 517 | style : { |
||
| 518 | label : "${name}" |
||
| 519 | }, |
||
| 520 | projection : new OpenLayers.Projection("EPSG:4326"), |
||
| 521 | strategies : [ new OpenLayers.Strategy.Fixed() ] |
||
| 522 | }); |
||
| 523 | m.addLayer(layerKML); |
||
| 524 | if (mapOpts.autozoom) { |
||
| 525 | layerKML.events.register('loadend', m, function() { |
||
| 526 | extent.extend(layerKML.getDataExtent()); |
||
| 527 | m.zoomToExtent(extent); |
||
| 528 | }); |
||
| 529 | } |
||
| 530 | } |
||
| 531 | |||
| 532 | // selectcontrol for layers |
||
| 533 | if ((m.getLayersByClass('OpenLayers.Layer.GML').length > 0) |
||
| 534 | || m.getLayersByClass('OpenLayers.Layer.Vector').length > 0) { |
||
| 535 | selectControl = new OpenLayers.Control.SelectFeature((m.getLayersByClass('OpenLayers.Layer.Vector')).concat(m |
||
| 536 | .getLayersByClass('OpenLayers.Layer.GML')), { |
||
| 537 | hover : mapOpts.poihoverstyle, |
||
| 538 | onSelect : onFeatureSelect, |
||
| 539 | onUnselect : onFeatureUnselect |
||
| 540 | }); |
||
| 541 | m.addControl(selectControl); |
||
| 542 | selectControl.activate(); |
||
| 543 | |||
| 544 | // keyboard select control |
||
| 545 | var iControl = new OpenLayersMap.Control.KeyboardClick({ |
||
| 546 | observeElement : mapOpts.id, |
||
| 547 | selectControl : selectControl |
||
| 548 | }); |
||
| 549 | m.addControl(iControl); |
||
| 550 | } |
||
| 551 | |||
| 552 | if (mapOpts.controls === 1) { |
||
| 553 | /* add base controls to map */ |
||
| 554 | m.addControls([ new OpenLayersMap.Control.LayerSwitcher(), new OpenLayers.Control.Graticule({ |
||
| 555 | visible : false |
||
| 556 | }), new OpenLayersMap.Control.OverviewMap({ |
||
| 557 | mapOptions : { |
||
| 558 | theme : null |
||
| 559 | } |
||
| 560 | }), new OpenLayersMap.Control.Zoom(), new OpenLayersMap.Control.Fullscreen() ]); |
||
| 561 | |||
| 562 | // add hillshade, since this is off by default only add when we have a |
||
| 563 | // layerswitcher |
||
| 564 | m.addLayer(new OpenLayers.Layer.OSM("Hillshade", "https://tiles.wmflabs.org/hillshading/${z}/${x}/${y}.png", { |
||
| 565 | isBaseLayer : false, |
||
| 566 | transparent : true, |
||
| 567 | visibility : false, |
||
| 568 | displayOutsideMaxExtent : true, |
||
| 569 | attribution : '', |
||
| 570 | tileOptions : { |
||
| 571 | crossOriginKeyword : null |
||
| 572 | } |
||
| 573 | })); |
||
| 574 | } |
||
| 575 | |||
| 576 | return m; |
||
| 577 | } |
||
| 578 | |||
| 579 | /** init. */ |
||
| 580 | function olInit() { |
||
| 581 | if (olEnable) { |
||
| 582 | var _i = 0; |
||
| 583 | // create the maps in the page |
||
| 584 | for (_i = 0; _i < olMapData.length; _i++) { |
||
| 585 | var _id = olMapData[_i].mapOpts.id; |
||
| 586 | olMaps[_id] = createMap(olMapData[_i].mapOpts, olMapData[_i].poi); |
||
| 587 | |||
| 588 | // set max-width on help pop-over |
||
| 589 | jQuery('#' + _id).parent().parent().find('.olMapHelp').css('max-width', olMapData[_i].mapOpts.width); |
||
| 590 | |||
| 591 | // shrink the map width to fit inside page container |
||
| 592 | var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth(); |
||
| 593 | if (parseInt(olMapData[_i].mapOpts.width) > _w) { |
||
| 594 | jQuery('#' + _id).width(_w); |
||
| 595 | jQuery('#' + _id + '-olStatusBar').width(_w); |
||
| 596 | jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w); |
||
| 597 | olMaps[_id].updateSize(); |
||
| 598 | } |
||
| 599 | } |
||
| 600 | |||
| 601 | var resizeTimer; |
||
| 602 | jQuery(window).on('resize', function(e) { |
||
|
0 ignored issues
–
show
|
|||
| 603 | clearTimeout(resizeTimer); |
||
| 604 | resizeTimer = setTimeout(function() { |
||
| 605 | for (_i = 0; _i < olMapData.length; _i++) { |
||
|
0 ignored issues
–
show
|
|||
| 606 | var _id = olMapData[_i].mapOpts.id; |
||
| 607 | var _w = jQuery('#' + _id + '-olContainer').parent().innerWidth(); |
||
| 608 | if (parseInt(olMapData[_i].mapOpts.width) > _w) { |
||
| 609 | jQuery('#' + _id).width(_w); |
||
| 610 | jQuery('#' + _id + '-olStatusBar').width(_w); |
||
| 611 | jQuery('#' + _id).parent().parent().find('.olMapHelp').width(_w); |
||
| 612 | olMaps[_id].updateSize(); |
||
| 613 | } |
||
| 614 | } |
||
| 615 | }, 250); |
||
| 616 | }); |
||
| 617 | |||
| 618 | // hide the table(s) with POI by giving it a print-only style |
||
| 619 | jQuery('.olPOItableSpan').addClass('olPrintOnly'); |
||
| 620 | // hide the static map image(s) by giving it a print only style |
||
| 621 | jQuery('.olStaticMap').addClass('olPrintOnly'); |
||
| 622 | // add help button with toggle. |
||
| 623 | jQuery('.olWebOnly > .olMap') |
||
| 624 | .prepend( |
||
| 625 | '<div class="olMapHelpButtonDiv">' |
||
| 626 | + '<button onclick="jQuery(\'.olMapHelp\').toggle(500);" class="olMapHelpButton olHasTooltip"><span>' |
||
| 627 | + OpenLayers.i18n("toggle_help") + '</span>?</button></div>'); |
||
|
0 ignored issues
–
show
The variable
OpenLayers seems to be never declared. If this is a global, consider adding a /** global: OpenLayers */ comment.
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
|
|||
| 628 | // toggle to switch dynamic vs. static map |
||
| 629 | jQuery('.olMapHelp').before( |
||
| 630 | '<div class="a11y"><button onclick="jQuery(\'.olPrintOnly\').toggle();jQuery(\'.olWebOnly\').toggle();">' |
||
| 631 | + OpenLayers.i18n("toggle_dynamic_map") + '</button></div>'); |
||
| 632 | } |
||
| 633 | } |
||
| 634 | |||
| 635 | /** |
||
| 636 | * ol api flag. |
||
| 637 | * |
||
| 638 | * @type {Boolean} |
||
| 639 | */ |
||
| 640 | var olEnable = false, |
||
| 641 | /** |
||
| 642 | * An array with data for each map in the page. |
||
| 643 | * |
||
| 644 | * @type {Array} |
||
| 645 | */ |
||
| 646 | olMapData = [], |
||
| 647 | /** |
||
| 648 | * Holds a reference to all of the maps on this page with the map's id as key. |
||
| 649 | * Can be used as an extension point. |
||
| 650 | * |
||
| 651 | * @type {Object} |
||
| 652 | */ |
||
| 653 | olMaps = new Object(), |
||
| 654 | /** |
||
| 655 | * Stamen tiles flag. |
||
| 656 | * |
||
| 657 | * @type {Boolean} |
||
| 658 | */ |
||
| 659 | stamenEnable = false, |
||
| 660 | /** |
||
| 661 | * google map api flag. |
||
| 662 | * |
||
| 663 | * @type {Boolean} |
||
| 664 | */ |
||
| 665 | gEnable = false, |
||
| 666 | /** |
||
| 667 | * Bing tiles flag. |
||
| 668 | * |
||
| 669 | * @type {Boolean} |
||
| 670 | */ |
||
| 671 | bEnable = false, |
||
| 672 | /** |
||
| 673 | * Bing API key. |
||
| 674 | * |
||
| 675 | * @type {String} |
||
| 676 | */ |
||
| 677 | bApiKey = '', |
||
| 678 | /** |
||
| 679 | * Google API key. |
||
| 680 | * |
||
| 681 | * @type {String} |
||
| 682 | */ |
||
| 683 | gApiKey = '', |
||
| 684 | /** |
||
| 685 | * Thunderforest API key. |
||
| 686 | * |
||
| 687 | * @type {String} |
||
| 688 | */ |
||
| 689 | tfApiKey = '', |
||
| 690 | /** |
||
| 691 | * OSM tiles flag. |
||
| 692 | * |
||
| 693 | * @type {Boolean} |
||
| 694 | */ |
||
| 695 | osmEnable = true, |
||
| 696 | /** |
||
| 697 | * CSS support flag. |
||
| 698 | * |
||
| 699 | * @type {Boolean} |
||
| 700 | */ |
||
| 701 | olCSSEnable = true; |
||
| 702 | |||
| 703 | /* register olInit to run with onload event. */ |
||
| 704 | jQuery(olInit); |
||
| 705 |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.