my code stock.com

Snippet options

Download: Download snippet as infos-oliver.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

In die header.php 

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css"/>








In die footer.php vor dem </body>


<script>
    // Leaflet-Kartenobjekt im referenzierten div erstellen und initiale Optionen für Karte übergeben
    var karte = L.map('kartencontainer', {
        // Mittelpunkt der Karte als Breiten- und Längengrad, bspw. 50.0956° N, 8.7761° E für Offenbach
        center: [51.375699, 10.638659],
        // initiales Zoomlevel
        zoom: 6,
        // interaktivität der Karte kann mit Optionen gesteuert werden
        zoomControl: true,
        dragging: true,
        attributionControl: true
    });

    // OSM-Hintergrundslayer definieren
    var osmlayer =  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data: &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 30
    });

    // Warnungs-Layer vom DWD-Geoserver - betterWms fügt Möglichkeiten zur GetFeatureInfo hinzu
    var warnlayer = L.tileLayer.betterWms("https://maps.dwd.de/geoproxy_warnungen/service/", {
        layers: 'Warnungen_Gemeinden_vereinigt',
        // eigene Styled Layer Descriptor (SLD) können zur alternativen Anzeige der Warnungen genutzt werden (https://docs.geoserver.org/stable/en/user/styling/sld/reference/)
        //sld: 'https://eigenerserver/alternativer.sld',
        format: 'image/png',
        transparent: true,
        opacity: 0.8,
        attribution: 'Warndaten: &copy; <a href="https://www.dwd.de">DWD</a>'
    });

    // CQL_FILTER können benutzt werden um angezeigte Warnungen zu filtern (https://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html)
    // Filterung kann auf Basis der verschiedenen properties der Warnungen erfolgen (bspw. EC_II, EC_GROUP, DESCRIPTION ... ) siehe https://www.dwd.de/DE/wetter/warnungen_aktuell/objekt_einbindung/einbindung_karten_geowebservice.pdf
    // warnlayer.setParams({CQL_FILTER:"DESCRIPTION LIKE '%Sturm%'"});
    // Filter können zur Laufzeit, z.B. über Nutzereingaben angepasst werden
    //delete warnlayer.wmsParams.CQL_FILTER;
    //warnlayer.redraw();

    // Layer mit neutraler Darstellung der Gemeinde-Warngebiete
    var gemeindelayer = L.tileLayer.wms("https://maps.dwd.de/geoproxy_warnungen/service/", {
        layers: 'Warngebiete_Gemeinden',
        format: 'image/png',
        styles: '',
        transparent: true,
        opacity: 0.6,
        attribution: 'Geobasisdaten Gemeinden: &copy; <a href="https://www.bkg.de">BKG</a> 2015 (Daten verändert)'
    });

    // Layerlisten für die Layercontrol erstellen und dabei initial aktive Layer zur Karte hinzufügen
    var baseLayers = {
        "OpenStreetMap": osmlayer.addTo(karte)
    };
    var overLayers = {
        "<span title='DWD Geoserver dwd:Warnungen_Gemeinden_vereinigt'>Gemeinde vereinigt</span>": warnlayer.addTo(karte),
        "<span title='DWD Geoserver Gemeindewarngebiete'>Warngebiete (Gemeinden)</span>": gemeindelayer
    };

    // Layercontrol-Element erstellen und hinzufügen
    L.control.layers(baseLayers, overLayers).addTo(karte);

</script>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.