Wenn Sie eine Verwaltung aus NRW sind, binden wir auch Ihre WMS Dienste ggf. gerne hier ein:
https://kreis-viersen.github.io/quattromap/
Kontaktieren Sie uns dazu gerne per E-Mail unter [email protected].

QuattroMap

QuattroMap ist eine vom Kreis Viersen entwickelte Kartenanwendung, die vor allem die Außendiensttätigkeiten unterstützen kann.

Unter https://kreis-viersen.github.io/quattromap/ ist eine Demo des Tools von jedem internetfähigen Gerät, wie Tablet, Smartphone, Laptop und PC, erreichbar. Die Anwendung ist kompatibel mit modernen Browsern, wie Mozilla Firefox, Google Chrome, Safari. Der Microsoft Internet Explorer wird nicht unterstützt.

Mit Hilfe der Anwendung können bis zu 4 verschiedene Karten mit gleichem Kartenausschnitt gleichzeitig dargestellt werden. Über die Schaltfläche in der linken unteren Ecke gelangt man zu den Einstellungen der Kartenfenster. Zur Auswahl der Kartenhintergründe stehen z. B. Luftbilder, Liegenschaftskataster, geplante Gebäude oder OpenStreetMap zur Verfügung.

In den Kartenfenstern können auch Überlagerungen (Overlays) benutzt werden, um bspw. Luftbilder und geplante Gebäude übereinander zu legen.

Am linken Bildschirmrand gibt es eine Suchfunktion (Mapbox GL Geocoder Control: https://github.com/mapbox/mapbox-gl-geocoder) sowie die Möglichkeit den Kartenausschnitt und den eigenen Standort über die Standortbestimmung des Geräts anzuzeigen (Standortbestimmung muss im Gerät eingeschaltet bzw. erlaubt sein). Dazu gibt es dort eine Schaltfläche, um die Anwendung im Vollbild anzuzeigen. Ein Klick auf das Kompass-Symbol richtet die Karte(n) wieder nach Norden aus.

Messwerkzeuge

Sobald nur eine Karte angezeigt wird, stehen Messwerkzeuge zur Verfügung:

• LineString: zum Messen einer Entfernung in Metern
• Polygon: zum Messen einer Fläche in Quadratmetern

Einfach das gewünschte Werkzeug auswählen, den LineString oder das Polygon auf der Karte zeichen und mit einem Klick auf den letzten Stützpunkt abschließen:

Aktuell verfügbare Dienste

Layer

Name	Art	Dienst-URL	Dienst-Layer	Lizenz
Geobasis NRW
NRW Luftbild Farbe	WMS	URL	nw_dop_rgb	dl‑zero‑de/2.0
NRW vDOP Farbe	WMS	URL	nw_vdop_rgb	dl‑zero‑de/2.0
NRW iDOP Farbe	WMS	URL	nw_idop_rgb	dl‑zero‑de/2.0
NRW aktuelles Satellitenbild DYMOS S2	WMS	URL	nw_dymos_s2_rgb	Link
NRW ALKIS FLURSTÜCKE	WMS	URL	adv_alkis_flurstuecke	dl‑zero‑de/2.0
NRW Amtliche Basiskarte (ABK)	WMS	URL	WMS_NW_ABK	dl‑zero‑de/2.0
NRW Alkis TN	WMS	URL	adv_alkis_tatsaechliche_nutzung	dl‑zero‑de/2.0
NRW Schummerung	WMS	URL	nw_dgm-schummerung_pan	dl‑zero‑de/2.0
NRW DTK	WMS	URL	nw_dtk_col	dl‑zero‑de/2.0
NRW NDOM	WMS	URL	nw_ndom	dl‑zero‑de/2.0
NRW TDOM	WMS	URL	nw_tdom	dl‑zero‑de/2.0
OpenStreetMap
OSM Mapnik	XYZ-Tiles	URL		Link
RVR
RVR Luftbild Farbe	WMS	URL	dop	Link
KRZN-Dienste
Kreis Viersen ALKIS	WMS	URL	FlurkarteAdV_Viersen	dl‑zero‑de/2.0
Stadt Krefeld ALKIS	WMS	URL	FlurkarteAdV_Krefeld	dl‑zero‑de/2.0
Kreis Wesel ALKIS	WMS	URL	FlurkarteAdV_Wesel	dl‑zero‑de/2.0
Kreis Kleve ALKIS	WMS	URL	FlurkarteAdV_Kleve	dl‑zero‑de/2.0
Stadt Bottrop ALKIS	WMS	URL	Flurkarte_Bottrop	dl‑zero‑de/2.0
Kreis Viersen ALKIS light	WMS	URL	nutzungsarten, flurstuecke, gebaeude, lagebezeichnungen	dl‑zero‑de/2.0
Kreis Viersen Geplante Gebäude	WMS	URL	kvie_geplgeb	dl‑zero‑de/2.0
OSM Mapnik KRZN (WMS)	WMS	URL	osm	Link
OSM Mapnik KRZN (XYZ-Tiles)	XYZ-Tiles	URL		Link
PDOK (NL)
NL Luftbild Farbe	WMS	URL	Actueel_ortho25	Link
Kreis Warendorf
Kreis Warendorf ALKIS	WMS	URL	alkis_lieka	Link
Kreis Warendorf ABK 1:5000	WMS	URL	abk5000	Link
Kreis Steinfurt
Kreis Steinfurt ALKIS	WMS	URL	0	Link
Kreis Steinfurt ABK	WMS	URL	0	Link
Historische Luftbilder NRW
NRW Luftbild 1951	WMS	URL	nw_hist_dop_1951	dl‑zero‑de/2.0
NRW Luftbild 1952	WMS	URL	nw_hist_dop_1952	dl‑zero‑de/2.0
NRW Luftbild 1953	WMS	URL	nw_hist_dop_1953	dl‑zero‑de/2.0
NRW Luftbild 1954	WMS	URL	nw_hist_dop_1954	dl‑zero‑de/2.0
NRW Luftbild 1955	WMS	URL	nw_hist_dop_1955	dl‑zero‑de/2.0
NRW Luftbild 1956	WMS	URL	nw_hist_dop_1956	dl‑zero‑de/2.0
NRW Luftbild 1957	WMS	URL	nw_hist_dop_1957	dl‑zero‑de/2.0
NRW Luftbild 1958	WMS	URL	nw_hist_dop_1958	dl‑zero‑de/2.0
NRW Luftbild 1959	WMS	URL	nw_hist_dop_1959	dl‑zero‑de/2.0
NRW Luftbild 1960	WMS	URL	nw_hist_dop_1960	dl‑zero‑de/2.0
NRW Luftbild 1961	WMS	URL	nw_hist_dop_1961	dl‑zero‑de/2.0
NRW Luftbild 1962	WMS	URL	nw_hist_dop_1962	dl‑zero‑de/2.0
NRW Luftbild 1963	WMS	URL	nw_hist_dop_1963	dl‑zero‑de/2.0
NRW Luftbild 1964	WMS	URL	nw_hist_dop_1964	dl‑zero‑de/2.0
NRW Luftbild 1966	WMS	URL	nw_hist_dop_1966	dl‑zero‑de/2.0
NRW Luftbild 1967	WMS	URL	nw_hist_dop_1967	dl‑zero‑de/2.0
NRW Luftbild 1968	WMS	URL	nw_hist_dop_1968	dl‑zero‑de/2.0
NRW Luftbild 1969	WMS	URL	nw_hist_dop_1969	dl‑zero‑de/2.0
NRW Luftbild 1970	WMS	URL	nw_hist_dop_1970	dl‑zero‑de/2.0
NRW Luftbild 1971	WMS	URL	nw_hist_dop_1971	dl‑zero‑de/2.0
NRW Luftbild 1972	WMS	URL	nw_hist_dop_1972	dl‑zero‑de/2.0
NRW Luftbild 1973	WMS	URL	nw_hist_dop_1973	dl‑zero‑de/2.0
NRW Luftbild 1974	WMS	URL	nw_hist_dop_1974	dl‑zero‑de/2.0
NRW Luftbild 1975	WMS	URL	nw_hist_dop_1975	dl‑zero‑de/2.0
NRW Luftbild 1976	WMS	URL	nw_hist_dop_1976	dl‑zero‑de/2.0
NRW Luftbild 1977	WMS	URL	nw_hist_dop_1977	dl‑zero‑de/2.0
NRW Luftbild 1978	WMS	URL	nw_hist_dop_1978	dl‑zero‑de/2.0
NRW Luftbild 1979	WMS	URL	nw_hist_dop_1979	dl‑zero‑de/2.0
NRW Luftbild 1980	WMS	URL	nw_hist_dop_1980	dl‑zero‑de/2.0
NRW Luftbild 1981	WMS	URL	nw_hist_dop_1981	dl‑zero‑de/2.0
NRW Luftbild 1982	WMS	URL	nw_hist_dop_1982	dl‑zero‑de/2.0
NRW Luftbild 1983	WMS	URL	nw_hist_dop_1983	dl‑zero‑de/2.0
NRW Luftbild 1984	WMS	URL	nw_hist_dop_1984	dl‑zero‑de/2.0
NRW Luftbild 1985	WMS	URL	nw_hist_dop_1985	dl‑zero‑de/2.0
NRW Luftbild 1986	WMS	URL	nw_hist_dop_1986	dl‑zero‑de/2.0
NRW Luftbild 1987	WMS	URL	nw_hist_dop_1987	dl‑zero‑de/2.0
NRW Luftbild 1988	WMS	URL	nw_hist_dop_1988	dl‑zero‑de/2.0
NRW Luftbild 1989	WMS	URL	nw_hist_dop_1989	dl‑zero‑de/2.0
NRW Luftbild 1990	WMS	URL	nw_hist_dop_1990	dl‑zero‑de/2.0
NRW Luftbild 1991	WMS	URL	nw_hist_dop_1991	dl‑zero‑de/2.0
NRW Luftbild 1992	WMS	URL	nw_hist_dop_1992	dl‑zero‑de/2.0
NRW Luftbild 1993	WMS	URL	nw_hist_dop_1993	dl‑zero‑de/2.0
NRW Luftbild 1994	WMS	URL	nw_hist_dop_1994	dl‑zero‑de/2.0
NRW Luftbild 1995	WMS	URL	nw_hist_dop_1995	dl‑zero‑de/2.0
NRW Luftbild 1996	WMS	URL	nw_hist_dop_1996	dl‑zero‑de/2.0
NRW Luftbild 1997	WMS	URL	nw_hist_dop_1997	dl‑zero‑de/2.0
NRW Luftbild 1998	WMS	URL	nw_hist_dop_1998	dl‑zero‑de/2.0
NRW Luftbild 1999	WMS	URL	nw_hist_dop_1999	dl‑zero‑de/2.0
NRW Luftbild 2000	WMS	URL	nw_hist_dop_2000	dl‑zero‑de/2.0
NRW Luftbild 2001	WMS	URL	nw_hist_dop_2001	dl‑zero‑de/2.0
NRW Luftbild 2002	WMS	URL	nw_hist_dop_2002	dl‑zero‑de/2.0
NRW Luftbild 2003	WMS	URL	nw_hist_dop_2003	dl‑zero‑de/2.0
NRW Luftbild 2004	WMS	URL	nw_hist_dop_2004	dl‑zero‑de/2.0
NRW Luftbild 2005	WMS	URL	nw_hist_dop_2005	dl‑zero‑de/2.0
NRW Luftbild 2006	WMS	URL	nw_hist_dop_2006	dl‑zero‑de/2.0
NRW Luftbild 2007	WMS	URL	nw_hist_dop_2007	dl‑zero‑de/2.0
NRW Luftbild 2008	WMS	URL	nw_hist_dop_2008	dl‑zero‑de/2.0
NRW Luftbild 2009	WMS	URL	nw_hist_dop_2009	dl‑zero‑de/2.0
NRW Luftbild 2010	WMS	URL	nw_hist_dop_2010	dl‑zero‑de/2.0
NRW Luftbild 2011	WMS	URL	nw_hist_dop_2011	dl‑zero‑de/2.0
NRW Luftbild 2012	WMS	URL	nw_hist_dop_2012	dl‑zero‑de/2.0
NRW Luftbild 2013	WMS	URL	nw_hist_dop_2013	dl‑zero‑de/2.0
NRW Luftbild 2014	WMS	URL	nw_hist_dop_2014	dl‑zero‑de/2.0
NRW Luftbild 2015	WMS	URL	nw_hist_dop_2015	dl‑zero‑de/2.0
NRW Luftbild 2016	WMS	URL	nw_hist_dop_2016	dl‑zero‑de/2.0
NRW Luftbild 2017	WMS	URL	nw_hist_dop_2017	dl‑zero‑de/2.0
NRW Luftbild 2018	WMS	URL	nw_hist_dop_2018	dl‑zero‑de/2.0
NRW Luftbild 2019	WMS	URL	nw_hist_dop_2019	dl‑zero‑de/2.0
NRW Luftbild 2020	WMS	URL	nw_hist_dop_2020	dl‑zero‑de/2.0
NRW Luftbild 2021	WMS	URL	nw_hist_dop_2021	dl‑zero‑de/2.0
NRW Luftbild 2022	WMS	URL	nw_hist_dop_2022	dl‑zero‑de/2.0
NRW Luftbild aktuell	WMS	URL	nw_dop_rgb	dl‑zero‑de/2.0
NRW vDOP aktuell	WMS	URL	nw_vdop_rgb	dl‑zero‑de/2.0
NRW iDOP aktuell	WMS	URL	nw_idop_rgb	dl‑zero‑de/2.0

Overlays

Zusätzlich zu den unter Layer gelisteten Diensten sind als Overlay verfügbar:

Name	Art	Dienst-URL	Dienst-Layer	Lizenz
Geobasis NRW
NRW Luftbild Metadaten	WMS	URL	nw_dop_utm_info	dl‑zero‑de/2.0
NRW vDOP Metadaten	WMS	URL	nw_vdop_info	dl‑zero‑de/2.0
NRW iDOP Metadaten	WMS	URL	nw_idop_info	dl‑zero‑de/2.0
NRW NDOM Metadaten	WMS	URL	nw_ndom_info	dl‑zero‑de/2.0
NRW TDOM Metadaten	WMS	URL	nw_tdom_info	dl‑zero‑de/2.0
NRW Luftbild Overlay	WMS	URL	WMS_NW_DOP_OVERLAY	dl‑zero‑de/2.0
NRW LINFOS	WMS	URL	Naturschutzgebiete, Landschaftsschutzgebiet	dl‑by‑de/2.0
NRW Freizeitkataster TFIS	WMS	URL	nw_tfis	dl‑zero‑de/2.0
KRZN-Dienste
Klassifizierte Gewässer Kreis Viersen	WMS	URL	kvie_klassgew	dl‑zero‑de/2.0

Permalink

Die URL enthält die derzeitige Einstellung der QuattroMap (Permalink). Dazu gehört die Anzahl und Einstellung der Kartenfenster inkl. Layerdefinitionen, das Kartenzentrum, die Zoomstufe und die Farbe des Gitterkreuzes (Zentrumsmarkierung). Über den Permalink können so vordefinierte Einstellungen für bestimmte Anwendungszwecke als Lesezeichen gespeichert oder weitergegeben werden. Über die Schaltfläche Permalink in die Zwischenablage kopieren am linken Bildschirmrand wird die derzeitige URL in die Zwischenablage kopiert und kann dann bspw. per Mail geteilt werden.

URL-Parameter lat / lon

Es können mit den URL-Parametern lat / lon geographische Koordinaten (EPSG:4326) übergeben werden, welche dann beim Aufruf der Karte für den Kartenmittelpunkt verwendet werden.

Beispiel: https://kreis-viersen.github.io/quattromap?lat=51.34119&lon=6.35583

Konfiguration

Über die config.json können einige Standardeinstellungen der QuattroMap vorgenommen werden.

Parameter	Erklärung	Beispiel
"center"	Gibt die Zentrumskoordinate des Kartenfensters beim Starten an. Angabe geographisch mit Längen- und Breitenangabe in EPSG 4326.	"center": [6.391263, 51.258812]
"zoom"	Definiert die Zoomstufe beim Start. Wertebereich: 0 (fern) - 22 (nah)	"zoom": 16
"maps"	Optionale Angabe über die Anzahl der Kartenfenster. Mögliche Werte: 1, 2, 3, 4; Standardwert: 4	"maps": 2
"crosshair"	Optionale Definition der Fadenkreuzfarbe. Mögliche Werte: black, red, orange, yellow, green, blue, pink; Standardwert: black	"crosshair": "red"
"map_x": {"layer": layername} Optional: "overlay": layername, "overlay_opacity": opacity-value, }	Voreinstellung der dargestellten Dienste des Kartenfensters x (1-4) beim Starten der QuattroMap. layer enthält einen Namen eines Dienstes, die unter "layer" definiert sind. overlay enthält einen Namen eines Dienstes, der als Abdeckungslayer dient und muss nur angegeben werden, wenn ein Abdeckungslayer verwendet werden soll. overlay_opacity definiert die Deckkraft des Abdeckungslayers. Mögliche Werte: 0 (transparent) - 1 (opak); Standardwert: 0.5	"map_1": {"layer": "NRW Luftbild Farbe", "overlay": "NRW Schummerung", "overlay_opacity": 0.4}
"layer": [ .. ]	Enthält die Definitionen der wählbaren Dienste im Dropdown Menü
"name"	Name des Dienstes, der im Dropdown Menü und beim Klick auf den Info-Button erscheint.	"name": "NRW Alkis TN"
"attribution"	Attribution zur Beschreibung der verwendeten Dienste, die über den Info-Button dargestellt wird. HTML-Tags können verwendet werden.	"attribution": "Land NRW (2021) Deutschland ? Zero ? Version 2.0 (<a target='_blank' rel='noopener noreferrer' href='https://www.govdata.de/dl-de/zero-2-0'>www.govdata.de/dl-de/zero-2-0</a>)"
"url"	URL des WMS 1.3.0 Dienstes oder OpenStreetMap XYZ-Tiles	"url": "https://www.wms.nrw.de/geobasis/wms_nw_alkis"
"layer"	Darzustellende Layer des Dienstes. Mehrere Layer werden mit Komma getrennt.	"layer": "nutzungsarten,flurstuecke"
"format"	Abzurufendes Rasterformat (png oder jpeg) der Kacheln. Da png Transparenz ermöglicht, ist png zu empfehlen. Jedoch können nicht alle Dienste png liefern.	"format": "png"
"category"	Begriff zur Kategorisierung der Dienste im Dropdown-Menü.	"category": "GeoBasis NRW"
"onlyOverlay"	Mit diesem optionalen Parameter lässt sich der entsprechende Dienst nur als Overlay verwenden.	"onlyOverlay": true
"style"	Optionaler Parameter zur Auswahl eines bestimmten Stils. Stile können von Diensten angeboten werden.	"style": "Farbe"
"compactAttribution"	Mit diesem optionalen Parameter lässt sich festlegen, ob die Attribution mit dem Layernamen bei Auswahl des Layers ausgeklappt (false) oder eingeklappt ist (true = Standardwert).	"compactAttribution": "false"

Develop

# clone the repository
git clone https://github.com/kreis-viersen/quattromap/
cd quattromap

Install the deps, start the dev server and open the web browser on http://localhost:8080/.

# install dependencies
npm install
# start dev server
npm start

The build process will watch for changes to the filesystem, rebuild and autoreload QuattroMap. However note this from the webpack-dev-server docs:

webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. In these cases, use polling. (snippet source)

# build the app
npm run build

Once the build is finished, you'll find it at dist/.

# publish files to a gh-pages branch on GitHub
npm run deploy

Search

For the search functionality https://github.com/mapbox/mapbox-gl-geocoder is used.

For your own QuattroMap please use your own access token: https://docs.mapbox.com/help/how-mapbox-works/access-tokens/.