<leaflet-map>
<div id="map"></div>
<ul class="locations">
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-153710">
<h2 itemprop="name">Dahlingschule, Städt. Förderschule im integr. Verbund, FSP Lernen u. Emot. und soziale Entwicklung,-Primarstufe u. SekI</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Dahlingstr. 40</div>
<span itemprop="postalCode">47229</span>
<span itemprop="addressLocality">Duisburg</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.38331874331818" />
<meta itemprop="longitude" content="6.700606101666003" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-166480">
<h2 itemprop="name">Montessori-Gymnasium Städt. Gymnasium für Jungen und Mädchen</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Rochusstr. 145</div>
<span itemprop="postalCode">50827</span>
<span itemprop="addressLocality">Köln</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="50.963204818343755" />
<meta itemprop="longitude" content="6.904840537750957" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-167782">
<h2 itemprop="name">Städt. Grillo-Gymnasium</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Hauptstr. 60</div>
<span itemprop="postalCode">45879</span>
<span itemprop="addressLocality">Gelsenkirchen</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.5130837882258" />
<meta itemprop="longitude" content="7.099798427442939" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-167733">
<h2 itemprop="name">Carl-Friedrich-Gauß-Gymnasium der Stadt Gelsenkirchen - Sekundarstufen I und II -</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Hammerschmidtstr. 13</div>
<span itemprop="postalCode">45888</span>
<span itemprop="addressLocality">Gelsenkirchen</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.51515970942419" />
<meta itemprop="longitude" content="7.111401070253367" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-187598">
<h2 itemprop="name">Tinsberger Schule Städt. Gem. Grundschule</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Obertinsberger Str. 16</div>
<span itemprop="postalCode">58507</span>
<span itemprop="addressLocality">Lüdenscheid</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.22210572808871" />
<meta itemprop="longitude" content="7.638559395993643" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-188827">
<h2 itemprop="name">Gustav-Heinemann-Gesamtschule der Stadt Dortmund - Sekundarstufen I und II -</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Parsevalstr. 170</div>
<span itemprop="postalCode">44369</span>
<span itemprop="addressLocality">Dortmund</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.533962061466454" />
<meta itemprop="longitude" content="7.406323562534167" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-168981">
<h2 itemprop="name">Ratsgymnasium der Stadt Minden - Sekundarstufen I und II -</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Königswall 28</div>
<span itemprop="postalCode">32423</span>
<span itemprop="addressLocality">Minden</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="52.285804757003675" />
<meta itemprop="longitude" content="8.907905420879784" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-195431">
<h2 itemprop="name">Amos Comenius Gymnasium</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Kurbrunnenstr. 6</div>
<span itemprop="postalCode">52066</span>
<span itemprop="addressLocality">Aachen</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="50.7663286705938" />
<meta itemprop="longitude" content="6.097614979917918" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-169055">
<h2 itemprop="name">Gymnasium Theodorianum - Sekundarstufen I und II - Gymnasium der Stadt Paderborn</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Kamp 4</div>
<span itemprop="postalCode">33098</span>
<span itemprop="addressLocality">Paderborn</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.71631288414782" />
<meta itemprop="longitude" content="8.754543762412395" />
</div>
</li>
<li itemscope itemtype="https://schema.org/School" data-fresh-key="NW-169407">
<h2 itemprop="name">Leibniz-Gymnasium Gymnasium der Stadt Dortmund</h2>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<div itemprop="streetAddress">Kreuzstr. 163</div>
<span itemprop="postalCode">44137</span>
<span itemprop="addressLocality">Dortmund</span>
</div>
<div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="51.501180239295536" />
<meta itemprop="longitude" content="7.44214796783151" />
</div>
</li>
</ul>
</leaflet-map>
*,
*::before,
*::after {
box-sizing: border-box;
}
#map {
width: min(800px, 90vw);
height: auto;
aspect-ratio: 16/9;
background-image: url("https//static.k-nut.eu/leaflet-screenshot.png");
background-size: contain;
}
.popup {
& h2 {
font-size: 1em;
margin-bottom: 0;
}
}
ul {
padding: 0;
display: flex;
gap: 1.5rem;
flex-direction: column;
}
[itemType="https://schema.org/School"] {
font-family: sans-serif;
& h2 {
font-size: 1.2rem;
max-width: 80ch;
margin-bottom: .3rem;
}
}
class LeafletMap extends HTMLElement {
connectedCallback() {
const mapElement = this.querySelector("#map");
const schools = this.querySelectorAll(
'[itemType="https://schema.org/School"]',
);
var map = L.map(mapElement).setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
mapElement.style.backgroundImage = "none";
const markers = new L.featureGroup();
schools.forEach((school) => {
const latitude = school.querySelector('[itemProp="latitude"]').content;
const longitude = school.querySelector('[itemProp="longitude"]').content;
const name = school.querySelector('[itemProp="name"]').textContent;
const address = school.querySelector('[itemProp="address"]');
const h2 = document.createElement("h2");
h2.innerText = name;
const popup = document.createElement("div");
popup.classList.add("popup");
popup.appendChild(h2);
popup.appendChild(address.cloneNode(true));
const marker = L.marker([latitude, longitude]).bindPopup(popup);
marker.addTo(markers);
});
markers.addTo(map);
map.fitBounds(markers.getBounds());
}
}
document.addEventListener('DOMContentLoaded', () => {
window.customElements.define("leaflet-map", LeafletMap);
})