cioddi/index.html

## index.html
<html>

<head>
  <title>Einführung in die Entwicklung mit MapLibre-gl.js</title>
  <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
  <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/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>

## maplibre-workshop-e-tankstellen-bonn.markdown

      
    Raw
  

              maplibre-workshop-e-tankstellen-bonn.markdown
            
          
    MapLibre Workshop - E-Tankstellen Bonn

A Pen by Max Tobias Weber on CodePen.
License.

  
## script.js
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";
        }
      );
    }
  });

## style.css
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;
}
	<html>

	<head>
	<title>Einführung in die Entwicklung mit MapLibre-gl.js</title>
	<script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
	<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/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>
	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";
	}
	);
	}
	});
	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;
	}