Nastavení

app/Core/MapovyPodklad.php

@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Core;
+
+
+final class MapovyPodklad
+{
+    public const COOKIE = 'mapovyPodklad';
+
+    public const OSM = 'osm';
+
+    public const MAPYCZ = 'mapycz';
+
+    public const MAPYCZ_LETECKA = 'mapycz-letecka';
+
+    public const VYCHOZI = self::OSM;
+
+    /**
+     * @return array<string, string>
+     */
+    public static function moznosti(): array
+    {
+        return [
+            self::OSM => 'OpenStreetMap',
+            self::MAPYCZ => 'Mapy.cz',
+            self::MAPYCZ_LETECKA => 'Mapy.cz (letecká)',
+        ];
+    }
+
+    public static function platny(?string $hodnota): string
+    {
+        return array_key_exists((string) $hodnota, self::moznosti())
+            ? (string) $hodnota
+            : self::VYCHOZI;
+    }
+}

app/Presentation/@layout.latte

@@ -15,6 +15,7 @@
 	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""></script>
+	<script src="{$basePath}/js/mapove-podklady.js?v=1"></script>
 
 	{* Locate-Control *}
 	<link rel="stylesheet" href="{$basePath}/locate/L.Control.Locate.min.css" />
@@ -28,7 +29,7 @@
 	</script>
 
 	{* naše vlastní styly *}
-	<link href="{$basePath}/css/base.css?v=9" rel="stylesheet">
+	<link href="{$basePath}/css/base.css?v=10" rel="stylesheet">
 
 	<title>{ifset title}{include title|stripHtml} | {/ifset}Obvody</title>
 </head>
@@ -56,6 +57,7 @@
 							<a class='nav-link' n:href=':Mapa:'>Mapa</a>	
 							<a class='nav-link' n:href=':Obvod:list'>Obvody</a>
 							<a class='nav-link' n:href=':Zvestovatel:'>Zvěstovatelé</a>
+							<a class='nav-link' n:href=':Nastaveni:'>Nastavení</a>
 							<a class='nav-link' n:href=":Sign:out">Odhlásit</a>
 						{else}
 							<a class='nav-link' n:href=':Home:'>Home</a>

app/Presentation/Mapa/default.latte

@@ -11,5 +11,5 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
 <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
 <script type="application/json" id="stari-data">{$stariJson|noescape}</script>
-<script src="{$basePath}/js/stari.js?v=13"></script>
+<script src="{$basePath}/js/stari.js?v=14"></script>
 {/block}

app/Presentation/Nastaveni/NastaveniPresenter.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Presentation\Nastaveni;
+
+use App\Core\MapovyPodklad;
+use App\Presentation\BasePresenter;
+use Nette\Application\UI\Form;
+use Nette\Utils\ArrayHash;
+
+
+final class NastaveniPresenter extends BasePresenter
+{
+    protected function createComponentPodkladForm(): Form
+    {
+        $form = new Form;
+        $form->addRadioList('podklad', 'Mapové podklady', MapovyPodklad::moznosti())
+            ->setDefaultValue($this->aktualni())
+            ->setRequired('Vyberte mapové podklady.');
+        $form->addSubmit('send', 'Uložit');
+        $form->addProtection('Platnost formuláře vypršela, odešlete ho znovu.');
+        $form->onSuccess[] = $this->podkladFormSucceeded(...);
+        return $form;
+    }
+
+    private function podkladFormSucceeded(Form $form, ArrayHash $values): void
+    {
+        $this->getHttpResponse()->setCookie(
+            MapovyPodklad::COOKIE,
+            MapovyPodklad::platny((string) $values->podklad),
+            '+1 year',
+            '/',
+            null,
+            null,
+            false,
+        );
+        $this->flashMessage('Nastavení bylo uloženo.');
+        $this->redirect('default');
+    }
+
+    private function aktualni(): string
+    {
+        return MapovyPodklad::platny($this->getHttpRequest()->getCookie(MapovyPodklad::COOKIE));
+    }
+}

app/Presentation/Nastaveni/default.latte

@@ -0,0 +1,25 @@
+{block content}
+
+<div class="platno">
+    <header class="lista">
+        <div>
+            <h1 class="lista-nadpis">Nastavení</h1>
+            <p class="lista-popis">Platí jen pro toto zařízení.</p>
+        </div>
+    </header>
+
+    <form n:name="podkladForm" class="panel panel-uzky formular">
+        <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
+        <fieldset class="podklady">
+            <legend class="form-label">Mapové podklady</legend>
+            <p class="lista-popis podklady-popis">Výchozí podklad je OpenStreetMap. Vybraná mapa se použije na celé mapě i v náhledu obvodu.</p>
+            <div n:foreach="$form[podklad]->getItems() as $klic => $popisek" class="form-check">
+                <input n:name="podklad:$klic" class="form-check-input">
+                <label n:name="podklad:$klic" class="form-check-label">{$popisek}</label>
+            </div>
+        </fieldset>
+        <div class="formular-akce">
+            <button n:name="send" class="tlacitko is-aktivni">Uložit</button>
+        </div>
+    </form>
+</div>

app/Presentation/Obvod/view.latte

@@ -161,7 +161,7 @@
 </div>
 
 <script type="application/json" id="zvestovatele-data">{$zvestovateleJson|noescape}</script>
-<script src="{$basePath}/js/obvod-nahled.js?v=2"></script>
+<script src="{$basePath}/js/obvod-nahled.js?v=3"></script>
 <script src="{$basePath}/js/naseptavac.js?v=3"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function () {

app/Presentation/Stari/default.latte

@@ -5,5 +5,5 @@
 <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
 <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
 <script type="application/json" id="stari-data">{$stariJson|noescape}</script>
-<script src="{$basePath}/js/stari.js?v=5"></script>
+<script src="{$basePath}/js/stari.js?v=14"></script>
 {/block}

www/css/base.css

@@ -724,6 +724,41 @@ body:has(#map[data-max]) {
     margin-top: 0.4rem;
 }
 
+.podklady {
+    border: 0;
+    margin: 0 0 0.85rem;
+    padding: 0;
+}
+
+.podklady-popis {
+    margin-bottom: 0.75rem;
+}
+
+.formular .form-check {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    min-height: 2.2rem;
+    margin-bottom: 0.2rem;
+}
+
+.formular .form-check-input {
+    width: 1.15rem;
+    height: 1.15rem;
+    margin: 0;
+    border-color: #2652a8;
+}
+
+.formular .form-check-input:checked {
+    background-color: #2652a8;
+    border-color: #2652a8;
+}
+
+.formular .form-check-label {
+    color: #1a1a1a;
+    font-size: 1.05rem;
+}
+
 .tabulka {
     width: 100%;
     border-collapse: separate;

www/js/mapa.js

@@ -1,63 +1,12 @@
-// Mapy.CZ:
+var podklady = MapovePodklady.vytvor();
-const API_KEY = 'Uw8gm6JPZpnT3GfNnh8adARpQI-WBGy6QaY9g6VhD74';
-var mapyCZ = L.tileLayer(`https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=${API_KEY}`, {
-    minZoom: 0,
-    maxZoom: 19,
-    attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
-})
-var mapyCZletecka = L.tileLayer(`https://api.mapy.cz/v1/maptiles/aerial/256/{z}/{x}/{y}?apikey=${API_KEY}`, {
-    minZoom: 0,
-    maxZoom: 19,
-    attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
-})
-// OpenStreetMap - base:
-var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-})
- 
-// Výchozí bod + podkladové mapy:
 var map = L.map('map', {
     center: [50.853501146, 14.8425], // Hrádek
     zoom: 13,
-    layers: [mapyCZ]
+    layers: [MapovePodklady.vychozi(podklady)]
 });
 
-// Rámeček s výběrem podkladů:
+var layerControl = L.control.layers(MapovePodklady.popisky(podklady)).addTo(map);
-var baseMaps = {
+MapovePodklady.logo(map, podklady);
-    "<span style='color: blue'>Mapy.cz</span>": mapyCZ,
-    "Mapy.cz (letecká)": mapyCZletecka,
-    "OpenStreetMap": osm
-};
-var layerControl = L.control.layers(baseMaps).addTo(map);
-
-/*
-We also require you to include our logo somewhere over the map.
-We create our own map control implementing a documented interface,
-that shows a clickable logo.
-See https://leafletjs.com/reference.html#control
-*/
-const LogoControl = L.Control.extend({
-    options: {
-        position: 'bottomleft',
-    },
-
-    onAdd: function (map) {
-        const container = L.DomUtil.create('div');
-        const link = L.DomUtil.create('a', '', container);
-
-        link.setAttribute('href', 'http://mapy.cz/');
-        link.setAttribute('target', '_blank');
-        link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />';
-        L.DomEvent.disableClickPropagation(link);
-
-        return container;
-    },
-});
-// finally we add our LogoControl to the map
-new LogoControl().addTo(map, {
-    layers: [mapyCZ, mapyCZletecka]
-});
 
 // futury:
 function onEachFeature(feature, layer) {

www/js/mapove-podklady.js

@@ -0,0 +1,101 @@
+// Sdílené podkladové mapy. Výchozí je OpenStreetMap, volbu drží cookie mapovyPodklad.
+(function (global) {
+    var COOKIE = 'mapovyPodklad';
+    var VYCHOZI = 'osm';
+    var API_KEY = 'Uw8gm6JPZpnT3GfNnh8adARpQI-WBGy6QaY9g6VhD74';
+
+    function ctiCookie(jmeno) {
+        var shoda = document.cookie.match(new RegExp('(?:^|; )' + jmeno + '=([^;]*)'));
+        if (!shoda) {
+            return '';
+        }
+        try {
+            return decodeURIComponent(shoda[1]);
+        } catch (e) {
+            return shoda[1];
+        }
+    }
+
+    function klic() {
+        var hodnota = ctiCookie(COOKIE);
+        if (hodnota === 'mapycz' || hodnota === 'mapycz-letecka') {
+            return hodnota;
+        }
+        return VYCHOZI;
+    }
+
+    function vytvor() {
+        return {
+            osm: L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            }),
+            mapycz: L.tileLayer('https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=' + API_KEY, {
+                minZoom: 0,
+                maxZoom: 19,
+                attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
+            }),
+            'mapycz-letecka': L.tileLayer('https://api.mapy.cz/v1/maptiles/aerial/256/{z}/{x}/{y}?apikey=' + API_KEY, {
+                minZoom: 0,
+                maxZoom: 19,
+                attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
+            }),
+        };
+    }
+
+    function vychozi(vrstvy) {
+        return vrstvy[klic()] || vrstvy[VYCHOZI];
+    }
+
+    function popisky(vrstvy) {
+        return {
+            'Mapy.cz': vrstvy.mapycz,
+            'Mapy.cz (letecká)': vrstvy['mapycz-letecka'],
+            'OpenStreetMap': vrstvy.osm,
+        };
+    }
+
+    function jeMapyCz(vrstva, vrstvy) {
+        return vrstva === vrstvy.mapycz || vrstva === vrstvy['mapycz-letecka'];
+    }
+
+    function logo(map, vrstvy) {
+        var control = new (L.Control.extend({
+            options: { position: 'bottomleft' },
+            onAdd: function () {
+                var container = L.DomUtil.create('div');
+                var link = L.DomUtil.create('a', '', container);
+                link.setAttribute('href', 'http://mapy.cz/');
+                link.setAttribute('target', '_blank');
+                link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" alt="Mapy.cz" />';
+                L.DomEvent.disableClickPropagation(link);
+                return container;
+            },
+        }))();
+
+        function obnov() {
+            var aktivni = false;
+            map.eachLayer(function (layer) {
+                if (jeMapyCz(layer, vrstvy)) {
+                    aktivni = true;
+                }
+            });
+            if (aktivni && !control._map) {
+                control.addTo(map);
+            } else if (!aktivni && control._map) {
+                control.remove();
+            }
+        }
+
+        map.on('baselayerchange', obnov);
+        obnov();
+    }
+
+    global.MapovePodklady = {
+        klic: klic,
+        vytvor: vytvor,
+        vychozi: vychozi,
+        popisky: popisky,
+        logo: logo,
+    };
+})(window);

www/js/obvod-nahled.js

@@ -11,33 +11,14 @@
         return;
     }
 
-    var API_KEY = 'Uw8gm6JPZpnT3GfNnh8adARpQI-WBGy6QaY9g6VhD74';
+    var podklady = MapovePodklady.vytvor();
-    var mapyCZ = L.tileLayer('https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=' + API_KEY, {
-        minZoom: 0,
-        maxZoom: 19,
-        attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
-    });
-
     var map = L.map(el, {
         center: [50.853501146, 14.8425],
         zoom: 14,
-        layers: [mapyCZ],
+        layers: [MapovePodklady.vychozi(podklady)],
         scrollWheelZoom: false,
     });
-
+    MapovePodklady.logo(map, podklady);
-    var LogoControl = L.Control.extend({
-        options: { position: 'bottomleft' },
-        onAdd: function () {
-            var container = L.DomUtil.create('div');
-            var link = L.DomUtil.create('a', '', container);
-            link.setAttribute('href', 'http://mapy.cz/');
-            link.setAttribute('target', '_blank');
-            link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" alt="Mapy.cz" />';
-            L.DomEvent.disableClickPropagation(link);
-            return container;
-        },
-    });
-    new LogoControl().addTo(map);
 
     function style() {
         return {

www/js/stari.js

@@ -116,47 +116,15 @@
         };
     }
 
-    var API_KEY = 'Uw8gm6JPZpnT3GfNnh8adARpQI-WBGy6QaY9g6VhD74';
+    var podklady = MapovePodklady.vytvor();
-    var mapyCZ = L.tileLayer('https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=' + API_KEY, {
-        minZoom: 0,
-        maxZoom: 19,
-        attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
-    });
-    var mapyCZletecka = L.tileLayer('https://api.mapy.cz/v1/maptiles/aerial/256/{z}/{x}/{y}?apikey=' + API_KEY, {
-        minZoom: 0,
-        maxZoom: 19,
-        attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
-    });
-    var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    });
-
     var map = L.map(mapaEl, {
         center: [50.853501146, 14.8425],
         zoom: 13,
-        layers: [mapyCZ],
+        layers: [MapovePodklady.vychozi(podklady)],
     });
 
-    L.control.layers({
+    L.control.layers(MapovePodklady.popisky(podklady)).addTo(map);
-        'Mapy.cz': mapyCZ,
+    MapovePodklady.logo(map, podklady);
-        'Mapy.cz (letecká)': mapyCZletecka,
-        'OpenStreetMap': osm,
-    }).addTo(map);
-
-    var LogoControl = L.Control.extend({
-        options: { position: 'bottomleft' },
-        onAdd: function () {
-            var container = L.DomUtil.create('div');
-            var link = L.DomUtil.create('a', '', container);
-            link.setAttribute('href', 'http://mapy.cz/');
-            link.setAttribute('target', '_blank');
-            link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" alt="Mapy.cz" />';
-            L.DomEvent.disableClickPropagation(link);
-            return container;
-        },
-    });
-    new LogoControl().addTo(map);
 
     var legendaEl = null;
     var Legenda = L.Control.extend({