live map update
This commit is contained in:
Ivan
parent
03b36cc5a7
commit
50489b99c9
GPG Key ID:
0C191B86D9582583
20
server.js
20
server.js
@ -33,17 +33,17 @@ app.get("/devices/drivers", drivers);
|
|||||||
app.get("/devices/update", update);
|
app.get("/devices/update", update);
|
||||||
|
|
||||||
|
|
||||||
// const DB_User = process.env.DB_USER;
|
const DB_User = process.env.DB_USER;
|
||||||
// const DB_Password = process.env.DB_PASSWORD;
|
const DB_Password = process.env.DB_PASSWORD;
|
||||||
// const DB_Host = process.env.DB_HOST;
|
const DB_Host = process.env.DB_HOST;
|
||||||
// const DB_Port = process.env.DB_PORT;
|
const DB_Port = process.env.DB_PORT;
|
||||||
// const DB_Name = process.env.DB_NAME;
|
const DB_Name = process.env.DB_NAME;
|
||||||
|
|
||||||
const DB_User = "postgres";
|
// const DB_User = "postgres";
|
||||||
const DB_Password = process.env.POSTGRES_PASSWORD;
|
// const DB_Password = process.env.POSTGRES_PASSWORD;
|
||||||
const DB_Host = "postgres";
|
// const DB_Host = "postgres";
|
||||||
const DB_Port = "5432";
|
// const DB_Port = "5432";
|
||||||
const DB_Name = "postgres";
|
// const DB_Name = "postgres";
|
||||||
|
|
||||||
async function index(req, res) {
|
async function index(req, res) {
|
||||||
var templateData = {
|
var templateData = {
|
||||||
|
|||||||
@ -18,7 +18,6 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|||||||
@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<a class="selected" href="/devices">Список устройств</a>
|
<a class="selected" href="/devices">Список устройств</a>
|
||||||
<a href="/devices/drivers">Водители</a>
|
<!-- <a href="/devices/drivers">Водители</a> -->
|
||||||
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
||||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||||
|
|
||||||
|
|||||||
@ -54,7 +54,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/devices">Список устройств</a>
|
<a href="/devices">Список устройств</a>
|
||||||
<a href="/devices/drivers">Водители</a>
|
<!-- <a href="/devices/drivers">Водители</a> -->
|
||||||
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
<!-- <a href="/devices/newdevice">Добавить устройство</a> -->
|
||||||
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
<!-- <a href="/devices/newdriver">Добавить водителя</a> -->
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Трансляция</title>
|
<title>Трансляция</title>
|
||||||
<link rel="stylesheet" href="../styles/main.css" />
|
<link rel="stylesheet" href="../styles/main.css" />
|
||||||
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
|
<!-- <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
|
||||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -151,139 +153,7 @@
|
|||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
<!-- <li>
|
|
||||||
<input type="radio" name="signal" id="signal-1" hidden checked>
|
|
||||||
<label for="signal-1">
|
|
||||||
<h2>Водитель отвлекся</h2>
|
|
||||||
<span>ID 346</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 12:44</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.956626,30.234408</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Виталий Гаспарян</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 999 123 45 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-2" hidden>
|
|
||||||
<label for="signal-2">
|
|
||||||
<h2>Усталость</h2>
|
|
||||||
<span>ID 352</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 11:07</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.878256,30.31962</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Михаил Гукасян</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 909 133 55 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-3" hidden>
|
|
||||||
<label for="signal-3">
|
|
||||||
<h2>Разговор по телефону</h2>
|
|
||||||
<span>ID 349</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 11:17</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.959926,30.42224</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Валерий Сараев</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 909 123 45 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-4" hidden>
|
|
||||||
<label for="signal-4">
|
|
||||||
<h2>Курение за рулём</h2>
|
|
||||||
<span>ID 347</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 10:06</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.956626,30.234408</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Екатерина Миненко</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 909 133 55 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-5" hidden>
|
|
||||||
<label for="signal-5">
|
|
||||||
<h2>Водитель отвлекся</h2>
|
|
||||||
<span>ID 346</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 12:44</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.956626,30.234408</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Виталий Гаспарян</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 999 123 45 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-6" hidden>
|
|
||||||
<label for="signal-6">
|
|
||||||
<h2>Водитель отвлекся</h2>
|
|
||||||
<span>ID 346</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 12:44</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.956626,30.234408</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Виталий Гаспарян</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 999 123 45 67</p>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<input type="radio" name="signal" id="signal-7" hidden>
|
|
||||||
<label for="signal-7">
|
|
||||||
<h2>Водитель отвлекся</h2>
|
|
||||||
<span>ID 346</span>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
|
|
||||||
</svg>11-03-2023 12:44</p>
|
|
||||||
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
|
|
||||||
</svg>59.956626,30.234408</p>
|
|
||||||
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
|
|
||||||
</svg>Виталий Гаспарян</p>
|
|
||||||
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
|
|
||||||
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
|
|
||||||
</svg>+7 999 123 45 67</p>
|
|
||||||
</label>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -484,33 +354,124 @@
|
|||||||
const form = document.getElementById('devices-1');
|
const form = document.getElementById('devices-1');
|
||||||
|
|
||||||
form.addEventListener('change', () => {
|
form.addEventListener('change', () => {
|
||||||
const selectedDevices = Array.from(checkboxes)
|
// const selectedDevices = Array.from(checkboxes)
|
||||||
|
// .filter(checkbox => checkbox.checked && checkbox.value !== 'on')
|
||||||
|
// .map(checkbox => checkbox.value);
|
||||||
|
|
||||||
|
// console.log(selectedDevices);
|
||||||
|
|
||||||
|
// fetch('/devices-geo', {
|
||||||
|
// method: 'POST',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/json',
|
||||||
|
// },
|
||||||
|
// body: JSON.stringify({ devices: selectedDevices }),
|
||||||
|
// })
|
||||||
|
// .then(response => response.json())
|
||||||
|
// .then(data => {
|
||||||
|
// console.log(data.devicesData);
|
||||||
|
// updateMapMarkers(data.devicesData);
|
||||||
|
// })
|
||||||
|
// .catch(error => {
|
||||||
|
// console.error('Ошибка при отправке запроса:', error);
|
||||||
|
// });
|
||||||
|
fetchAndShowMarkers();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const map = new ol.Map({
|
||||||
|
target: 'map',
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.OSM() // Источник OpenStreetMap
|
||||||
|
})
|
||||||
|
],
|
||||||
|
view: new ol.View({
|
||||||
|
center: ol.proj.fromLonLat([30.282995, 59.855198]), // Преобразование координат в EPSG:3857
|
||||||
|
zoom: 10
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const markers = [];
|
||||||
|
{{#if ifDBError}}
|
||||||
|
{{else}}
|
||||||
|
|
||||||
|
const selectedDevices = Array.from(checkboxes)
|
||||||
.filter(checkbox => checkbox.checked && checkbox.value !== 'on')
|
.filter(checkbox => checkbox.checked && checkbox.value !== 'on')
|
||||||
.map(checkbox => checkbox.value);
|
.map(checkbox => checkbox.value);
|
||||||
|
|
||||||
console.log(selectedDevices);
|
function addMarker(device) {
|
||||||
|
const { serial, status, longitude, latitude, direction, speed } = device;
|
||||||
|
|
||||||
fetch('/devices-geo', {
|
const markerElement = document.createElement('div');
|
||||||
|
markerElement.className = 'marker';
|
||||||
|
if (serial === $("input[name=camera-serial]:checked").val()) {
|
||||||
|
markerElement.innerHTML = `
|
||||||
|
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||||
|
<path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/>
|
||||||
|
<path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/>
|
||||||
|
</svg><br><span class="speed active-${status}">${speed} км/ч</span>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
markerElement.innerHTML = `
|
||||||
|
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
|
||||||
|
<path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
|
||||||
|
<path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
|
||||||
|
</svg><br><span class="speed active-${status}">${speed} км/ч</span>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const marker = new ol.Overlay({
|
||||||
|
position: ol.proj.fromLonLat([longitude, latitude]),
|
||||||
|
positioning: 'center-center',
|
||||||
|
element: markerElement,
|
||||||
|
stopEvent: false
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addOverlay(marker);
|
||||||
|
markers.push(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearMarkers() {
|
||||||
|
markers.forEach(marker => map.removeOverlay(marker));
|
||||||
|
markers.length = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchAndShowMarkers() {
|
||||||
|
fetch('/devices-geo', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ devices: selectedDevices }),
|
body: JSON.stringify({ devices: selectedDevices }),
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
console.log(data.devicesData);
|
console.log(data.devicesData);
|
||||||
updateMapMarkers(data.devicesData);
|
clearMarkers();
|
||||||
})
|
data.devicesData.forEach(device => {
|
||||||
.catch(error => {
|
addMarker(device);
|
||||||
console.error('Ошибка при отправке запроса:', error);
|
});
|
||||||
});
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Ошибка при получении данных:', error);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
// Инициализация карты
|
||||||
|
fetchAndShowMarkers();
|
||||||
|
// Обновление маркеров каждые 12 секунд (12000 миллисекунд)
|
||||||
|
setInterval(fetchAndShowMarkers, 12000);
|
||||||
|
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<!-- <script>
|
||||||
mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
|
mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
|
||||||
const map = new mapboxgl.Map({
|
const map = new mapboxgl.Map({
|
||||||
container: 'map',
|
container: 'map',
|
||||||
@ -627,7 +588,7 @@ setInterval(() => {
|
|||||||
});
|
});
|
||||||
}, 12000);
|
}, 12000);
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</script>
|
</script> -->
|
||||||
|
|
||||||
<!-- <script>
|
<!-- <script>
|
||||||
const panel = document.getElementById('signals-list');
|
const panel = document.getElementById('signals-list');
|
||||||
|
|||||||
@ -6,6 +6,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Отчёты</title>
|
<title>Отчёты</title>
|
||||||
<link rel="stylesheet" href="../styles/main.css" />
|
<link rel="stylesheet" href="../styles/main.css" />
|
||||||
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
|
||||||
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -165,54 +167,49 @@
|
|||||||
|
|
||||||
<video id="my-video" src="../test_video.MP4"></video>
|
<video id="my-video" src="../test_video.MP4"></video>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div class="map">
|
||||||
|
<div id="map"></div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#map {
|
.map {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: calc(100% - 450px - 514px);
|
width: calc(100% - 450px - 514px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: right;
|
float: right;
|
||||||
|
border-radius: 0 10px 10px 0 !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- <div id="map"></div> -->
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function initMap() {
|
mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
|
||||||
// Координаты начальной точки
|
const map = new mapboxgl.Map({
|
||||||
var startPoint = L.latLng(55.769042, 37.647840);
|
container: 'map',
|
||||||
// Координаты конечной точки
|
style: 'mapbox://styles/ppechenkoo/clkwfa6wu00ck01qgcrm93msr',
|
||||||
var endPoint = L.latLng(55.769723, 37.659341);
|
center: [30.282995, 59.855198], // Задайте начальные координаты карты
|
||||||
|
zoom: 10, // Задайте начальный уровень масштабирования карты
|
||||||
// Создание объекта карты
|
});
|
||||||
var map = L.map('map').setView(startPoint, 12);
|
|
||||||
|
|
||||||
// Добавление слоя OpenStreetMap
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
// Прокладка маршрута
|
|
||||||
var control = L.Routing.control({
|
|
||||||
waypoints: [
|
|
||||||
startPoint,
|
|
||||||
endPoint
|
|
||||||
],
|
|
||||||
routeWhileDragging: true,
|
|
||||||
show: false,
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
// Удаление кнопки виджета маршрута
|
|
||||||
document.querySelector('.leaflet-routing-container').style.display = 'none';
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<script>initMap();</script>
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var mapContainer = document.querySelector('.map');
|
||||||
|
var mapArea = document.getElementById('map');
|
||||||
|
|
||||||
|
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
||||||
|
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", function (event) {
|
||||||
|
var mapContainer = document.querySelector('.map');
|
||||||
|
var mapArea = document.getElementById('map');
|
||||||
|
|
||||||
|
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
||||||
|
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user