1SP.Class.define("SP.Wetzlar.SearchMap", { 2 3 _container: null, 4 5 _geoData: null, 6 7 _apiVersion: null, 8 9 _categories: null, 10 11 _searchZoom: null, 12 13 _showSecondary: true, 14 15 _solrCore: null, 16 17 _map: null, 18 19 _bindings: null, 20 21 /** 22 * @memberOf SP.SearchMap 23 */ 24 init: function (container) { 25 this._container = container; 26 this._bindings = {}; 27 28 var opts = JSON.parse(container.getAttribute("data-sp_wetzlar_searchmap")); 29 this._apiVersion = opts.geoApiVersion; 30 this._searchZoom = opts.searchZoom; 31 this._showSecondary = opts.showSecondary; 32 this._solrCore = opts.solrCore; 33 this._categories = opts.categories; 34 35 this._initMap(opts.geoSource); 36 }, 37 38 _initMap: function (data) { 39 var me = this; 40 SP.Loader.require([ 41 "/WEB-IES/sp-geo-api/" + me._apiVersion + "/js/sp-geo-api-debug.js", 42 "/WEB-IES/sp-geo-api/" + me._apiVersion + "/css/sp-geo-api.css" 43 ], function () { 44 L.Icon.Default.imagePath = "/WEB-IES/sp-geo-api/" + me._apiVersion + "/css/images/"; 45 me._createBindings(); 46 me._drawMap(data); 47 }); 48 }, 49 50 _createBindings: function () { 51 var me = this; 52 53 //Primär eigene Geodaten 54 me._bindings.mainIconPrimary = new SP.geo.ui.binding.IconBinding({ 55 html: "<i class=\"SPi SPi-link-map SPi-marker SPi-marker-primary\"></i>", 56 iconSize: [28,42], 57 iconAnchor: [14,42], 58 popupAnchor: [0,-41], 59 filter: function (feat) { 60 return feat.properties.primary === true; 61 } 62 }); 63 64 //Sekundär und Visual eigene Geodaten 65 me._bindings.mainIconNonPrimary = new SP.geo.ui.binding.IconBinding({ 66 html: "<i class=\"SPi SPi-link-map SPi-marker\"></i>", 67 iconSize: [24,36], 68 iconAnchor: [12,36], 69 popupAnchor: [0,-35], 70 filter: function (feat) { 71 return feat.properties.primary !== true; 72 } 73 }); 74 75 //Vector Style 76 me._bindings.resultVector = new SP.geo.ui.binding.StyleBinding({ 77 color: "#000000", 78 opacity: 1, 79 weight: 1, 80 fillColor: "#000000", 81 fillOpacity: 0.6, 82 fn: function (feat) { 83 if (feat && feat.geometry && feat.geometry.type === "LineString") { 84 return { 85 weight: 4, 86 color: "#000000" 87 }; 88 } 89 } 90 }); 91 92 //Popup für nicht primär 93 var popupBinding = new SP.geo.ui.binding.PopupBinding({ 94 padding: [60,10,10,10], 95 minWidth: 240, 96 maxWidth: 400, 97 filter: function (feat) { 98 var prop = feat.properties; 99 var show = false; 100 101 //ist das Feature ein Suchergebnis? 102 //ist das Feature das primäre? 103 if (!!prop.solrResult && prop.primary) { 104 show = true; 105 } 106 107 //hat das Feature ein Label? 108 if (prop.label) { 109 show = true; 110 } 111 112 //ist das Feature ein Punkt? 113 if (feat.geometry.type === "Point") { 114 show = true; 115 } 116 return show; 117 }, 118 render: function (feat) { 119 var prop = feat.properties; 120 var solr = prop.solrResult; 121 var html = ""; 122 123 var hasText = false; 124 if (prop.primary && solr) { 125 hasText = true; 126 html += '<a href="' + solr.url + '" title="Artikel weiterlesen">'; 127 html += '<article class="SP-teaser--map">'; 128 129 html += '<section class="SP-teaser__text">'; 130 html += '<header><h1 class="SP-teaser__headline">' + solr.sp_title + '</h1></header>'; 131 132 if (solr.sp_image) { 133 html += '<figure class="SP-teaser__image SP-asset">'; 134 html += '<div class="SP-asset__raiser">'; 135 html += '<img src="' + solr.sp_image + '" alt="' + solr.sp_title + '" class="SP-asset__content" />'; 136 html += '</div>'; 137 html += '</figure>'; 138 } 139 140 html += '<div class="SP-teaser__abstract">'; 141 if (solr.description) { 142 html += '<p>' + solr.description[0] + '</p>'; 143 } 144 html += '</div>'; 145 146 147 html += '<span class="SP-teaser__readon">'; 148 html += '<span class="SP-teaser__readon__label">weiterlesen</span> <i class="SP-teaser__readon__icon SPi SPi-readon"></i>'; 149 html += '</span>'; 150 html += '</section>'; 151 152 html += '</article>'; 153 html += '</a>'; 154 } else if (prop.label) { 155 hasText = true; 156 html += '<article class="SP-teaser--map">'; 157 html += '<section class="SP-teaser__text">'; 158 html += '<header><h1 class="SP-teaser__headline">' + prop.label + '</h1></header>'; 159 if (prop.description) { 160 html += '<div class="SP-teaser__abstract">'; 161 html += '<p>' + prop.description + '</p>'; 162 html += '</div>'; 163 } 164 html += '</section>'; 165 html += '</article>'; 166 } 167 168 if (feat.geometry.type === "Point") { 169 html += '<ul class="SP-links--map">'; 170 var c = feat.geometry.coordinates; 171 172 html += '<li class="SP-link--map">'; 173 html += '<a class="SP-new-window" href="' + me._getGmapUrl(c[0], c[
1731]) + '" title="Google Maps" target="_blank">'; 174 html += '<span data-text="mehr">'; 175 html += '<i class="SPi SPi-link-new-window SP-link-icon"></i>'; 176 html += '<span class="SP-link-label">Google Maps</span>'; 177 html += '</span>'; 178 html += '</a>'; 179 html += '</li>'; 180 181 html += '<li class="SP-link--map">'; 182 html += '<a class="SP-new-window" href="' + me._getOsmUrl(c[0], c[1]) + '" title="Open Street Map" target="_blank">'; 183 html += '<span data-text="mehr">'; 184 html += '<i class="SPi SPi-link-new-window SP-link-icon"></i>'; 185 html += '<span class="SP-link-label">Open Street Map</span>'; 186 html += '</span>'; 187 html += '</a>'; 188 html += '</li>'; 189 html += "</ul>"; 190 } 191 192 if (hasText) { 193 html = '<div class="SP-map__popup SP-map__popup-hasText">' + html + '</div>'; 194 } else { 195 html = '<div class="SP-map__popup">' + html + '</div>'; 196 } 197 return html; 198 } 199 }); 200 me._bindings.propertyPopup = popupBinding; 201 202 203 //Primär Result 204 me._bindings.resultIconPrimary = new SP.geo.ui.binding.IconBinding({ 205 html: "<i class=\"SPi SPi-link-map SPi-marker SPi-marker-primary SPi-marker-result\"></i>", 206 iconSize: [24,36], 207 iconAnchor: [12,36], 208 popupAnchor: [0,-35], 209 filter: function (feat) { 210 return feat.properties.primary === true; 211 } 212 }); 213 214 //Sekundär und Visual Result 215 me._bindings.resultIconNonPrimary = new SP.geo.ui.binding.IconBinding({ 216 html: "<i class=\"SPi SPi-link-map SPi-marker SPi-marker-result\"></i>", 217 iconSize: [24,36], 218 iconAnchor: [12,36], 219 popupAnchor: [0,-35], 220 filter: function (feat) { 221 return feat.properties.primary !== true; 222 } 223 }); 224 225 //Vector Style Result 226 me._bindings.mainVector = new SP.geo.ui.binding.StyleBinding({ 227 color: "#CC0000", 228 opacity: 1, 229 weight: 1, 230 fillColor: "#CC0000", 231 fillOpacity: 0.6, 232 fn: function (feat) { 233 if (feat && feat.geometry && feat.geometry.type === "LineString") { 234 return { 235 weight: 4, 236 color: "#CC0000" 237 }; 238 } 239 } 240 }); 241 }, 242 243 _getGmapUrl: function (lng, lat) { 244 return 'https://maps.google.com/?q=' + lat.toFixed(6) + ',' + lng.toFixed(6); 245 }, 246 247 _getOsmUrl: function (lng, lat) { 248 var base = 'https://www.openstreetmap.org/?mlat=' + lat.toFixed(6) +'&mlon=' + lng.toFixed(6); 249 return base + '#map=15/' + lat.toFixed(6) + '/' + lng.toFixed(6); 250 }, 251 252 _fitBoundsTimer: null, 253 254 _fitBounds: function (animate) { 255 var map = this._map; 256 var me = this; 257 258 259 clearTimeout(me._fitBoundsTimer); 260 me._fitBoundsTimer = setTimeout(function () { 261 var bounds = null; 262 SP.Object.each(map._layers, function (k,v) { 263 if (v instanceof SP.geo.ui.layer.GeoJsonLayer && !(v instanceof SP.geo.ui.layer.GeoLocationLayer)) { 264 if (bounds === null) { 265 var b = v._instance.getBounds(); 266 if (b && b.isValid()) { 267 bounds = b; 268 } 269 } else { 270 bounds.extend(v._instance.getBounds()); 271 } 272 } 273 }); 274 if (bounds !== null) { 275 map.fitBounds(SP.geo.Bounds.fromL(bounds), null, animate || false); 276 me._fitBoundsTimer = null; 277 } 278 },20); 279 }, 280 281 _getCategoryConfig: function (valids) { 282 var cats = []; 283 SP.Object.each(this._categories, function (k,v) { 284 if (SP.Array.indexOf(valids, 'id' + v.id) > -1) { 285 cats.push({ 286 category: 'id' + v.id, 287 label: v.label, 288 checked: v.autoload 289 }); 290 } 291 }); 292 return cats; 293 }, 294 295 _drawMap: function (geoData) { 296 var me = this; 297 geoData = geoData || {}; 298 299 var mainBindings = [ 300 me._bindings.mainIconPrimary, 301 me._bindings.mainIconNonPrimary, 302 me._bindings.mainVector, 303 me._bindings.propertyPopup 304 ]; 305 306 var resultBindings = [ 307 me._bindings.resultIconPrimary, 308 me._bindings.resultIconNonPrimary, 309 me._bindings.resultVector, 310 me._bindings.propertyPopup 311 ]; 312 313 var layers = []; 314 layers.push({ 315 id: "osm", 316 label: "OpenStreetMap", 317 baselayer: true, 318 layer: new SP.geo.ui.layer.TileLayer({ 319 url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 320 urlSecure: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 321 attribution: "© <a href=\"http://openstreetmap.org/copyright\" target=\"_blank\">OpenStreetMap</a> contributors" 322 }) 323 });
324 325 if (geoData.lng && geoData.lat) { 326 layers.push({ 327 id: "primary", 328 label: "primary", 329 overlay: true, 330 layer: new SP.geo.ui.layer.GeoJsonLayer({ 331 bindings: mainBindings, 332 data: { 333 "type":"FeatureCollection","features":[{ 334 "geometry": { 335 "type": "Point", 336 "coordinates": [geoData.lng, geoData.lat] 337 }, 338 "properties": { 339 "primary": true 340 }, 341 "type": "Feature" 342 } 343 ]} 344 }) 345 }); 346 } 347 348 if (geoData.secondary) { 349 layers.push({ 350 id: "secondary", 351 label: "secondary", 352 overlay: true, 353 layer: new SP.geo.ui.layer.GeoJsonLayer({ 354 bindings: mainBindings, 355 data: geoData.secondary 356 }) 357 }); 358 } 359 360 if (geoData.visual) { 361 layers.push({ 362 id: "visual", 363 label: "visual", 364 overlay: true, 365 layer: new SP.geo.ui.layer.GeoJsonLayer({ 366 bindings: mainBindings, 367 data: geoData.visual 368 }) 369 }); 370 } 371 372 if (geoData.confine) { 373 layers.push({ 374 id: "confine", 375 label: "confine", 376 overlay: true, 377 layer: new SP.geo.ui.layer.GeoJsonLayer({ 378 data: geoData.confine, 379 bindings: [ 380 new SP.geo.ui.binding.IconBinding({ 381 className: "SPi-marker-hidden", 382 html: " ", 383 iconSize: [1,1], 384 iconAnchor: [1,1] 385 }) 386 ] 387 }) 388 }); 389 } 390 391 layers.push({ 392 id: "result", 393 label: "result", 394 overlay: true, 395 layer: new SP.geo.ui.layer.ClusterLayer({ 396 bindings: resultBindings 397 }) 398 }); 399 400 layers.push({ 401 id: "geolocation", 402 label: "geolocation", 403 overlay: true, 404 layer: new SP.geo.ui.layer.GeoLocationLayer({ 405 bindings: [ 406 new SP.geo.ui.binding.IconBinding({ 407 html: "<i class=\"SPi SPi-link-map SPi-target2\"></i>", 408 iconSize: [24,24], 409 iconAnchor: [12,12] 410 }), 411 new SP.geo.ui.binding.StyleBinding({ 412 color: "#0149B9", 413 weight: 1, 414 fillColor: "#0149B9" 415 }) 416 ] 417 }) 418 }); 419 420 me._map = new SP.geo.ui.Map({ 421 id: this._container.id, 422 wrap: true, 423 layers: layers, 424 zoomControl: false, 425 zoom: 13, 426 center: [50.557778, 8.504444] 427 }); 428 429 var controlContainer = new L.Control.Vertical(); 430 me._map._instance.addControl(controlContainer); 431 432 // Lock Control 433 me._map.disableInteractions(); 434 var lockControl = L.control.triggercontrol({ 435 html: '<i class="SPi SPi-map-lock"></i>', 436 toggle: true, 437 pressed: false, 438 className: 'leaflet-control-lock-map', 439 fn: function (pressed) { 440 if (pressed) { 441 me._map.enableInteractions(); 442 } else { 443 me._map.disableInteractions(); 444 } 445 } 446 }); 447 controlContainer.insertControl(0, lockControl); 448 449 // Fullscreen Control 450 controlContainer.insertControl(1, L.control.fullscreen()); 451 me._map._instance.on('enterFullscreen', function(){ 452 me._map.enableInteractions(); 453 lockControl._setButtonPressed(true); 454 }); 455 456 me._fitBounds(); 457 if (me._solrCore) { 458 me._addCategoryControl(controlContainer); 459 } 460 }, 461 462 _addCategoryControl: function (controlContainer) { 463 var me = this; 464 var solrService = new SP.solr.Service({ 465 core: me._solrCore, 466 fields: [''], 467 pagination: { 468 hitsPerPage: 0, 469 currentPage: 0 470 } 471 }); 472 473 var categoryIds = []; 474 SP.Object.each(this._categories, function (k,v) { 475 categoryIds.push('id' + v.id); 476 }); 477 solrService.addFilter('sp_geo_points', '*'); 478 solrService.getFacets("*", [{'sp_category': ''}], function (res) { 479 if (!res.result) { 480 if (typeof console !== "undefined") { 481 console.error(res); 482 } 483 return; 484 } 485 var d = res.result.data[0];
486 var valids = []; 487 if (d) { 488 SP.Array.each(d.sp_category, function (k,v) { 489 var id, count; 490 SP.Object.each(v, function (kk,vv) { 491 id = kk; 492 count = vv; 493 }); 494 if (count > 0) { 495 valids.push(id); 496 } 497 }); 498 } 499 500 var categories = me._getCategoryConfig(valids); 501 if (categories.length > 0) { 502 controlContainer.insertControl(0, new L.Control.SolrCategories({ 503 solrSerivce: new SP.solr.Service({ 504 core: me._solrCore, 505 fields: ['sp_geo_lng', 'sp_geo_lat', 'sp_jsondata_geo_secondary', 'sp_image', 'description'], 506 pagination: { 507 hitsPerPage: 1000, 508 currentPage: 0 509 } 510 }), 511 label: 'Kategorie', 512 resultLayer: me._map.getLayerById('result'), 513 categories: categories, 514 aggregator: function (res, layer) { 515 if (me._showSecondary && res && res.sp_jsondata_geo_secondary) { 516 var secondary = JSON.parse(res.sp_jsondata_geo_secondary); 517 SP.Array.each(secondary.features, function (k, v) { 518 v.properties.solrResult = res; 519 }); 520 layer.addData(secondary); 521 } 522 523 if (res.sp_geo_lng && res.sp_geo_lat) { 524 layer.addData({ 525 "type":"FeatureCollection", 526 "features":[{ 527 "geometry": { 528 "type": "Point", 529 "coordinates": [res.sp_geo_lng, res.sp_geo_lat] 530 }, 531 "properties": { 532 "primary": true, 533 "solrResult": res 534 }, 535 "type": "Feature" 536 }] 537 }); 538 } 539 540 if (me._searchZoom) { 541 me._fitBounds(true); 542 } 543 } 544 })); 545 } 546 }); 547 } 548});
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.