@section styles {
    @Styles.Render("~/Content/Leaflet/all")
    <link href="~/css/GuiTests/Content/PageStyle.css"
          rel="stylesheet"/>
}

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <leaflet-scripts />
}

<h1 class="guiTestHeader">Maps</h1>
<form>
    <input type="hidden"
           id="polygon1"
           value=""/>
    <div id="displayMap1"
         class="map">
    </div>
</form>
<p>
    Note: Create some regions. Fullscreen functionality should be available.<br/>
    Also 'remember last position' should be working.
</p>

<script type="text/javascript">
    $(function () {
        window.mapOriginDefault = {
            'lat': 52.16,
            'lon': 21,
            'zoom': 13,
            lastUpdate: 0
        };
        var mapOrigin = loadMapOriginFromStorage('LeafLetTestingPage.mapOriginLastUserSelection');

        var leafletDraw = initLeaflet('displayMap1', {
            center: L.latLng(mapOrigin.lat, mapOrigin.lon),
            zoom: mapOrigin.zoom,
            showFullscreen: true
        });
        leafletDraw.on('zoomend moveend', function (event) {
            var center = this.getCenter();
            saveMapOriginToStorage('LeafLetTestingPage.mapOriginLastUserSelection', {
                'lat': center.lat,
                'lon': center.lng,
                'zoom': this.getZoom(),
            });
        });

        //
        // Polygon loading
        var polygonStringDraw = $('#polygon1');
        var drawnItemsDraw = new L.FeatureGroup();
        drawnItemsDraw.addTo(leafletDraw);
        var mainPolygonDraw = loadRegionPolygon(leafletDraw, drawnItemsDraw, polygonStringDraw.val());

        //
        // Drawing
        initLeafletDraw(leafletDraw, drawnItemsDraw, function (v) {
            mainPolygonDraw = v;
        }, function () {
            saveRegionPolygon(mainPolygonDraw, polygonStringDraw);
        });

    });
</script>