1document.addEventListener('DOMContentLoaded', function () { 2 $('.show-addressgroup').click(function (event) { 3 event.preventDefault(); 4 $('.addressgroups-tree li').removeClass('active'); 5 $(this).parent('li').addClass('active'); 6 }); 7 8 $('#addressgroupsTreeCollapseBtn').click(function (event) { 9 event.preventDefault(); 10 $('.addressgroups-tree').toggleClass('open'); 11 }); 12 13 Array.prototype.forEach.call(document.querySelectorAll('.toggle-subgroups'), function (item) { 14 item.addEventListener('click', function (e) { 15 e.preventDefault(); 16 var parent = e.target.parentElement; 17 var groupId = parent.dataset.addressgroup; 18 Array.prototype.forEach.call(parent.querySelectorAll('[data-child-of="' + groupId + '"]'), 19 function (el) { 20 el.classList.toggle('open'); 21 }); 22 }); 23 }); 24 25 var $pageLoaded = false; 26 map.on('loadend', function () { 27 if ($pageLoaded == false) { 28 displayMarkers(0, 'Alle Adressen'); 29 $pageLoaded = true; 30 } 31 }); 32 33 map.updateSize(); 34}); 35 36var canvas = document.querySelector('#map-canvas'); 37var longitude = parseFloat(canvas.dataset.lon); 38var latitude = parseFloat(canvas.dataset.lat); 39var container = document.getElementById('popup'); 40var content = document.getElementById('popup-content'); 41var closer = document.getElementById('popup-closer'); 42 43var iconFeatures = []; 44 45var AddressItems = document.getElementsByClassName('addressItem'); 46 47var vectorSource = new ol.source.Vector({
48 features: iconFeature 49}); 50 51var vectorLayer = new ol.layer.Vector({ 52 source: vectorSource 53}); 54 55var setFeatureIcon = function (iconFeature, lon, lat, iconPath, category, info) { 56 iconFeature = new ol.Feature({ 57 category: category, 58 geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])), 59 content: info 60 }); 61 62 iconFeature.setStyle(new ol.style.Style({ 63 image: new ol.style.Icon({ 64 anchor: [0.5, 46], 65 anchorXUnits: 'fraction', 66 anchorYUnits: 'pixels', 67 src: iconPath, 68 scale: 1 69 }) 70 })); 71 72 vectorSource.addFeature(iconFeature); 73}; 74 75function openPopupAccordion() { 76 var popupAccordion = content.querySelector('.accordion'); 77 if (!popupAccordion) { 78 return; 79 } 80 81 var button = popupAccordion.querySelector('.accordion-button'); 82 var collapse = popupAccordion.querySelector('.accordion-collapse'); 83 84 if (!button || !collapse) { 85 return; 86 } 87 88 button.classList.remove('collapsed'); 89 button.setAttribute('aria-expanded', 'true'); 90 collapse.classList.add('show'); 91} 92 93for (var i = 0; i < AddressItems.length; i++) { 94 const iconPath = AddressItems[i].dataset.icon; 95 const lon = AddressItems[i].dataset.itemlon; 96 const lat = AddressItems[i].dataset.itemlat; 97 const category = AddressItems[i].dataset.category; 98 var iconFeature; 99 setFeatureIcon(iconFeature, lon, lat, iconPath, category, AddressItems[i].innerHTML); 100} 101 102var attribution = new ol.control.Attribution({ 103 collapsible: false 104}); 105 106// Create OpenStreetMap-Layer 107var osmLayer = new ol.layer.Tile({ 108 source: new ol.source.XYZ({ 109 url: 'https://basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png?key=cb1_33s1_1_ff5b5ea672bc8061df826194', 110 attributions: [ 111 '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-Mitwirkende, © <a href="https://carto.com/attributions" target="_blank">CARTO</a>', 112 ], 113 crossOrigin: 'anonymous' 114 }) 115}); 116 117map = new ol.Map({ 118 target: document.querySelector('#map-canvas'), 119 layers: [osmLayer, vectorLayer], 120 controls: ol.control.defaults({ attribution: false, collapsible: false }).extend([attribution]), 121 view: new ol.View({ 122 center: ol.proj.fromLonLat([longitude, latitude]), 123 zoom: 8, 124 minZoom: 5, 125 maxZoom: 18, 126 }), 127 layer: new ol.layer.Vector({ 128 source: new ol.source.Vector({ 129 features: [ 130 new ol.Feature({ 131 geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])) 132 }) 133 ] 134 }) 135 }) 136}); 137 138var overlay = new ol.Overlay({ 139 element: container, 140 positioning: 'bottom-center', 141 className: 'overlay', 142 autoPan: true, 143 autoPanAnimation: { 144 duration: 250 145 }, 146 position: [0, 0] 147}); 148 149map.addOverlay(overlay); 150 151closer.onclick = function () { 152 overlay.setPosition(undefined); 153 closer.blur(); 154 return false; 155}; 156 157// Change cursor on hover Pin 158map.on('pointermove', function (e) { 159 if (e.dragging) { 160 return; 161 } 162 163 var pixel = map.getEventPixel(e.originalEvent); 164 var hit = map.hasFeatureAtPixel(pixel); 165 map.getTarget().style.cursor = hit ? 'pointer' : ''; 166}); 167 168map.on('singleclick', function (event) { 169 if (map.hasFeatureAtPixel(event.pixel) === true) { 170 var feature = map.forEachFeatureAtPixel(event.pixel, function (feature) { 171 return feature; 172 }); 173 174 if (feature) { 175 content.innerHTML = feature.get('content'); 176 openPopupAccordion(); 177 178 var coordinate = event.coordinate; 179 overlay.setPosition(coordinate); 180 } 181 } else { 182 overlay.setPosition(undefined); 183 closer.blur(); 184 } 185}); 186 187var hideAllMapAddresses = function () { 188 Array.prototype.forEach.call( 189 document.querySelectorAll('#map-addresses .address-group--item'), 190 function (item) { 191 item.style.display = 'none'; 192 if (item.classList.contains('open')) { 193 item.classList.remove('open');
194 dkSlideUp(item.querySelector('.address-group--item--bottom')); 195 } 196 } 197 ); 198}; 199 200function hideAllMarkers() { 201 vectorSource.clear(); 202} 203 204function displayMarkers(categoryId, categoryName) { 205 hideAllMarkers(); 206 207 if (categoryName != 'Alle Adressen' && categoryId != 0) { 208 for (var i = 0; i < AddressItems.length; i++) { 209 const iconPath = AddressItems[i].dataset.icon; 210 const lon = AddressItems[i].dataset.itemlon; 211 const lat = AddressItems[i].dataset.itemlat; 212 const category = AddressItems[i].dataset.category; 213 214 if (categoryName == category) { 215 var iconFeature; 216 setFeatureIcon(iconFeature, lon, lat, iconPath, category, AddressItems[i].innerHTML); 217 } 218 219 if (category != categoryName) { 220 AddressItems[i].parentNode.style.display = 'none'; 221 } else { 222 AddressItems[i].parentNode.style.display = 'block'; 223 } 224 225 var $headline = document.querySelector('.categoryHeader'); 226 $headline.innerHTML = categoryName; 227 } 228 229 if (vectorSource.getExtent()[0] != 'Infinity') { 230 // map.getView().fit(vectorSource.getExtent(), map.getSize()); 231 // map.getView().setZoom(map.getView().getZoom() - 1); 232 } 233 } else if (categoryName == 'Alle Adressen' && categoryId == 0) { 234 for (var i = 0; i < AddressItems.length; i++) { 235 const iconPath = AddressItems[i].dataset.icon; 236 const lon = AddressItems[i].dataset.itemlon; 237 const lat = AddressItems[i].dataset.itemlat; 238 const category = AddressItems[i].dataset.category; 239 var iconFeature; 240 setFeatureIcon(iconFeature, lon, lat, iconPath, category, AddressItems[i].innerHTML); 241 AddressItems[i].parentNode.style.display = 'block'; 242 } 243 244 var $headline = document.querySelector('.categoryHeader'); 245 $headline.innerHTML = 'Adressen'; 246 247 // map.getView().fit(vectorSource.getExtent(), map.getSize()); 248 // map.getView().setZoom(map.getView().getZoom() - 1); 249 } 250} 251 252map.updateSize(); 253 254map.on('postcompose', function () { 255 document.querySelector('canvas').style.left = 'calc((100vw - 100%) /-2)'; 256 document.querySelector('canvas').style.right = 'calc((100vw - 100%) /-2)'; 257 258 document.querySelector('canvas').style.left = '0'; 259 document.querySelector('canvas').style.right = 'calc((100vw - 100%) /-2)'; 260}); 261
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.