Quellcode

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tutorial: Leaflet mit ActiveMap erweitern</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link rel="stylesheet" href="http://support.activemapjs.de/cdn/activemap.css" />
    <script src="http://support.activemapjs.de/cdn/activemap.js"></script>
</head>
<body>
    <!--Leaflet-Kartenbereich-->
    <div id="mapid" style="position:absolute; left:1%; top:1%; width:98%; height:90%"></div>
    <!--Feld f�r Maus-Over-Meldungen-->
    <div>
    <span id="statustext" style="position:absolute; left:1%; top:91%; width:98%; height:5%"></span>
    </div>
    <script>
    // Leaflet-Karte laden
    var mymap = L.map('mapid').setView([51.5, 10], 6);

    // Stra�enkarte als Hintergrund laden...
    var tileLayer = L.tileLayer('http://sg.geodatenzentrum.de/wmts_topplus_web_open/tile/1.0.0/web/default/WEBMERCATOR/{z}/{y}/{x}.png', {
            attribution: '� Bundesamt f�r Kartographie und Geod�sie 2017, Datenquellen: http://sg.geodatenzentrum.de/web_public/Datenquellen_TopPlus_Open.pdf',
            maxZoom: 18,
            id: 'topplus'
        });

    // ... und der Karte hinzuf�gen
        tileLayer.addTo(mymap);

    // Interaktive ActiveMap Gebietsebene laden...
    var lal = AM.Leaflet.leafletAreaLayer({
            url: "http://support.activemapjs.de/vt/kreise/{z}/{x}_{y}.pbf",
            geoDataUrl: "http://support.activemapjs.de/vt/kreise/layerinfos.json",
            maxZoom: 9
        });

    // ... und der Karte hinzuf�gen
        mymap.addLayer(lal);

    // F�r die Arbeit mit der Gebietsebene ben�tigen wir vor allem das AreaLayer-Objekt
    // aus dem ActiveMap-Objektmodell. (die oben eingef�gte Ebene stammt aus dem Leaflet-
    // Objektmodell und bietet nur die allgemeinen Funktionen eines Leaflet-Layers)
    var al = lal.getAreaLayer();

    // zun�chst alle Gebiete halbtransparent hellgrau F�rben
        al.setDefaultBrush({ color: '#CCCCCC', opacity: 0.5 });

    // f�r alle weiteren Arbeiten mit Gebieten sollten wir warten, bis die
    // Karte fertig geladen wurde. Dazu h�ngen wir uns an das GeodataReady-Ereignis.
        lal.getAreaLayer().geodataready.on(onAreaLayerReady);

    function onAreaLayerReady(e) {
    // alle Geodaten liegen vor.

    // alle Gebiete im Nummernintervall 03000..07000 rot einf�rben
            al.getAreas().getWithinInterval("03000", "07000").setBrush({ color: '#FF0000' });
        }

    // au�erdem soll noch f�r die aktuelle Mausposition das �berfahrene Gebiet
    // angezeigt werden. Dazu h�ngen wir uns an das ObjectHit-Ereignis.
        lal.getAreaLayer().objecthit.on(onAreaLayerObjectHit);
    var statustext = document.getElementById("statustext");

    function onAreaLayerObjectHit(e) {
    let statusText = "";
            statustext.textContent = "";
    if (e.Area) {
    // wenn ein Gebiet getroffen wird, den Statustext updaten.
                statusText = al.getAreas().getArea(e.Area).getName();
            }
            statustext.textContent = statusText;
        }
    </script>
</body>
</html>