1/** 2 * @file 3 * Drupal Bootstrap object. 4 */ 5 6/** 7 * All Drupal Bootstrap JavaScript APIs are contained in this namespace. 8 * 9 * @namespace 10 */ 11(function ($, Drupal) { 12 13 $(document).ready( // Beginn document ready 14 function () { 15 16 17 $.each($('.elkbmap'), function (key, value) { 18 var elkb_ids = $(this).data("elkbid").toString(); 19 var map_id = $(this).attr("id"); 20 var jsonpath = $(this).data('jsonpath'); 21 var format = $(this).data('format'); 22 23 24 25 var arrELKBIDs = []; 26 27 if (elkb_ids.indexOf(',') > -1) { 28 arrELKBIDs = elkb_ids.split(','); 29 } else { 30 arrELKBIDs[0] = elkb_ids; 31 } 32 var arrayLength = arrELKBIDs.length; 33 34 var Styles = createStyles(format,arrayLength); 35 36 var vectorLayerArray = []; 37 for (var i = 0; i < arrayLength; i++) { 38 39 // Pfad auf Geojson-Dateien 40 url = jsonpath.concat( 'elkb_map/elkb_gis_', arrELKBIDs[i],'.json'); 41 vectorLayerArray[i] = getVectorLayer(url, i); 42 //console.log('hier:' + url); 43 } 44 45 // Generieren der Map Instanzen 46 var map = new ol.Map({ 47 target: map_id, 48 layers: [ 49 new ol.layer.Tile({ 50 source: new ol.source.OSM() 51 }) 52 ], 53 view: new ol.View({ 54 center: ol.proj.fromLonLat([11.4979, 48.7904]), 55 zoom: 7 56 }), 57 interactions: ol.interaction.defaults({mouseWheelZoom:false}) 58 }); 59 60 // --- hier noch nacharbeiten - Verlinkung?? 61 /* 62 var selectSingleClick = new ol.interaction.Select(); 63 //map.addInteraction(selectSingleClick); 64 65 selectSingleClick.on('select', function(e) { 66 features = e.target.getFeatures(); 67 }); 68 */ 69 70 /** 71 * KML-Layer 72 */ 73 var kml_path = $('.wegdisplay').data('url'); 74 if (kml_path != '') { 75 var kmlSource = new ol.source.Vector({ 76 url: jsonpath.concat(kml_path), 77 //url: kml_path, 78 format: new ol.format.KML() 79 }); 80 81 var kmlLayer = new ol.layer.Vector({ 82 source: kmlSource 83 }); 84 kmlSource.once('change',function(e){ 85 if(vectorSource.getState() === 'ready') { 86 var extent = kmlSource.getExtent(); 87 zoomToExtent(extent) 88 89 } 90 }); 91 92 map.addLayer(kmlLayer); 93 } 94 95 96 var wholeExtent = ol.extent.createEmpty(); 97 98 for (var i = 0; i < arrayLength; i++) { 99 map.addLayer(vectorLayerArray[i]); 100 101 } 102 103 function getVectorLayer(url, i) { 104 105 var vectorSource = new ol.source.Vector({ 106 url: url, 107 format: new ol.format.GeoJSON({ 108 defaultDataProjection: 'EPSG:4326', 109 projection: 'EPSG:3857' 110 }) 111 }); 112 113 114 115 // Wenn GeoJSON geladen ist _> hinzoomen 116 vectorSource.once('change',function(e){ 117 if(vectorSource.getState() === 'ready') { 118 var extent = vectorSource.getExtent(); 119 zoomToExtent(extent) 120 121 } 122 }); 123 124 var vectorLayer = new ol.layer.Vector({ 125 source: vectorSource , 126 style:function(feature, resolution) { 127 mystyle = Styles[i]; 128 var labeltext = feature.get('name'); 129 130 var styletext = mystyle.customText; 131 132 if(styletext != undefined && styletext != ''){ 133 labeltext = styletext; 134 } 135 mystyle.getText().setText(resolution < 100 ? labeltext : ''); 136 return mystyle; 137 } 138 }) 139 140 return vectorLayer; 141 } 142 143 function zoomToExtent(extent){ 144 ol.extent.extend(wholeExtent,extent); 145 map.getView().fit(wholeExtent, map.getSize()); 146 } 147 148 /* Marker -------------------- */ 149 var MarkerArray = []; 150 $('.markerdef-' + map_id).each(function(){ 151 152 153 154 var lat = $(this).data('lat'); 155 var lng = $(this).data('lng'); 156 var color = $(this).data('color'); 157 if(color == ''){ 158 color = 'rgba(189, 45, 67, 0.9)'; 159 } 160 var stroke = $(this).data('stroke'); 161 if(stroke == ''){ 162 stroke = 'rgba(255, 255, 255, 0.6)'; 163 } 164 var markersize = $(this).data('markersize'); 165 if(markersize == ''){ 166 markersize = 50; 167 } 168 169 var markerimg = $(this).data('markerimg'); 170 if(markerimg != ''){ 171 markersize = 50; 172 } 173 var popupcontent = $(this).data('popupcontent'); 174 var nodeid = $(this).data('nodeid'); 175 176 var markerposition = new ol.proj.fromLonLat([lng,lat]); 177 178 var iconFeature = new ol.Feature({ 179 geometry: new ol.geom.Point(markerposition), 180 name: 'Marker' 181 }); 182 iconFeature.markersize = markersize; 183 iconFeature.popupcontent = popupcontent; 184 iconFeature.nodeid = nodeid; 185 186 var marker2 = "M25 0c-8.284 0-15 6.656-15 14.866 0 8.211 15 35.135 15 35.135s15-26.924 15-35.135c0-8.21-6.716-14.866-15-14.866zm-.049 19.312c-2.557 0-4.629-2.055-4.629-4.588 0-2.535 2.072-4.589 4.629-4.589 2.559 0 4.631 2.054 4.631 4.589 0 2.533-2.072 4.588-4.631 4.588z"; 187 188 var svg = '<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewB
188ox="0 0 50 50" overflow="inherit" >' + 189 '<path stroke="' + stroke + '" fill="' + color + '" d="' + marker2 + '"/></svg>'; 190 191 //console.log(svg); 192 193 if(markerimg != ''){ 194 var iconStyle = new ol.style.Style({ 195 image: new ol.style.Icon( ({ 196 anchor: [0.5, 50], 197 anchorXUnits: 'fraction', 198 anchorYUnits: 'pixels', 199 src: markerimg 200 })) 201 }); 202 } else { 203 204 var iconStyle = new ol.style.Style({ 205 image: new ol.style.Icon({ 206 207 anchor: [0.5, 50], 208 anchorXUnits: 'fraction', 209 anchorYUnits: 'pixels', 210 src: 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svg), 211 imgSize: [markersize,markersize], 212 size: [markersize,markersize], 213 scale: markersize/50 214 215 }) 216 }); 217 } 218 219 iconFeature.setStyle(iconStyle); 220 MarkerArray[MarkerArray.length] = iconFeature; 221 222 223 }); 224 225 var markerSource = new ol.source.Vector({ 226 features: MarkerArray 227 }); 228 229 var markerLayer = new ol.layer.Vector({ 230 source: markerSource 231 }); 232 map.addLayer(markerLayer); 233 234 //Wenn es keine Grenzen gibt, auf Marker zoomen 235 if(arrELKBIDs[0] == ''){ 236 map.getView().fit(markerSource.getExtent(), map.getSize()); 237 map.getView().setZoom(map.getView().getZoom() -1); 238 } 239 240 /* Popup */ 241 242 var container = document.getElementById('popup-'.concat( map_id )); 243 var closer = document.getElementById('popup-closer-'+ map_id); 244 245 246 var popupoverlay = new ol.Overlay( ({ 247 element: container, 248 positioning: 'top-center', 249 autoPan: true, 250 //offset: [0, -markersize], 251 autoPanAnimation: { 252 duration: 250 253 } 254 })); 255 popupoverlay.setPosition(undefined); 256 257 258 closer.onclick = function() { 259 popupoverlay.setPosition(undefined); 260 closer.blur(); 261 return false; 262 }; 263 264 map.addOverlay(popupoverlay); 265 266 // display popup on click 267 map.on('click', function(evt) { 268 var feature = map.forEachFeatureAtPixel(evt.pixel, 269 function(feature) { 270 return feature; 271 }); 272 if (feature && feature.popupcontent != '' && feature.popupcontent != undefined) { 273 var coordinates = feature.getGeometry().getCoordinates(); 274 var html = '<div class="elkbmap_popupcontent_main">'+ feature.popupcontent +'</div>' + '<div class="elkbmap_popupcontent_link"><a class="btn btn-outline-secondary btn-sm btn-block" href="/node/' + feature.nodeid +'">Mehr Informationen</a></div>'; 275 $('#popup-content-'+ map_id).html(html); 276 popupoverlay.setOffset([ 0, -(feature.markersize) ]), 277 popupoverlay.setPosition(coordinates); 278 return false; 279 } 280 if(feature ){ 281 //console.log(feature); 282 } 283 }); 284 285 }); 286 287 }) 288 ; // END document ready 289 290 291 292 293})(jQuery, Drupal); 294 295 296 297 298function elkbzoomin(ort,map_id){ 299 map_id.getView().setCenter(ort); 300 map_id.getView().setZoom(12); 301} 302 303 304 305function createStyles(format, count ){ 306//console.log(format); 307 Styles = []; 308 fa = []; 309 if (format.indexOf('|') > -1) { 310 fa = format.split('|'); 311 } else { 312 fa[0] = format; 313 } 314 //console.log(fa); 315 for (var i = 0; i < count; i++) { 316 if(fa[i] != undefined && fa[i] != '' ){ 317 Styles[i] = createStyle(fa[i]); 318 } else { 319 Styles[i] = defaultstyle; 320 } 321 322 } 323 return Styles; 324 325} 326 327function createStyle(fa){ 328 var styledef = fa.split(';'); 329 var newStyle = defaultstyle.clone(); 330 // Randfarbe: 331 if(styledef[0] != undefined && styledef[0] != ''){ 332 newStyle.setStroke(new ol.style.Stroke({ 333 color: styledef[0], 334 width: 1 335 })) 336 } 337 // Füllfarbe: 338 if(styledef[1] != undefined && styledef[1] != ''){ 339 var transp = 30; 340 if(styledef[6] != undefined && styledef[6] != ''){ 341 transp = styledef[6]; 342 } 343 newStyle.setFill( 344 new ol.style.Fill({ 345 color: convertHex(styledef[1],transp) //'rgba(59, 91, 239, 0.3)' 346 }) 347 ); 348 } 349 // Textfarbe 350 if(styledef[2] != undefined && styledef[2] != ''){ 351 352 newStyle.getText().setFill(new ol.style.Fill({ 353 color: styledef[2] 354 })) 355 } 356 // FontgröÃe 357 if(styledef[3] != undefined && styledef[3] != ''){ 358 newStyle.getText().setFont(styledef[3].concat(' Calibri,sans-serif')); 359 } 360 // Beschriftung 361 if(styledef[4] != undefined && styledef[4] != ''){ 362 newStyle.getText().setText(styledef[4]); 363 newStyle.customText = styledef[4]; 364 } 365 366 // Verlinkung 367 if(styledef[5] != undefined && styledef[5] != ''){ 368 newStyle.link = styledef[5]; 369 } 370 return newStyle; 371} 372function convertHex(hex,opacity){ 373 hex = hex.replace('#',''); 374 r = parseInt(hex.substring(0,2), 16); 375 g = parseInt(hex.substring(2,4), 16); 376 b = parseInt(hex.substring(4,6), 16); 377 378 result = 'rgba('+r+','+g+','+b+','+opacity/100+')'; 379 return result; 380} 381 382var defaultstyle = new ol.style.Style({ 383 fill: new ol.style.Fill({ 384 color: 'rgba(59, 91, 239, 0.3)' 385 }), 386 stroke: new ol.style.Stroke({
387 color: '#3B5BEF', 388 width: 1 389 }), 390 text: new ol.style.Text({ 391 font: '12px Calibri,sans-serif', 392 fill: new ol.style.Fill({ 393 color: '#000' 394 }), 395 stroke: new ol.style.Stroke({ 396 color: '#fff', 397 width: 3 398 }) 399 }) 400});
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.