ZugMap.API

ZugMap API sample

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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" />

    <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>

  </head>

  <body>

    <div id="map">
    </div>
    
    <h3 id="egid">
    </h3>
    
  </body>

</html>

CSS

#map {
  height:430px;
  border: 0; 
  margin: 15px; 
  position:relative;
}


#egid {
font-weight: lighter;
margin: 15px;
}

JavaScript

initMap();

        function initMap() {
          MapControl.init('map', {
            defaultBaseMap: 'Grundbuchplan',
            showErdwaermeLayerNutzung: false,
            showErdwaermeLayerSonden: false,
            showErdwaermeLayerNutzung_menu: false,
            showErdwaermeLayerSonden_menu: false,
            showMapPin: true
          });

          MapControl.getKoordinatenVonGrundstuecknummerUndGemeinde("490", "Zug")

          MapControl.addMapDataCompleteEventHandler(updateExampleForm);

          function updateExampleForm() {
            document.getElementById("egid").innerHTML = "EGRID der Liegenschaft an Pin-Position: " + MapControl.markerInformations.egrid_liegenschaft;

          }



        }