1// Skript basiert auf OL V6.1.1 2 3var mapID = 'ol-map'; 4var mapEl = document.querySelector("#"+mapID); 5 6var infoContainer = document.querySelector("#ol-popup"); 7var infoContent = document.querySelector("#ol-popup-content"); 8var infoCloser = document.querySelector("#ol-popup-closer"); 9 10function loadMap() { 11 12mapEl.innerHTML = ''; 13 14var jsonUrl = 'https://www.kirche-ps.de/intern/kirchengemeinden-osm.json.json'; 15var iconSrcUrl_se = 'assets/js/openlayers/icons/ps-marker-se.png'; 16var iconSrcUrl_pl = 'assets/js/openlayers/icons/ps-marker-pl.png'; 17var iconSrcUrl = 'assets/js/openlayers/icons/circle.svg'; 18 19var center = ol.proj.transform([10.409557714843674,54.15065686722784], 'EPSG:4326', 'EPSG:3857'); 20var zoom = 9; 21var osmTooltipModal = document.getElementById('osm-tooltip-modal'); 22 23var sourceBingMapsRoad = new ol.source.BingMaps({ 24 key: 'ApdOY_0n4f-9A_2ZBpNb06RB5S2drW08vteKugBbTON_8Nm5UiT3rs2fZJIM1SJn', 25 imagerySet: 'Road', 26 culture: 'de-DE' 27 }); 28var sourceBingMapsAerial = new ol.source.BingMaps({ 29 key: 'ApdOY_0n4f-9A_2ZBpNb06RB5S2drW08vteKugBbTON_8Nm5UiT3rs2fZJIM1SJn', 30 imagerySet: 'AerialWithLabels', 31 culture: 'de-DE' 32 }); 33var bingMapsRoad = new ol.layer.Tile({ 34 preload: Infinity, 35 source: sourceBingMapsRoad 36 }); 37 38var bingMapsAerial = new ol.layer.Tile({ 39 preload: Infinity, 40 source: sourceBingMapsAerial 41}); 42 43// CLUSTER FUNCTIONS 44var earthquakeFill = new ol.style.Fill({ 45 color: 'rgba(255, 153, 0, 0.8)' 46}); 47var earthquakeStroke = new ol.style.Stroke({ 48 color: 'rgba(255, 204, 0, 0.2)', 49 width: 1 50}); 51var textFill = new ol.style.Fill({ 52 color: '#fff' 53}); 54var textStroke = new ol.style.Stroke({ 55 color: 'rgba(0, 0, 0, 0.6)', 56 width: 3 57}); 58var invisibleFill = new ol.style.Fill({ 59 color: 'rgba(255, 255, 255, 0.01)' 60}); 61 62function createEarthquakeStyle(feature,icon) { 63 var propstei = feature.get('propstei'); 64 var iconSrc = ''; 65 if (propstei == 's') { 66 iconSrc = iconSrcUrl_se; 67 } else { 68 iconSrc = iconSrcUrl_pl; 69 } 70 71 return new ol.style.Style({ 72 geometry: feature.getGeometry(), 73 image: new ol.style.Icon(({ 74 anchor: [0.5, 36], 75 anchorXUnits: 'fraction', 76 anchorYUnits: 'pixels', 77 opacity: 1, 78 src: iconSrc 79 })) 80 }); 81} 82/* 83 anchor: [0.5, 32], 84 anchorXUnits: 'fraction', 85 anchorYUnits: 'pixels', 86*/ 87 88var maxFeatureCount; 89function calculateClusterInfo(resolution) { 90 maxFeatureCount = 0; 91 var features = vector.getSource().getFeatures(); 92 var feature, radius; 93 for (var i = features.length - 1; i >= 0; --i) { 94 feature = features[i]; 95 var originalFeatures = feature.get('features'); 96 var extent = ol.extent.createEmpty(); 97 for (var j = 0, jj = originalFeatures.length; j < jj; ++j) { 98 ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent()); 99 } 100 maxFeatureCount = Math.max(maxFeatureCount, jj); 101 radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) / resolution; 102 feature.set('radius', radius); 103 } 104} 105 106var currentResolution; 107function styleFunction(feature, resolution) { 108 if (resolution != currentResolution) { 109 calculateClusterInfo(resolution); 110 currentResolution = resolution; 111 } 112 var style; 113 var size = feature.get('features').length; 114 115 //var size = 1; 116 //if (feature.get('features') != null) size = feature.get('features').length; 117 if (size > 1) { 118 style = [new ol.style.Style({ 119 image: new ol.style.Circle({ 120 radius: feature.get('radius')+10, 121 fill: new ol.style.Fill({ 122 color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))] 123 }) 124 }), 125 text: new ol.style.Text({ 126 text: size.toString(), 127 fill: textFill, 128 stroke: textStroke 129 }) 130 })]; 131 } else { 132 var originalFeature = feature.get('features')[0]; 133 var icon = originalFeature.get('icon'); 134 style = [createEarthquakeStyle(originalFeature,icon)]; 135 } 136 return style; 137} 138 139function selectStyleFunction(feature, resolution) { 140 var styles = [new ol.style.Style({ 141 image: new ol.style.Circle({ 142 radius: feature.get('radius'), 143 fill: invisibleFill 144 }) 145 })]; 146 var originalFeatures = feature.get('features'); 147 var originalFeature; 148 for (var i = originalFeatures.length - 1; i >= 0; --i) { 149 originalFeature = originalFeatures[i]; 150 var icon = originalFeature.get('icon'); 151 styles.push(createEarthquakeStyle(originalFeature,icon)); 152 } 153 return styles; 154} 155// CLUSTER ENDE 156 157var resizeMapButton = document.createElement('button'); 158resizeMapButton.className = 'resize-map-button'; 159resizeMapButton.title = 'Karte zurückstellen'; 160resizeMapButton.innerHTML = '<span data-uk-icon="icon: refresh" class="uk-icon">'; 161var resizeMap = document.createElement('div'); 162resizeMap.className = 'resize-map ol-unselectable ol-control'; 163resizeMap.appendChild(resizeMapButton); 164 165// Fullscreen-Icons
166var fsOpenerIcon = document.createElement('span'); 167fsOpenerIcon.setAttribute('data-uk-icon', 'expand'); 168 169var fsCloserIcon = document.createElement('span'); 170fsCloserIcon.setAttribute('data-uk-icon', 'close'); // compress missed in uikit3 171 172var source = new ol.source.Vector({ 173 url: jsonUrl, 174 format: new ol.format.GeoJSON() 175}); 176 177var clusterSource = new ol.source.Cluster({ 178 distance: 3, 179 source: source 180}); 181 182var vector = new ol.layer.Vector({ 183 source: clusterSource, 184 style: styleFunction 185}); 186 187var raw = new ol.layer.Vector({ 188 source: source 189}); 190 191var enablerotation = false; 192 193if (window.innerWidth >= 1200) { 194 enablerotation = true; 195} 196window.addEventListener("resize", function () { 197 if (window.innerWidth >= 1200) { 198 enablerotation = true; 199 } else { 200 enablerotation = false; 201 } 202}); 203 204// layers: [bingMapsRoad,vector], 205 206var map = new ol.Map({ 207 target: mapID, 208 layers: [ 209 new ol.layer.Tile({ 210 source: new ol.source.OSM() 211 }), 212 vector 213 ], 214 moveTolerance: 5, 215 controls: ol.control.defaults().extend([ 216 new ol.control.Control({element: resizeMap}), 217 new ol.control.FullScreen({ label: fsOpenerIcon, labelActive: fsCloserIcon, tipLabel: 'Fullscreen' }) 218 ]), 219 view: new ol.View({ 220 center: center, 221 zoom: zoom, 222 enableRotation: false 223 }) 224}); 225 226function resMap() { 227 map.getView().setZoom(zoom); 228 map.getView().setCenter(center); 229}; 230resizeMapButton.addEventListener('click', resMap, false); 231 232function onClusterClick(evt) { 233 var feature = map.forEachFeatureAtPixel(evt.pixel, 234 function (feature, layer) { 235 return feature; 236 }); 237 if (feature) { 238 var originalFeatures = feature.get('features'); 239 if (feature.get('features') != null) { 240 var fLength = originalFeatures.length; 241 var zoomSize = 1; 242 if (fLength > 1) { 243 if (fLength == 2) zoomSize = 3; 244 if (fLength == 3) zoomSize = 2; 245 246 var coordinate = evt.coordinate; 247 map.getView().setCenter(coordinate); 248 map.getView().setZoom(map.getView().getZoom()+zoomSize); 249 } 250 } 251 } 252} 253map.on('singleclick', onClusterClick); 254 255// Erzeugen des Tooltips bei MouseOver 256var tooltip = document.createElement('div'); 257tooltip.className = 'tooltip-layer'; 258 259var tooltipInner = document.createElement('div'); 260tooltipInner.style.marginBottom = '0'; 261tooltipInner.style.backgroundColor = '#ffffff'; 262tooltipInner.style.padding = '0 5px 0 5px'; 263tooltipInner.style.fontSize = '12px'; 264tooltip.appendChild(tooltipInner); 265 266var popup = new ol.Overlay({ 267 element: tooltip, 268 offset: [0, -10], 269 positioning: 'top-center' 270}); 271map.addOverlay(popup); 272 273// Tooltip aufrufen bei mouseover, bzw. pointermove 274map.on('pointermove', function (evt) { 275 map.removeOverlay(popup); 276 var coordinate = evt.coordinate; 277 var feature = map.forEachFeatureAtPixel(evt.pixel, 278 function (feature, layer) { 279 return feature; 280 }); 281 282 if (feature) { 283 var fLength = 1; 284 if (feature.get('features') != null) fLength = feature.get('features').length; 285 var popupContent = ''; 286 287 if (feature.get('features') != null) { 288 for (var i = 0; i < fLength; i++) { 289 var f = feature.get('features')[i]; 290 var uid = f.get('uid'); 291 var name = f.get('name'); 292 var location = f.get('short_name'); 293 } 294 } else { 295 var name = feature.get('veranstalter'); 296 var location = feature.get('ort'); 297 } 298 popupContent = '<div class="" style="font-size: 14px; line-height: 18px; padding: 5px;"><b>'+name+'</b><br>'+location+'</div>'; 299 300 if (fLength == 1) { 301 //map.addOverlay(popup); 302 //tooltipInner.innerHTML = popupContent; 303 //popup.setPosition(evt.coordinate); 304 } 305 } 306}); 307 308// ,offset: [0, -2], 309var infoOverlay = new ol.Overlay({ 310 element: infoContainer, 311 autoPan: true, 312 autoPanAnimation: { 313 duration: 150 314 } 315 316}); 317 318// Infofenster aufrufen bei click 319/* alte Funktion mit Modallayer 320map.on('singleclick', function (evt) { 321 322 var feature = map.forEachFeatureAtPixel(evt.pixel, 323 function (feature, layer) { 324 return feature; 325 }); 326 327 if (feature) { 328 var fLength = feature.get('features').length; 329 var overlayContent = ''; 330 for (var i = 0; i < feature.get('features').length; i++) { 331 var f = feature.get('features')[i]; 332 var infotext = f.get('infotext'); 333 var coord = f.getGeometry().getCoordinates(); 334 335 osmTooltipContent += infotext; 336 tooltip.style.display = f ? '' : 'none'; 337 } 338 if ( fLength == 1 ) { 339 //osmTooltipModal.innerHTML = '<div class="uk-modal-dialog uk-modal-body" style="width: 480px; padding-bottom: 20px;"><button class="uk-modal-close-default" type="button" uk-close></button><div class="osm-tooltip-content" style="margin-top: -15px;">' + osmTooltipContent + '</div></div>'; 340 341 //osmTooltipModal.innerHTML = '<div class="" style="border: 1px solid #666666; width: 480px; padding: 15px; margin-bottom: 15px;"><button class="uk-modal-close-default" type="button" uk-close></button><div class="osm-tooltip-content" style="margin-top: -15px;">' + osmTooltipContent + '</div></div>'; 342 343 //UIkit.modal('#osm-tooltip-modal').show(); 344 } 345 } 346}); 347*/ 348 349map.on('singleclick', function (evt) { 350 infoOverlay.setPosition(undefined);
351 //map.removeOverlay(popup); 352 var feature = map.forEachFeatureAtPixel(evt.pixel, 353 function (feature, layer) { 354 return feature; 355 }); 356 357 if (feature) { 358 var fLength = ''; 359 var overlayContent = ''; 360 if (feature.get('features') != null) { 361 fLength = feature.get('features').length; 362 for (var i = 0; i < feature.get('features').length; i++) { 363 var f = feature.get('features')[i]; 364 var uid = f.get('uid'); 365 var coord = f.getGeometry().getCoordinates(); 366 var infotext = f.get('infotext'); 367 368 overlayContent = infotext; 369 370 tooltip.style.display = f ? 'block' : 'none'; 371 } 372 373 if ((fLength == 1) && (uid != null)) { 374 infoContent.innerHTML = overlayContent; 375 infoOverlay.setPosition(evt.coordinate); 376 infoContainer.style.display = 'block'; 377 map.addOverlay(infoOverlay); 378 } 379 } 380 } 381}); 382 383infoCloser.onclick = function () { 384 infoOverlay.setPosition(undefined); 385 infoCloser.blur(); 386 return false; 387}; 388 389map.on('pointermove', function (evt) { 390 if (map.hasFeatureAtPixel(evt.pixel)) { 391 this.getTargetElement().style.cursor = 'pointer'; 392 } else { 393 this.getTargetElement().style.cursor = ''; 394 } 395 396}); 397 398} 399 400loadMap(); 401
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.