Navigieren auf Geoportal Kanton Zug

Inhaltsnavigation auf dieser Seite

Navigation

ZugMap.API

Technische Erläuterung zum Einbetten des MapControls "ZugMap.API" in eine HTML-Seite oder ein Formular
Logo ZugMap.API
Bild Legende:

 

 

ZugMap.API ist ein frei verfügbares und gebührenfreies MapControl, welches in ein Formular oder eine Webseite eingebunden werden kann.

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

Man kann verschiedene Karten und Layer darstellen, nach Adressen und Grundstücken suchen und durch Platzierung des roten Kartenmarkers sogar räumliche Abfragen tätigen.

Die Werte der räumlichen Abfrage kann man sich in Formularen zunutze machen.

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

Demoseite zu ZugMap.API

Beispielbild
Bild Legende:
Bildschirmfoto des ZugMap.API-MapControl

Vorgehen Einbinden von ZugMap.API 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://maps.zg.ch/ZugMap.API/favicon.ico">
    <link rel="stylesheet" href="https://maps.zg.ch/ZugMap.API/libs/bulma.css">
    <link rel="stylesheet" href="https://maps.zg.ch/ZugMap.API/libs/ol.css">
    <link rel="stylesheet" href="https://maps.zg.ch/ZugMap.API/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maps.zg.ch/ZugMap.API/styles.css">
  2. Ergänzen Sie in Ihrer HTML-Datei die folgenden JavaScript-Referenzen:

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,fetch"></script>
    <script src="https://maps.zg.ch/ZugMap.API/libs/proj4.js"></script>
    <script src="https://maps.zg.ch/ZugMap.API/libs/ol.js"></script>
    <script src="https://maps.zg.ch/ZugMap.API/libs/jquery-3.2.1.min.js"></script>
    <script src="https://maps.zg.ch/ZugMap.API/MapControl.js"></script>
    <script src="https://maps.zg.ch/ZugMap.API/geolocation.js"></script>
    <script src="https://maps.zg.ch/ZugMap.API/drag.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 in im Seitenquelltext der Demoseite

    <div id="map" style="width:550px;height:430px;border: solid 1px black;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 Java-Konstruktor verschiedene Eigenschaften übergeben werden. Im Beispiel soll das Such-GUI (showSearchGui: true), sowie der Erdwärme-Layer in der Karte (showErdwaermeLayer: visible) angezeigt werden. Zudem wird der Marker-Pin auf «draggable» gesetzt.

    Weiter zeigt der folgende Code-Ausschnitt, wie die Karte an einer gewünschten Adresse initialisiert werden kann:

    initMap();
    function initMap() {
    MapControl.init('map', {
    showSearchGui: true,5. showErdwaermeLayer: 'visible',
    markerIsDraggable: true
    });
    MapControl.getAddressLocation('Grienbachstrasse', '17', 'Zug');
    }

  5. Mit diesen Code-Ergänzungen sollte die ZugMap.API-Einbindung nun bereits funktionieren.
  6. Das folgende ergänzende Beispiel zeigt, wie bei Verschiebungen des 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:
    MapControl.addMapDataCompleteEventHandler(updateExampleForm);
  7. In der auszuführenden Methode können dann über die Klasse MapControl.markerInformations verschiedene Eigenschaften zur Pin-Position abgefragt und ausgegeben werden:

    function updateExampleForm() {
    document.getElementById("output").innerHTML = "EGRID an Pin-Position: " + MapControl.markerInformations.egrid;
    }

Einbinden von ZugMap.API mit Hilfe von JSFiddle

JSFidle ist ein frei verfügbares Werkzeug.

Im Link unten können die verschiedenen Parameter beim Einbinden von ZugMap.API ausprobiert werden.

Beispiel in JSFiddle
https://jsfiddle.net/msq1z2x0/28/

 

 

Weitere Informationen

Fusszeile