<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:
        '&copy; <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);

})

External CSS

  1. https://unpkg.com/leaflet@1.9.4/dist/leaflet.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js