200 lines
4.8 KiB
HTML
200 lines
4.8 KiB
HTML
<!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>
|