A Pen by Max Tobias Weber on CodePen.
Created
May 31, 2021 14:05
-
-
Save cioddi/5f4773b1c6b03fdff21aea6f8263ae68 to your computer and use it in GitHub Desktop.
MapLibre Workshop - E-Tankstellen Bonn
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Einführung in die Entwicklung mit MapLibre-gl.js</title> | |
| <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="info_popup"> | |
| <div class="address"></div> | |
| <div class="nodes"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function CircleLayerInteraction(layer_id, map, onHover, unHover) { | |
| var hoveredId = null; | |
| var self = this; | |
| map.on("mousemove", layer_id, (e) => { | |
| map.getCanvas().style.cursor = "pointer"; | |
| // Check whether features exist | |
| if (e.features.length > 0) { | |
| // If hoveredId is not null, | |
| // use removeFeatureState to reset to the default behavior | |
| if (self.hoveredId) { | |
| map.removeFeatureState({ | |
| source: layer_id, | |
| id: self.hoveredId | |
| }); | |
| if (typeof unHover === "function") { | |
| unHover(e); | |
| } | |
| } | |
| self.hoveredId = e.features[0].id; | |
| // When the mouse moves over the layer_id layer, update the | |
| // feature state for the feature under the mouse | |
| map.setFeatureState( | |
| { | |
| source: layer_id, | |
| id: self.hoveredId | |
| }, | |
| { | |
| hover: true | |
| } | |
| ); | |
| if (typeof onHover === "function") { | |
| onHover(e, e.features[0]); | |
| } | |
| } | |
| }); | |
| map.on("mouseleave", layer_id, function () { | |
| if (self.hoveredId) { | |
| map.setFeatureState( | |
| { | |
| source: layer_id, | |
| id: self.hoveredId | |
| }, | |
| { | |
| hover: false | |
| } | |
| ); | |
| if (typeof unHover === "function") { | |
| unHover(); | |
| } | |
| } | |
| self.hoveredId = null; | |
| // Reset the cursor style | |
| map.getCanvas().style.cursor = ""; | |
| }); | |
| } | |
| var map = new maplibregl.Map({ | |
| container: "map", | |
| style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json", | |
| center: [7.093011484044837, 50.72956624741229], | |
| zoom: 12 | |
| }); | |
| fetch("https://new-poi.chargecloud.de/bonn") | |
| .then((data) => data.json()) | |
| .then((responseData) => { | |
| if (typeof responseData.data !== "undefined") { | |
| let data = responseData.data; | |
| let geojsonFeatures = []; | |
| for (var i = 0; i < data.length; i++) { | |
| let status = 0; | |
| for (var k = 0; k < data[i].evses.length; k++) { | |
| if (data[i].evses[k].status === "AVAILABLE") { | |
| status += 1 / data[i].evses.length; | |
| } | |
| } | |
| status = Math.round(status * 10) / 10; | |
| geojsonFeatures.push({ | |
| type: "Feature", | |
| id: data[i].id, | |
| geometry: { | |
| type: "Point", | |
| coordinates: [ | |
| data[i].coordinates.longitude, | |
| data[i].coordinates.latitude | |
| ] | |
| }, | |
| properties: { status: status, ...data[i] } | |
| }); | |
| } | |
| map.addLayer({ | |
| id: "eTankstellen", | |
| type: "circle", | |
| source: { | |
| type: "geojson", | |
| data: { | |
| type: "FeatureCollection", | |
| features: geojsonFeatures | |
| } | |
| }, | |
| paint: { | |
| "circle-radius": 6, | |
| "circle-color": [ | |
| "interpolate", | |
| ["linear"], | |
| ["get", "status"], | |
| 0, | |
| "red", | |
| 0.4, | |
| "orange", | |
| 1, | |
| "green" | |
| ], | |
| "circle-stroke-width": 1, | |
| "circle-stroke-color": [ | |
| "case", | |
| ["boolean", ["feature-state", "hover"], false], | |
| "#111111", | |
| "#dadada" | |
| ] | |
| } | |
| }); | |
| mapInteraction = new CircleLayerInteraction( | |
| "eTankstellen", | |
| map, | |
| (e, data) => { | |
| let ul = document.createElement('ul'); | |
| let node_list_html = ''; | |
| let evses = JSON.parse(data.properties.evses); | |
| for(let i = 0;i < evses.length;i++){ | |
| console.log(evses[i]) | |
| node_list_html += '<li>' + evses[i].id + `: ` + evses[i].status + '</li>'; | |
| } | |
| ul.innerHTML = '<ul>' + node_list_html + '</ul>'; | |
| document.querySelector(".info_popup .nodes").innerHTML = ''; | |
| document.querySelector(".info_popup .nodes").append(ul); | |
| document.querySelector(".info_popup .address").innerHTML = `<h1>` + data.properties.name + `</h1> | |
| <p>` + data.properties.address + `</p>`; | |
| document.querySelector(".info_popup").style.display = "flex"; | |
| }, | |
| (e, data) => { | |
| document.querySelector(".info_popup").style.display = "none"; | |
| } | |
| ); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| .info_popup{ | |
| color:#dfdfdf; | |
| font-family: Arial, OpenSans, sans-serif; | |
| padding:10px 20px; | |
| display:flex; | |
| position:fixed; | |
| width:100%; | |
| height:200px; | |
| bottom:0; | |
| background-color:rgba(0,0,0,0.6); | |
| align-content:stretch; | |
| align-items:stretch; | |
| } | |
| .info_popup .nodes, .info_popup .address{ | |
| flex-grow:1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment