# Beispiele
# Karte 1: map.nrw mit Standorten
Diese Karte zeigt die Übergabe von Koordinaten an map.nrw (Attribut data-itnrw-coords). Exemplarisch werden hier alle vier IT.NRW Standorte in Düsseldorf in der Karte markiert, wobei der Ausschnitt so definiert wurde, dass beim Start nur die rechtsrheinischen Standorte eingefangen werden. Die Texte für Tooltip, Info-Fenster und Beschriftung der Standorte wurden individuell je Punkt konfiguriert. Ebenso wurden eigene Symbole verwendet.
Existieren für die anzuzeigenden Punkte keine Koordinaten, kann das Attribut data-itnrw-addresses verwendet werden. Hierbei wird mit dem Aufruf der Karte ein separater Dienst zum Geokodieren der Adressen angesprochen.
Außerdem können map.nrw neben Adressen und Koordinaten initial auch Flurstücke übergeben werden. Verwenden Sie in diesem Fall das Attribut data-itnrw-flurstuecke.
<div
class="itnrwMap map"
id="itnrwMap_1"
tabindex="0"
data-itnrw-coords='[epsg:25832; 344891.34, 5679361.13; Betriebssitz Mauerstraße 51; <a target="_blank" href="https://www.it.nrw/betriebssitz-mauerstrasse-51">Ihr Weg zu IT.NRW</a>; IT.NRW; ./../images/blue_20_20.png], [epsg:25832; 344565.38, 5679410.03; Nebenstelle Kennedydamm 15; <a target="_blank" href="https://www.it.nrw/standort-duesseldorf-kennedydamm-93856">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png], [epsg:25832; 345019.55, 5679406.41; Nebenstelle Roßstraße 64; <a target="_blank" href="https://www.it.nrw/betriebssitz-mauerstrasse-51">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png], [epsg:25832; 340365.75, 5677914.58; Nebenstelle Heesenstraße 26; <a target="_blank" href="https://www.it.nrw/standort-dueseldorf-heesenstrasse-93853">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png]'
data-itnrw-extent="344328.3, 5679171.1, 345305.2, 5679586.7"
data-itnrw-map="width:100%, height:350px, zoomrestriction:true"
></div>
2
3
4
5
6
7
8
# Karte 2: map.nrw mit Standorten als Cluster
Diese Karte zeigt die hier dargestellten Standorte von IT.NRW in einem Cluster dar (Attribut data-itnrw-cluster).
<div
class="itnrwMap map"
id="itnrwMap_2"
tabindex="0"
data-itnrw-coords='[epsg:25832; 344891.34, 5679361.13; Betriebssitz Mauerstraße 51; <a target="_blank" href="https://www.it.nrw/betriebssitz-mauerstrasse-51">Ihr Weg zu IT.NRW</a>; IT.NRW; ./../images/blue_20_20.png], [epsg:25832; 344565.38, 5679410.03; Nebenstelle Kennedydamm 15; <a target="_blank" href="https://www.it.nrw/standort-duesseldorf-kennedydamm-93856">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png], [epsg:25832; 345019.55, 5679406.41; Nebenstelle Roßstraße 64; <a target="_blank" href="https://www.it.nrw/betriebssitz-mauerstrasse-51">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png], [epsg:25832; 340365.75, 5677914.58; Nebenstelle Heesenstraße 26; <a target="_blank" href="https://www.it.nrw/standort-dueseldorf-heesenstrasse-93853">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png]'
data-itnrw-extent="344328.3, 5679171.1, 345305.2, 5679586.7"
data-itnrw-map="width:100%, height:350px, zoomrestriction:true"
data-itnrw-cluster="visible:true"
></div>
2
3
4
5
6
7
8
9
# Karte 3: map.nrw mit Flurstücken
Diese Karte zeigt die Übergabe von Flurstücken an map.nrw (Attribut data-itnrw-flurstuecke). Exemplarisch werden hier zwei IT.NRW Standorte in Düsseldorf in der Karte markiert, wobei auf den Ausschnitt automatisch gezoomt wird. Die Texte für Tooltip, Info-Fenster und Beschriftung der Standorte wurden individuell je Punkt konfiguriert. Ebenso wurden eigene Symbole verwendet.
<div
class="itnrwMap map"
id="itnrwMap_3"
tabindex="0"
data-itnrw-map="width:100%, height:350px, zoomrestriction:true"
data-itnrw-flurstuecke="[3461-6-462; IT.NRW; <b>IT.NRW</b>], [3461-1-625; IT.NRW Nebenstelle; <b>IT.NRW</b><br>Nebenstelle;;./../images/blue_14_14.png]"
></div>
2
3
4
5
6
7
# Karte 4: map.nrw mit geänderter Basiskarte, Kartenumschalter und Vollbildmodus
In diesem Beispiel wird eine andere initiale Basiskarte hinterlegt. Dies geschieht über die Konfiguration data-itnrw-map="basemap:topplus_open". Zusätzlich wurde der Karte ein Kartenumschalter hinzugefügt der es ermöglicht, zwischen der Basiskarte TopPlus Open (Graustufen) und den digitalen Orthophotos umzuschalten. Dieser wird wie folgt konfiguriert data-itnrw-module-toggler="topplus_open, dop".
Mögliche Kartenwerke sind topplus_open, topplus_open_col, dtk, dtk_sw, dop, dop_overlay und none.
<div
class="itnrwMap map"
id="itnrwMap_4"
tabindex="0"
data-itnrw-extent="336293.7, 5681753.7, 352058.9, 5686531.1"
data-itnrw-map="basemap:topplus_open, width:100%, height:350px, zoomrestriction:true, fullscreen:true"
data-itnrw-module-toggler="topplus_open, dop"
></div>
2
3
4
5
6
7
8
# Karte 5: map.nrw mit zusätzlichem Kartendienst und GetFeatureInfo
In diesem Beispiel wird der Karte ein zusätzlicher Layer als Web Map Service (WMS) hinzugefügt (hier: Hochwasser-Risikokarte, mittlere Wahrscheinlichkeit). Dies geschieht über das Attribut data-itnrw-layers. Als weiteren Dienste-Typ lassen sich Web Map Tile Service (WMTS) und ArcGIS-Server-Dienste einbinden. In die Karte klicken, um den WMS-Dienst abzufragen (GetFeatureInfo-Request).
<div
class="itnrwMap map"
id="itnrwMap_5"
tabindex="0"
data-itnrw-popup="width: 400px, height: 350px"
data-itnrw-extent="334949.5, 5674900.1, 350714.6, 5679677.4"
data-itnrw-layers="[wms; https://www.wms.nrw.de/geobasis/wms_nw_dop; nw_dop_utm_info,nw_dop_rgb; ; 0.65; true, false]"
data-itnrw-map="basemap:topplus_open, width:100%, height:650px, zoomrestriction:true"
></div>
2
3
4
5
6
7
8
9
# Karte 6: map.nrw mit Eingabefeldern
In diesem Beispiel werden der map.nrw die beiden möglichen Eingabeleisten hinzugefügt. Die linke Leiste für diverse Suchen (Suche nach Adressen, Flurstücken, Verwaltungsgebieten) wird durch folgendes Attribut konfiguriert data-itnrw-module-search="alle". Die rechte Leiste für die Eingabe von Koordinaten in verschiedenen Koordinatensystemen verwendet das Attribut data-itnrw-module-coords="alle". Nicht gewünschte Optionen können bei beiden Eingabeleisten ausgeblendet werden.
Ist die Kartenbreite zu gering um die Eingabeleisten nebeneinander darzustellen, werden diese ausgeblendet. Näheres hierzu finden Sie in der Dokumentation.
<div
class="itnrwMap map"
id="itnrwMap_6"
tabindex="0"
data-itnrw-extent="314999.5, 5665183.1, 377907.1, 5691783.2"
data-itnrw-module-coords="alle"
data-itnrw-module-search="alle"
data-itnrw-map="basemap:topplus_open, width:100%, height:350px, zoomrestriction:true"
data-itnrw-module-toggler="topplus_open, dop"
></div>
2
3
4
5
6
7
8
9
10
# Karte 7: map.nrw mit Werkzeugleiste
In diesem Beispiel werden der Karte alle zur Verfügung stehenden Werkzeuge hinzugefügt. Dies geschieht über das Attribut data-itnrw-module-tools="alle". Eine Auflistung über die Konfiguration einzelner Werkzeuge entnehmen Sie bitte der Dokumentation.
Das Definieren einer Rückgabe-Funktion (Callback) wird erforderlich, wenn nicht nur Ergebnisse visualisieren werden soll, sondern der Client Daten weiterverarbeiten möchte. Dazu verwenden Sie das Attribut data-itnrw-callbacks. Näheres hierzu finden Sie in der Dokumentation.
<div
class="itnrwMap map"
id="itnrwMap_7"
tabindex="0"
data-itnrw-extent="314999.5, 5665183.1, 377907.1, 5691783.2"
data-itnrw-module-coords="alle"
data-itnrw-module-search="alle"
data-itnrw-module-tools="alle"
data-itnrw-callbacks="zeichneFreihandPolygon:freehandPolygonCallback()"
data-itnrw-map="width:100%, height:350px, zoomrestriction:true"
data-itnrw-module-toggler="topplus_open_col, dop"
></div>
2
3
4
5
6
7
8
9
10
11
12
# Karte 8: map.nrw zur Laufzeit manipulieren
In diesem Beispiel wird gezeigt, wie map.nrw - nachdem sie in die eigene Seite geladen wurde - manipuliert werden kann. Hierzu kann auf die global vorgehaltenen Karten zugegriffen werden, indem für die 8. Karte im DOM die set-Methode wie folgt aufgerufen wird: itnrwMaps[7].set(Attribut, Wert);
Derzeit werden folgende Attribute durch die set-Methode behandelt: data-itnrw-addresses, data-itnrw-coords, data-itnrw-flurstuecke, data-itnrw-extent, data-itnrw-geometries und data-itnrw-layers.
Das Löschen aller Punkte erfolgt mit der Methode itnrwMaps[7].clear();
<div
class="itnrwMap map"
id="itnrwMap_8"
tabindex="0"
data-itnrw-coords='[epsg:25832; 344891.34, 5679361.13; Betriebssitz Mauerstraße 51; <a target="_blank" href="https://www.it.nrw/betriebssitz-mauerstrasse-51">Ihr Weg zu IT.NRW</a>; IT.NRW; ./../images/blue_20_20.png]'
data-itnrw-map="basemap:topplus_open, width:100%, height:350px, zoomlevel:16, zoomrestriction:true"
></div>
<input
onclick='itnrwMaps[7].set("data-itnrw-extent", ""); itnrwMaps[7].set("data-itnrw-coords", "[epsg:25832; 344565.38, 5679410.03; Nebenstelle Kennedydamm 15; <a target=\"_blank\" href=\"https://www.it.nrw/standort-dueseldorf-kennedydamm-93856\">Ihr Weg zu IT.NRW</a>;; ./../images/blue_14_14.png]");'
type="button"
value="Neuen Punkt setzen"
/>
<input
onclick='itnrwMaps[7].set("data-itnrw-extent", ""); itnrwMaps[7].set("data-itnrw-coords", "[epsg:25832; 344891.34, 5679361.13; Betriebssitz Mauerstraße 51; <a target=\"_blank\" href=\"https://www.it.nrw/betriebssitz-mauerstrasse-51\">Ihr Weg zu IT.NRW</a>; IT.NRW; ./../images/blue_20_20.png]");'
type="button"
value="Ursprünglichen Punkt setzen"
/>
<input
onclick='itnrwMaps[7].set("data-itnrw-extent", "336236.1, 5675744.7, 352001.1, 5680522.1");'
type="button"
value="Neuen Extent setzen"
/>
<input onclick="itnrwMaps[7].clear()" type="button" value="Punkt löschen" />
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27