https://bvwp-projekte.de/js/map_water.js

1var map;
2var geojsonline, geojsonpoint;
3
4map = L.map('map', {
5  minZoom: 5,
6  maxZoom: 15,
7  zoomControl: false,
8  center: [51.17, 10.39],
9  zoom: 6,
10});
11map.addControl(new L.Control.ZoomMin({
12  zoomStart: 6,
13  zoomLat: 51.17,
14  zoomLon: 10.39
15}));
16map.spin(true, { lines: 13, length: 10 });
17
18
19// hole session
20/*
21var session;
22var appId = "bf7d76c7-75d6-52eb-aa00-84142cfa13d6";
23var appDomain = "bvwp-projekte.de";
24jQuery.ajax({
25  url: 'https://sg.geodatenzentrum.de/gdz_getSession?bkg_appid=' + appId + '&domain=' + appDomain,
26  success: function (result) {
27    if (result.isOk == false) {
28      console.log("session-error:", result.message);
29    } else {
30      session = result;
31      // console.log("session:", session);
32    }
33  },
34  async: false
35});
36*/
37
38// Alternative zu Webatlas (6.4.2023)
39var topplusopen = L.tileLayer('https://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/web_light_grau/default/WEBMERCATOR/{z}/{y}/{x}.png', {
40  attribution: '&copy; <a href="https://www.geodatenzentrum.de">TopPlusOpen</a>',
41//  zoomOffset: -5,
42}).addTo(map);
43
44
45/*
46var webatlas_grau = L.tileLayer('https://sg.geodatenzentrum.de/wmts_webatlasde_grau__' + session + '/tile/1.0.0/webatlasde_grau/default/DE_EPSG_3857_ADV/{z}/{y}/{x}.png', {
47  attribution: '&copy; <a href="https://www.geodatenzentrum.de">WebAtlas</a>',
48  zoomOffset: -5,
49}).addTo(map);
50*/
51
52// http://atlas.wsv.bund.de/bwastr/wms?LAYERS=Gewaessernetz,Gewaessernamen,Kilometermarken,Ortschaften,Fliessrichtung&TRANSPARENT=true&VERSION=1.1.1&FORMAT=image/png&SERVICE=WMS&REQUEST=GetMap&STYLES=default&SRS=EPSG:31467&BBOX=3777352.912364,5820405.9775814,3808649.6322012,5839253.1735054&WIDTH=814&HEIGHT=490
53var wasserstrassen = L.tileLayer.wms(
54  //'https://atlas.wsv.bund.de/bwastr/wms?', {
55  'https://via.bund.de/wsv/bwastr/wms?', {
56  attribution: '&copy; <a href="https://www.wsv.de">BWaStr</a>',
57  format: 'image/png',
58  layers: 'Gewaessernetz',
59  transparent: true,
60}).addTo(map);
61
62// Info-Box oben rechts
63var info = L.control();
64info.onAdd = function (map) {
65  this._div = L.DomUtil.create('div', 'info');
66  this.update();
67  return this._div;
68};
69info.update = function (props) {
70  this._div.innerHTML = '<h4>Projekt</h4>' + (props ?
71    '<b>' + props.projectid + " - " + props.title + '</b>' + '' : 'Bitte Zeiger auf Projekt positionieren');
72};
73info.addTo(map);
74
75// Style des Projektes bei mouseover
76function highlightFeature(e) {
77  removeArea();
78  var layer = e.target;
79  layer.setStyle({
80    weight: 5,
81    opacity: 0.7,
82    color: '#3F3',
83    dashArray: '',
84    fillOpacity: 0.7
85  });
86  /*
87  if (!L.Browser.ie && !L.Browser.opera) {
88    layer.bringToFront();
89  }
90  */
91
92  info.update(layer.feature.properties);
93}
94
95function resetHighlightLine(e) {
96  geojsonline.resetStyle(e.target);
97  info.update();
98}
99
100function resetHighlightPoint(e) {
101  geojsonpoint.resetStyle(e.target);
102  info.update();
103}
104
105// Zum Projekt zoomen
106function zoomToFeature(e) {
107  //console.log(e);
108  var layer = e.target.feature.properties;
109  //map.fitBounds(e.target.getBounds());
110
111  showArea(layer.proj_number);
112
113
114  // clear autocomplete
115  jQuery('#autocomplete').val('');
116  jQuery('#autocomplete').autocomplete().clear();
117
118  updateDetail(layer.projectid,
119    layer.proj_number,
120    layer.dringlichkeit,
121    layer.bundeswasserstrasse,
122    layer.state,
123    layer.title,
124    layer.Projektn02);
125
126}
127
128function updateDetail(projektnummer, projektnummerklar, dringlichkeit, strassenbezeichnung, bundesland, projektname1, projektname2) {
129  var projektname = projektname1;
130  if (projektname2) {
131    projektname += " - " + projektname2;
132  }
133
134  var dossierinfo = document.getElementById("dossier-info");
135  dossierinfo.innerHTML = "Gewähltes Projekt: " + projektname + "<br><br>";
136
137  var btnid = document.getElementById("btn-id");
138  var btnlink = document.getElementById("btn-link");
139  if (dringlichkeit == "FD" || dringlichkeit == "Laufend und fest disponiert") {
140    btnlink.style.display = 'none';
141  } else {
142    btnlink.style.display = 'block';
143    btnid.innerHTML = "Projektdossier (" + projektnummer + ") in neuem Fenster öffnen";
144  }
145
146  var dossierurl = 'wasserstrasse/' + projektnummerklar + '/' + projektnummerklar + ".html";
147  btnlink.setAttribute('href', dossierurl);
148
149  var detail = document.getElementById("detail");
150
151  // "Projektnum": "A5-G30-BW-T2-BW", 
152  // "Projektn00": "A5-G30-BW-T2-BW", 
153  // "Projektn01": "A5-G30-BW", 
154  // "Dringlichk": "VB", 
155  // "Straßenkla": "A", 
156  // "Bundesland": "BW", 
157  // "Projektnam": "AK Walldorf", 
158  // "Projektn02": "AS Walldorf\/ Wiesloch", 
159  // "Straßenbez": "A 005", 
160  // "Straßenb00": 
161
162  content = "<h4>Projektdetails</h4>";
163  content += "<table id='projectdetailtable'>";
164  content += "<tr><td>Projektnummer </td><td>" + projektnummer + "</td></tr>";
165  content += "<tr><td>Dringlichkeit </td><td>" + mapDringlichkeit(dringlichkeit) + "</td></tr>";
166  content += "<tr><td>Bundeswasserstrasse       </td><td>" + strassenbezeichnung + "</td></tr>";
167  content += "<tr><td>Bundesland    </td><td>" + bundesland + "</td></tr>";
168  content += "<tr><td>Projektname   </td><td>" + projektname + "</td></tr>";
169  content += "</table>";
170
171  detail.innerHTML = content;
172}
173
174function mapDringlichkeit(d) {
175  if (d == 'FD') { return "Laufend und fest disponiert"; }
176  else if (d == 'FD-E') { return "Laufend und fest disponiert"; }
177  else if (d == 'VB') { return "Vordringlicher Bedarf"; }
178  else if (d == 'VB-E') { return "Vordringlicher Bedarf"; }
179  else if (d == 'VB+') { return "Vordringlicher Bedarf"; }
180  else if (d == 'WB') { return "Weiterer Bedarf"; }
181  else if (d == 'WB*') { return "Weiterer Bedarf"; }
182  else { return d; }
183}
184
185function onEachFeatureLine(feature, layer) {
186  layer.on({
187    mouseover: highlightFeature,
188    mouseout: resetHighlightLine,
189    click: zoomToFeature,
190  });
191}
192
193function onEachFeaturePoint(feature, layer) {
194  layer.on({
195    mouseover: highlightFeature,
196    mouseout: resetHighlightPoint,
197    click: zoomToFeature
198  });
199}
200
201
202(function () {
203  //$(document).ready(function() {
204  $('#autocomplete').autocomplete({
205    serviceUrl: 'waterprojects.php',
206    paramName: 's',
207    minChars: 2,
208    delimiter: ',',
209    autoSelectFirst: true,
210    showNoSuggestionNotice: true,
211    noSuggestionNotice: 'keine Treffer',
212    transformResult: function (response) {
213      //console.log("response: "+response);
214      return {
215        suggestions: jQuery.parseJSON(response),
216      };
217    },
218    //lookup: stations,
219    onSelect: function (suggestion) {
220      //console.log(suggestion);   
221      updateDetail(suggestion.projektnummer,
222        suggestion.projektnummerklar,
223        suggestion.dringlichkeit,
224        suggestion.bundeswasserstrasse,
225        suggestion.bundesland,
226        suggestion.projektname,
227        suggestion.projektname2);
228      showArea(suggestion.projektnummerklar);
229
230    },
231    width: 'auto',
232  });
233
234
235
236  //console.log("function()");
237  var loadstring = "";
238  var loadline = "";
239  var loadpoint = "";
240  var lineready = 0, pointready = 0;
241
242  //$("#info").html("lade Daten Autobahnen ...");
243  loadline = "lade line";
244  loadstring = loadpoint + " " + loadline;
245  //$("#load").html(loadstring);
246
247  // Polygon Projekte laden
248  $.getJSON("js/netz_ws_line.json?" + Math.random(), function (data) {
249    //console.log("Load bab.json");
250    loadline = "Daten line eingelesen!";
251    lineready = 1;
252    if (pointready == 1 && lineready == 1) {
253      loadstring = "";
254      map.spin(false);
255    } else {
256      loadstring = loadpoint + " " + loadline;
257    }
258    //$("#load").html(loadstring);      
259
260    // add GeoJSON layer to the map once the file is loaded
261    geojsonline = L.geoJson(data, {
262      style: function (feature) {
263        var myweight = 5;
264        var myopacity = 0.7;
265        var mycolor = '#A040FF';
266
267        // FD: lila  VB: rot  WB: braun
268        if (feature.properties.dringlichkeit == 'FD') { mycolor = '#A040FF'; }
269        if (feature.properties.dringlichkeit == 'FD-E') { mycolor = '#A040FF'; }
270        if (feature.properties.dringlichkeit == 'VB') { mycolor = '#F00'; }
271        if (feature.properties.dringlichkeit == 'VB+') { mycolor = '#F00'; }
272        if (feature.properties.dringlichkeit == 'VB-E') { mycolor = '#F00'; }
273        if (feature.properties.dringlichkeit == 'WB') { mycolor = '#FFA850'; }
274        if (feature.properties.dringlichkeit == 'WB*') { mycolor = '#FFA850'; }
275
276        return {
277          weight: myweight,
278          opacity: myopacity,
279          color: mycolor
280        };
281
282      },
283      onEachFeature: onEachFeatureLine,
284      //pointToLayer: function(feature, latlng) {
285      //  console.log("pointToLayer:"+latlng);
286      //  //return L.marker(latlng, {title: feature.properties.Projektnum})
287      //}
288    }).addTo(map);
289  });
290
291  // Punkt-Projekte laden
292  $.getJSON("js/netz_ws_point.json?" + Math.random(), function (data) {
293    //console.log("Load bab.json");
294    loadpoint = "Daten point eingelesen!";
295    pointready = 1;
296    if (pointready == 1 && lineready == 1) {
297      loadstring = "";
298      map.spin(false);
299    } else {
300      loadstring = loadpoint + " " + loadline;
301    }
302    //$("#load").html(loadstring);      
303
304    // add GeoJSON layer to the map once the file is loaded
305    geojsonpoint = L.geoJson(data, {
306      style: function (feature) {
307        var myweight = 4;
308        var myopacity = 0.7;
309        var mycolor = '#ccc';
310
311
312        // FD: lila  VB: rot  WB: braun
313        if (feature.properties.dringlichkeit == 'FD') { mycolor = '#A040FF'; }
314        if (feature.properties.dringlichkeit == 'FD-E') { mycolor = '#A040FF'; }
315        if (feature.properties.dringlichkeit == 'VB') { mycolor = '#F00'; }
316        if (feature.properties.dringlichkeit == 'VB-E') { mycolor = '#F00'; }
317        if (feature.properties.dringlichkeit == 'VB+') { mycolor = '#F00'; }
318        if (feature.properties.dringlichkeit == 'WB') { mycolor = '#FFA850'; }
319        if (feature.properties.dringlichkeit == 'WB*') { mycolor = '#FFA850'; }
320
321        return {
322          weight: myweight,
323          opacity: myopacity,
324          color: mycolor
325        };
326
327      },
328      onEachFeature: onEachFeaturePoint,
329      pointToLayer: function (feature, latlng) {
330        return L.circleMarker(latlng, {
331          radius: 8,
332          fillColor: "#ccc",
333          color: "#000",
334          weight: 1,
335          opacity: 1,
336          fillOpacity: 0.8
337        });
338      }
339
340    }).addTo(map);
341
342  });
343
344
345
346})(); // End function
347
348
349
350/* Legende
351------------------------------------------------------------*/
352var legend = L.control({
353  position: 'bottomright'
354});
355legend.onAdd = function (map) {
356  var div = L.DomUtil.create('div', 'info legend'),
357    labels = [];
358  labels.push('<i style="background: #F00"></i> Vordringlicher Bedarf');
359  labels.push('<i style="background: #FFA850"></i> Weiterer Bedarf');
360  labels.push('<i style="background: #A040FF"></i> Fest disponiert');
361  div.innerHTML = labels.join('<br>');
362  return div;
363};
364legend.addTo(map);
365
366
367
368
369/* jump to selected project 
370------------------------------------------------------------*/
371var area;
372function showArea(id) {
373  // console.log("showArea: "+id);
374  removeArea();
375  area = L.geoJson.ajax("waterprojectgeometry.php?id=" + id,
376    {
377      style: {
378        weight: 10,
379        opacity: 0.3,
380        color: '#3F3',
381        dashArray: '',
382        fillOpacity: 0.3
383      }
384      //    style: {color: "#00ff00", weight: 3}
385    });

386
387  area.on('data:loaded', function () {
388    this.map.fitBounds(area.getBounds());
389    area.addTo(this.map);
390  }.bind(this));
391
392  //console.log(area);
393}
394function removeArea() {
395  //console.log("remove area");
396  if (map.hasLayer(area)) {
397    map.removeLayer(area);
398  }
399  area = null;
400}
401
402
403$("#clear_search_button").click(function () {
404  jQuery('#autocomplete').val('');
405  jQuery('#autocomplete').autocomplete().clear();
406});