Demo – využití GPS

Po zadání adresy se zobrazí její GPS souřadnice a pomocí souřadnic je adresa zobrazena i na mapě. Pro získání souřadnic slouží validační callback.

Formulář s využitím GPS:

Zdrojový kód – JavaScript:

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
 <script type="text/javascript" src="https://api.mapy.cz/loader.js"></script>
 <script type="text/javascript">Loader.load();</script>
 <script type="text/javascript">
    var map;
    var markerLayer;
    var markers = [];    
    var coordinates = [];  
  
    var smartform = smartform || {};
    
    window.onload = function() {
       initMap();
    }
          
    smartform.beforeInit = function () {
       smartform.setClientId('[clientId]');
        
    }
        /* Nastavení validačního calllbacku */
    smartform.afterInit = function() {
        smartform.getInstance().addressControl.addValidationCallback(validationCallback);
    }

    /* Validační callback pro získání adresy a GPS souřadnic */
    function validationCallback(response) {
        if (response.result.type == smartform.AddressValidationResultType.HIT) {
            clear();
            var address = response.result.addressArray[0];
            showAddress(address);
        } else {
            clear();
        }
    }

    /* Inicializace mapy */
    function initMap(){
        var origin = SMap.Coords.fromWGS84(15.5, 50);
        map = new SMap(JAK.gel("map_div"), origin, 10);
        map.addControl(new SMap.Control.Sync());
        map.addDefaultLayer(SMap.DEF_BASE).enable();
        markerLayer = new SMap.Layer.Marker();
        map.addLayer(markerLayer);
        markerLayer.enable();
        map.addDefaultControls();
    }

    /* Zobrazení adresy na mapě */
    function showAddress(address) {
        if( !address.COORD_WGS84_LATITUDE || !address.COORD_WGS84_LONGITUDE) {
            // nektere adresy nemaji ulozene souradice
            document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">Pro tuto adresu nejsou GPS souřadnice k dispozici.</div>';
        }  else {
            // zobrazeni GPS vedle mapy
            document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\">GPS souřadnice:<br /> <div style=\"font-weight:bold; font-size:1.2em; margin-top:4px\">' +
                format(address.COORD_WGS84_LATITUDE,address.COORD_WGS84_LONGITUDE) +
                '</div><div style=\"font-size:0.8em; margin-bottom:4px;\">' + round(address.COORD_WGS84_LATITUDE) + ", " + round(address.COORD_WGS84_LONGITUDE) + '</div></div>';
            // zobrazeni na mape
            showOnMap(address.COORD_WGS84_LONGITUDE, address.COORD_WGS84_LATITUDE);
            centerTheView();
        }
    }

    /** Funkce na zaokrouhleni GPS souradnic. */
    function round(x) {
        return Math.round(x*1000000)/1000000;
    }

    /** Vymazani mapy a souradnic. Vola se, pokud nebyla zadana validni adresa. */
    function clear(){
        document.all.gps.outerHTML = '<div id=\"gps\" style=\"display:block\"></div>';
        coordinates = [];
        markerLayer.removeAll();
        markers = [];
    }

    /** Spocitani pozici mapy tak, aby znacky byly videt */
    function centerTheView(){
        var cz = map.computeCenterZoom(coordinates); /* Spočítat pozici mapy tak, aby značky byly vidět */
        var last = cz.length-1;
        map.setCenterZoom(cz[0], cz[last]);
    }

    /** Prevedeni GPS souradnic z desetinneho formatu na zapis pomoci minut a sekund.
     * Napr.: (50.761701, 15.091974) -> 50°45'42.1''N 15°5'31.1''E     */
    function format(x, y) {
        var xx = convertCoord(x);
        var yy = convertCoord(y);
        return xx+"N "+yy+"E";
    };

    /** Prevedeni jedne souradnice */
    function convertCoord(dD) {
        var D = Math.floor(dD);
        var dM = (dD-D)*60;
        var M = Math.floor(dM);
        var S = Math.round((dM-M)*600)/10;
        return D+"°"+M+"\'"+S+"\'\'";
    }


    /** Zobrazeni souradnic na mape */
    function showOnMap(lonD, latD) {
        var coords = SMap.Coords.fromWGS84(lonD, latD); /* Souřadnice značky, z textového formátu souřadnic */

        var options = {
            anchor: {left:10, bottom: 1}  /* Ukotvení značky za bod uprostřed dole */
        }

        var marker = new SMap.Marker(coords, null, options);
        coordinates.push(coords);
        markers.push(marker);

        for (var i=0; i < markers.length; i++) {
            markerLayer.addMarker(markers[i]);
        }
    }

</script>

Zdrojový kód – HTML pro formulář a mapu:

<div style="display: flex">
    <form>
        <input class="smartform-address-street-and-number" id="smartform_ulice" placeholder="Ulice a číslo" type="text" />
        <input class="smartform-address-city" id="smartform_obec" placeholder="Obec" type="text" />
        <input class="smartform-address-zip" id="smartform_psc" placeholder="PSČ" type="text" />
        <div id="gps" style="display:block;"></div>
        <button onclick="smaz()">Ještě jednou</button>
    </form>
    <div id="map_div" style="width:100%; height: 500px; margin-top: 0px"></div>
</div>