ZugMAPI (Map+API= MAPI) ist der kleine Bruder oder die kleine Schwester von ZugMap.ch.

Ein offenes und frei verfügbares MapControl. Das Kärtchen kann in ein Formular oder eine Webseite eingebettet werden.

Neben der Schweizer Landeskarte und der weltweiten OpenStreetMap-Karte zeigt es vor allem hochqualitative Zuger Behördendaten und grenzt sich somit von ähnlichen MapControls der amerikanischen Datenriesen (Google Maps API, Bing Maps API) oder GeoAdmin API von swisstopo ab.

Man kann verschiedene Karten und Layer darstellen und nach Adressen und Grundstücksnummern suchen.
Durch manuelle Platzierung des (optionalen) roten Kartenmarkers lassen sich Standortinformationen anzeigen. Diese Werte können wiederum in Formularfeldern eingebaut werden.

Beim Einbetten der Karte kann konfiguriert werden, wo der Kartenausschnitt beim Startaufruf sein soll und welcher Layer beim Startaufruf dargestellt werden soll.

Demoseite - so sieht es aus

Vorgehen Einbetten von ZugMAPI in eine Webseite

1. Ergänzen Sie in Ihrer HTML-Datei die folgenden CSS-Referenzen:
   

   <link rel="shortcut icon" type="image/x-icon" href="https://mapi.zugmap.ch/favicon.ico"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/libs/bootstrap/bootstrap.min.css"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/libs/bulma/bulma.css"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/libs/openlayers/ol.css"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/libs/font-awesome/css/all.min.css"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/libs/bootstrap/bootstrap.min.css"/> <link rel="stylesheet" href="https://mapi.zugmap.ch/css/styles.css"/>

2. Ergänzen Sie in Ihrer HTML-Datei die folgenden JavaScript-Referenzen:
   

   <script src="https://mapi.zugmap.ch/libs/bootstrap/popper.min.js"></script> <script src="https://mapi.zugmap.ch/libs/bootstrap/bootstrap.min.js"></script> <script src="https://mapi.zugmap.ch/libs/proj4js/proj4.js"></script> <script src="https://mapi.zugmap.ch/libs/proj4js/proj4-src.js"></script> <script src="https://mapi.zugmap.ch/libs/openlayers/ol.js"></script> <script src="https://mapi.zugmap.ch/libs/jquery-3.6.0.min.js"></script> <script src="https://mapi.zugmap.ch/js/MapControl.js"></script> <script src="https://mapi.zugmap.ch/js/geolocation.js"></script> <script src="https://mapi.zugmap.ch/js/drag.js"></script> <script src="https://mapi.zugmap.ch/libs/jquery.autocomplete.min.js"></script>

3. An der gewünschten Stelle in der Webseite muss ein DIV-Container eingefügt werden, in welchem das MapControl angezeigt werden soll (dem DIV-Element die ID "map" zuweisen).
   
   Die Style-Eigenschaften (Höhe, Breite etc.) können beliebig definiert werden.
   
   Ein Beispiel ist zu sehen im Seitenquelltext der Demoseite
   

   <div id="map" style="height:430px; border: 0; border-radius: 0px; overflow:hidden; position:relative;"> </div>

4. Initialisierung des MapControls mittels JavaScript-Funktion "initMap()".
   
   Der init()-Funktion muss die ID des DIV-Containers als Parameter übergeben werden. Zudem können dem Javascript-Konstruktor verschiedene Eigenschaften übergeben werden.
   
   Im Beispiel soll der Map-Pin (showMapPin: true) sowie der Erdwärme-Layer in der Karte (showErdwaermeLayerNutzung: true) angezeigt werden.
   
   Das Menü zum Ein- und Ausblenden der vorhandenen Zusatzlayer soll aber nicht dargestellt werden (showErdwaermeLayerNutzung_menu: false, showErdwaermeLayerSonden_menu: false).
   Damit kann man verhindern, dass der Benutzer die Zusatzlayer ausblenden kann.
   
   Mit dem Parameter "defaultBaseMap" kann man definieren, welche der Hintergrundkarten standardmässig aktiviert sein soll.
   Mit den Funktionen "MapControl.getKoordinatenVonGrundstuecknummerUndGemeinde("490", "Zug")" und "MapControl.getKoordinatenVonAdresse("Baarerstrasse 63 Zug")" kann der Startpunkt der Karte bestimmt werden.
   
   Erlaubt ist für die Funktion getKoordinatenVonGrundstuecknummerUndGemeinde() eine valide Grundstücksnummer sowie eine Gemeinde des Kantons Zug.
   
   Für die Funktion getKoordinatenVonAdresse() muss die eingegebene Adresse einer offiziellen Adresse innerhalb des Kantons Zug entsprechen.
   

   <script>     function initMap() {         MapControl.init('map', {             defaultBaseMap: 'Swisstopo_LK', // Möglich sind: 'Luftbild', 'Grundbuchplan', 'Swisstopo_LK', 'OSM', 'Adressplan'             showErdwaermeLayerNutzung: true,             showErdwaermeLayerSonden: false,             showErdwaermeLayerNutzung_menu: false,             showErdwaermeLayerSonden_menu: false,             showMapPin: true         });             // DEFINIEREN DER START-ADRESSE DES MAP-PINS:             //MapControl.getKoordinatenVonAdresse("Baarerstrasse 63 Zug");             MapControl.getKoordinatenVonGrundstuecknummerUndGemeinde("490", "Zug")     } </script>

Mit diesen Code-Ergänzungen sollte die ZugMap.API-Einbindung nun bereits funktionieren.

1. Das folgende ergänzende Beispiel zeigt, wie bei Verschiebungen des Karten-Pins in der Karte entsprechende Informationen abgefragt werden können.
   
   Registrieren Sie sich am addMapDataCompleteEventHandler und geben Sie die in diesem Fall auszuführende Methode an.
   In der auszuführenden Methode können dann über die Klasse "MapControl.markerInformations" verschiedene Eigenschaften zur Pin-Position abgefragt und ausgegeben werden.
   

   <script> MapControl.addMapDataCompleteEventHandler(updateExampleForm);     function updateExampleForm() {         document.getElementById("E_LV95").value = MapControl.markerInformations.E.toFixed(3);         document.getElementById("N_LV95").value = MapControl.markerInformations.N.toFixed(3);         document.getElementById("LAT_WGS84").value = MapControl.markerInformations.lat.toFixed(6);         document.getElementById("LON_WGS84").value = MapControl.markerInformations.lon.toFixed(6);         document.getElementById("gemeinde").value = MapControl.markerInformations.gemeinde;         document.getElementById("liegenschaft_nummer").value = MapControl.markerInformations.liegenschaft_nummer;         document.getElementById("strasse").value = MapControl.markerInformations.strasse;         document.getElementById("hausnr").value = MapControl.markerInformations.hausnummer;         document.getElementById("ortschaft").value = MapControl.markerInformations.ortschaft;         document.getElementById("egid").value = MapControl.markerInformations.egid;         document.getElementById("sdr_nummer").value = MapControl.markerInformations.sdr_nummer;         document.getElementById("assekuranznummer").value = MapControl.markerInformations.assekuranznummer;         document.getElementById("bfs_nr").value = MapControl.markerInformations.bfs_nr;         document.getElementById("egrid_sdr").value = MapControl.markerInformations.egrid_sdr;         document.getElementById("egrid_liegenschaft").value = MapControl.markerInformations.egrid_liegenschaft;         document.getElementById("plz").value = MapControl.markerInformations.plz;     } </script>

Ausprobieren des Einbindens von ZugMAPI mit Hilfe von JSFiddle

JSFiddle ist ein Online-IDE-Dienst zum Testen und Präsentieren von benutzerdefinierten und gemeinsam erstellten HTML-, CSS- und JavaScript-Code-Snippets, die als "Fiddles" bezeichnet werden.
Im Link unten können die verschiedenen Parameter beim Einbetten von ZugMAPI ausprobiert werden.

Beispiel in JSFiddle
https://jsfiddle.net/cf6ngd0x/55/