Menu a zobrazení jednoho obvodu.

app/Presentation/Home/default.latte

@@ -4,7 +4,8 @@
 <h3>Seznam obvodů</h3>
 
 <div class="list-group" style="max-width: 200px">
+<a n:href=":Obvody:" class="list-group-item list-group-item-action">Všechny obvody</a>
 {foreach $obvody as $obvod}
-    <a n:href=":Obvody: id:$obvod" class="list-group-item list-group-item-action">{$obvod}</a>
+    <a n:href=":Obvody: obvod:$obvod" class="list-group-item list-group-item-action">{$obvod}</a>
 {/foreach}
 </div>

app/Presentation/Obvody/ObvodyPresenter.php

@@ -15,6 +15,6 @@ final class ObvodyPresenter extends Nette\Application\UI\Presenter
 
     public function renderDefault(int $obvod = null): void
     {
-        
+        $this->template->obvod_id = $obvod;
     }
 }

app/Presentation/Obvody/default.latte

@@ -3,6 +3,9 @@
 {block content}
 <div id="map"></div>
  
+<script type="text/javascript">
+    var obvod_id = {$obvod_id};
+</script>
 
 <script src="{$basePath}/js/mapa.js"></script>
 <script src="{$basePath}/js/obvody.js"></script> 

www/js/mapa.js

@@ -36,7 +36,7 @@ var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
 // Výchozí bod:
 var map = L.map('map', {
-    center: [50.853501146, 14.8425],
+    center: [50.853501146, 14.8425], // Hrádek
     zoom: 16,
     layers: [mapyCZ, osm]
 });

www/js/obvody.js

@@ -12,11 +12,22 @@ $.ajax({
 var geojson;
 geojson = L.geoJSON(geojsonFeature, {
   style: style,
+  filter: picnicFilter,
   onEachFeature: onEachFeature
 }).addTo(map);
 
+function picnicFilter(feature) {
+  // obvod ID je z latte obvod_id
+  if (obvod_id == null) return true;
+  if (feature.properties.number == obvod_id) return true
+}
+
+// center na vybraný obvod: 
+map.flyToBounds(geojson.getBounds());
+
+
 // geolokace:
-map.locate({ setView: true, maxZoom: 16 });
+map.locate({ setView: false, maxZoom: 16 });
 
 function onLocationFound(e) {
   var radius = e.accuracy;