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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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">
    <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>
    
</head>

<body>

    <div id="map" style="width:550px;height:430px;border: solid 1px black;overflow:hidden;position:relative;">
    </div>    
    <h2 style="font-weight:bold;" id="output"></h2>
</body>

</html>

CSS

<style type="text/css">
        body {
            font-family: Verdana, Arial, Sans-Serif;
            font-size: 12px;
            padding: 10px;
        }

        #logo {
            font-size: 1em;
        }

        #logo {
            margin: 2.18em 0 1.82em 2.4em;
            padding: 0;
            width: 17em;
        }

        h1 {
            font-size: 16px;
        }

        h2 {
            font-size: 14px;
        }

        #giszg {
            position: absolute;
            right: 3px;
            bottom: 20px;
            z-index: 10000;
            width: 207px;
            height: 13px;
        }

        a:link {
            text-decoration: none;
            font-weight: bold;
            color: #006FBA;
        }

        a:visited {
            text-decoration: none;
            font-weight: bold;
            color: #006FBA;
        }

        .formLayout {
            background-color: #f3f3f3;
            border: solid 1px #a1a1a1;
            padding: 10px;
            width: 300px;
            margin-top: 20px;
            height: 420px;
        }

        .formLayout label,
        .formLayout input {
            display: block;
            width: 125px;
            float: left;
            margin-bottom: 10px;
        }

        .formLayout label {
            text-align: right;
            padding-right: 10px;
        }
    </style>

JavaScript

initMap();
        function initMap() {
            MapControl.init('map', {
                showSearchGui: true,
                //showErdwaermeLayer: false,
                showErdwaermeLayer: 'visible',
                markerIsDraggable: true
            });


						MapControl.getAddressLocation('Grienbachstrasse', '17', 'Zug');

            MapControl.addMapDataCompleteEventHandler(updateExampleForm);

            //MapControl.addCoordUpdateEventHandler(updateExampleForm);

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



        }