První obvody v Hrádku.

master
Kowalski 2025-03-05 15:02:49 +01:00
parent 7317e7ca3a
commit bd30fd5d32
9 changed files with 11420 additions and 29 deletions

View File

@ -4,7 +4,29 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>{ifset title}{include title|stripHtml} | {/ifset}Nette Web</title> {* bootstrap: *}
<link href="{$basePath}/css/bootstrap.min.css" rel="stylesheet">
<script src="{$basePath}/js/bootstrap.bundle.min.js"></script>
{* LeafLet: *}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
{* jquery *}
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
{* naše vlastní styly *}
<link href="{$basePath}/css/base.css" rel="stylesheet">
<title>{ifset title}{include title|stripHtml} | {/ifset}Obvody</title>
</head> </head>
<body> <body>

View File

@ -2,37 +2,13 @@
{block content} {block content}
<div id="banner"> <div id="banner">
<h1 n:block=title>Congratulations!</h1> <h1 n:block=title>Mapa</h1>
</div> </div>
<div id="content"> <div id="content">
<h2>You have successfully created your <a href="https://nette.org">Nette</a> Web project.</h2>
<p><img src="data:image/png;base64,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" alt=""> <div id="map"></div>
If you are exploring Nette for the first time, you should read the
<a href="https://doc.nette.org/quickstart">Quick Start</a>, <a href="https://doc.nette.org">documentation</a>,
<a href="https://blog.nette.org">blog</a> and <a href="https://forum.nette.org">forum</a>.</p>
<h2>We hope you enjoy Nette!</h2>
</div> </div>
<style> <script src="{$basePath}/js/mapa.js"></script>
html { font: normal 18px/1.3 Georgia, "New York CE", utopia, serif; color: #666; -webkit-text-stroke: 1px rgba(0,0,0,0); overflow-y: scroll; } <script src="{$basePath}/js/obvody.js"></script>
body { background: #3484d2; color: #333; margin: 2em auto; padding: 0 .5em; max-width: 600px; min-width: 320px; }
a { color: #006aeb; padding: 3px 1px; }
a:hover, a:active, a:focus { background-color: #006aeb; text-decoration: none; color: white; }
#banner { border-radius: 12px 12px 0 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB5CAMAAADPursXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGBQTFRFD1CRDkqFDTlmDkF1D06NDT1tDTNZDk2KEFWaDTZgDkiCDTtpDT5wDkZ/DTBVEFacEFOWD1KUDTRcDTFWDkV9DkR7DkN4DkByDTVeDC9TDThjDTxrDkeADkuIDTRbDC9SbsUaggAAAEdJREFUeNqkwYURgAAQA7DH3d3335LSKyxAYpf9vWCpnYbf01qcOdFVXc14w4BznNTjkQfsscAdU3b4wIh9fDVYc4zV8xZgAAYaCMI6vPgLAAAAAElFTkSuQmCC); }
h1 { font: inherit; color: white; font-size: 50px; line-height: 121px; margin: 0; padding-left: 4%; background: url(https://files.nette.org/images/logo-nette@2.png) no-repeat 95%; background-size: 130px auto; text-shadow: 1px 1px 0 rgba(0, 0, 0, .9); }
@media (max-width: 600px) {
h1 { background: none; font-size: 40px; }
}
#content { background: white; border: 1px solid #eff4f7; border-radius: 0 0 12px 12px; padding: 10px 4%; overflow: hidden; }
h2 { font: inherit; padding: 1.2em 0; margin: 0; }
img { border: none; float: right; margin: 0 0 1em 3em; }
</style>

1
www/css/base.css Normal file
View File

@ -0,0 +1 @@
#map { height: 720px; }

11109
www/css/bootstrap.min.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
www/js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

101
www/js/mapa.js Normal file
View File

@ -0,0 +1,101 @@
// Mapy.CZ:
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>',
})
/*
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;
},
});
// OpenStreetMap:
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:
var map = L.map('map', {
center: [50.853501146, 14.8425],
zoom: 16,
layers: [mapyCZ, osm]
});
// Rámeček s výběrem podkladů:
var baseMaps = {
"<span style='color: blue'>Mapy.cz</span>": mapyCZ,
"OpenStreetMap": osm
};
var layerControl = L.control.layers(baseMaps).addTo(map);
// finally we add our LogoControl to the map
new LogoControl().addTo(map, {
layers: [osm, mapyCZ]
});
// futury:
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.number) {
layer.bindPopup("Obvod č. "+feature.properties.number.toString());
}
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
// futury - interakce:
function style(feature) {
return {
fillColor: '#FD8D3C',
weight: 2,
opacity: 1,
color: 'blue',
dashArray: '3',
fillOpacity: 0.2
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.5
});
layer.bringToFront();
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}

173
www/js/obvody.js Normal file
View File

@ -0,0 +1,173 @@
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"number": 30
},
"geometry": {
"coordinates": [
[
[
14.841565868715634,
50.855586568425565
],
[
14.841862978449456,
50.85495568524914
],
[
14.842016034979025,
50.854444152084426
],
[
14.842133078208576,
50.85346653976222
],
[
14.842763310977261,
50.853534745937964
],
[
14.843520482859333,
50.853660536230024
],
[
14.843762804242246,
50.85369806107373
],
[
14.843897729961952,
50.85365410650587
],
[
14.84477105251392,
50.85374504768558
],
[
14.845788428270168,
50.85375073150345
],
[
14.845671385041697,
50.85560930279513
],
[
14.843960753238832,
50.85570592374205
],
[
14.843033410735245,
50.8556661386705
],
[
14.841565868715634,
50.855586568425565
]
]
],
"type": "Polygon"
}
},
{
"type": "Feature",
"properties": {
"number": 31
},
"geometry": {
"coordinates": [
[
[
14.842136029909085,
50.85346144548936
],
[
14.842079903636858,
50.85317700714876
],
[
14.841739714298683,
50.85292228533899
],
[
14.84185093080771,
50.852139576618924
],
[
14.842098837460433,
50.85184432094401
],
[
14.842377037185244,
50.851558627698495
],
[
14.842662960004368,
50.8512982658542
],
[
14.84302972564214,
50.85095769995354
],
[
14.843971179858215,
50.850083607142096
],
[
14.84391580019846,
50.849878817313055
],
[
14.84435092609624,
50.849694006208296
],
[
14.844524976455318,
50.849843853106165
],
[
14.844888904499726,
50.85053314194968
],
[
14.844817702080093,
50.85107757358222
],
[
14.844786056560253,
50.85249106824543
],
[
14.844276906104568,
50.853057507786644
],
[
14.84390337681711,
50.85365358760171
],
[
14.843762702127094,
50.853698971467395
],
[
14.842708351615471,
50.853526184519055
],
[
14.842136029909085,
50.85346144548936
]
]
],
"type": "Polygon"
}
}
]
}
var geojson;
geojson = L.geoJSON(geojsonFeature, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);