Додана сторінка "Розклад зібрань"
Перероблен генератор карточок територій APІ
This commit is contained in:
199
web/map.html
Normal file
199
web/map.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://sheep-service.com/lib/components/leaflet/leaflet.css" />
|
||||
<script src="https://sheep-service.com/lib/components/leaflet/leaflet.js"></script>
|
||||
|
||||
<script src="https://sheep-service.com/lib/components/qrcode.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
outline: none;
|
||||
}
|
||||
#content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#content > #title {
|
||||
width: calc(100% - 30px);
|
||||
min-height: 120px;
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
}
|
||||
#content > #title > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
#content > #title > h1 {
|
||||
font-size: 65px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
#content > #title > div > h2 {
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
#content > #title > div > h3 {
|
||||
font-size: 38px;
|
||||
font-weight: 500;
|
||||
margin: 0px 0 10px 0;
|
||||
}
|
||||
|
||||
#qrcode {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 20px;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 150px;
|
||||
width: 10px;
|
||||
height: calc(100% - 150px);
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.line-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 150px;
|
||||
width: 10px;
|
||||
height: calc(100% - 150px);
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.line-bottom {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 20px);
|
||||
height: 150px;
|
||||
background: rgb(255 255 255 / 51%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
#map {
|
||||
height: 531px; width: 811px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="title">
|
||||
<div>
|
||||
<h3>Картка плану території</h3>
|
||||
<h2 id="address"></h2>
|
||||
</div>
|
||||
<h1 id="number"></h1>
|
||||
</div>
|
||||
|
||||
<div id="qrcode"></div>
|
||||
|
||||
<div class="line-left"></div>
|
||||
<div class="line-right"></div>
|
||||
<div class="line-bottom"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
let googleHybrid = L.tileLayer(
|
||||
"http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}",
|
||||
{
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
subdomains: ["mt0", "mt1", "mt2", "mt3"],
|
||||
}
|
||||
);
|
||||
|
||||
let osm = L.tileLayer(
|
||||
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{}
|
||||
);
|
||||
|
||||
let mytile = L.tileLayer(
|
||||
"https://sheep-service.com/map/{z}/{x}/{y}.webp",
|
||||
{
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
tms: true,
|
||||
}
|
||||
);
|
||||
|
||||
let map = L.map("map", {
|
||||
renderer: L.canvas(),
|
||||
center: [49.56090195025773, 25.623682250000012],
|
||||
zoom: 20,
|
||||
zoomControl: false,
|
||||
layers: [googleHybrid, osm, mytile],
|
||||
});
|
||||
|
||||
let baseMaps = {
|
||||
"Google Hybrid": googleHybrid,
|
||||
OpenStreetMap: osm,
|
||||
"Sheep Service Map": mytile,
|
||||
};
|
||||
|
||||
let type = "house";
|
||||
|
||||
let polygonOptions =
|
||||
type === "homestead"
|
||||
? {
|
||||
color: "#f2bd53",
|
||||
radius: 500,
|
||||
fillOpacity: 0.3,
|
||||
dashArray: "20,15",
|
||||
dashOffset: "20",
|
||||
}
|
||||
: {
|
||||
color: "#585858",
|
||||
fillColor: "#f2bd53",
|
||||
fillOpacity: 0.8,
|
||||
};
|
||||
|
||||
let polygon = L.polygon(
|
||||
[
|
||||
[49.5609183, 25.623816],
|
||||
[49.5608184, 25.6237487],
|
||||
[49.5608394, 25.6236746],
|
||||
[49.5607433, 25.6236089],
|
||||
[49.5608009, 25.6234088],
|
||||
[49.5609008, 25.6234771],
|
||||
[49.560879, 25.623553],
|
||||
[49.5609804, 25.6236213],
|
||||
[49.5609591, 25.6236963],
|
||||
[49.5610606, 25.6237647],
|
||||
[49.5610065, 25.6239557],
|
||||
[49.5608992, 25.6238834],
|
||||
],
|
||||
polygonOptions
|
||||
).addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user