Untitled

import { latitude, longitude } from './Locations';
var truck = L.icon({
    iconUrl:
        'https://s...content-available-to-author-only...n.net/v/t1.15752-9/274303140_486217459624427_7423855428849770381_n.png?_nc_cat=110&ccb=1-5&_nc_sid=ae9488&_nc_ohc=_BNcEq5HufwAX9HmVP9&_nc_ht=scontent.fhan5-8.fna&oh=03_AVKiHJ03VXmQP5i3Q9QGG_Y0WtAOgdPtO5SJGIHM5UAr3w&oe=626416CF',
    iconSize: [30, 40],
});
var greenBin = L.icon({
    iconUrl:
        'https://s...content-available-to-author-only...n.net/v/t1.15752-9/274180814_2024737961027798_4029408788282239182_n.png?_nc_cat=110&ccb=1-5&_nc_sid=ae9488&_nc_ohc=dwuFAVSD6EwAX_WEMSs&tn=UIEpDxDqmkxUKWpR&_nc_ht=scontent.fhan5-8.fna&oh=03_AVK_zwH2nMDeiJjIIbqWtQXZWcTxz1KXbsYig1dy1IEpvg&oe=62610860',
    iconSize: [30, 40],
});
var yellowBin = L.icon({
    iconUrl:
        'https://s...content-available-to-author-only...n.net/v/t1.15752-9/274728106_651673209125563_3080891151811528082_n.png?_nc_cat=107&ccb=1-5&_nc_sid=ae9488&_nc_ohc=UkYDs-1nnm0AX8WERnk&_nc_ht=scontent.fhan5-6.fna&oh=03_AVJXQsoVHTL2CrvvhpvPk6VkDa0ukZ59FnQKNnurOndsng&oe=6264515B',
    iconSize: [30, 40],
});
var redBin = L.icon({
    iconUrl:
        'https://s...content-available-to-author-only...n.net/v/t1.15752-9/274681202_1354205045055853_5026569908981328898_n.png?_nc_cat=106&ccb=1-5&_nc_sid=ae9488&_nc_ohc=R6bVEAYhUrEAX9pMz7m&_nc_ht=scontent.fhan5-3.fna&oh=03_AVLtGZlWQo2uKa_M0tUX43QCjznWz-IQ_Jcb7gnMWJ25Rg&oe=62623A3A',
    iconSize: [30, 40],
});
const dataBin = [
    { lat: 20.987526381534117, long: 105.73999171331396, status: 1 },
    { lat: 20.930963734979255, long: 105.71729415333051, status: 2 },
    { lat: 20.949091602509764, long: 105.75703004499327, status: 3 },
    { lat: 20.93735915800732, long: 105.7832296926063, status: 1 },
    { lat: 20.99087066391052, long: 105.7963953771713, status: 2 },
];
let i = 0;
var bin;
const html_script = `
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <link
            rel="stylesheet"
            href="https://u...content-available-to-author-only...g.com/leaflet@1.7.1/dist/leaflet.css"
            integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
            crossorigin=""
        />

        <link
            rel="stylesheet"
            href="https://u...content-available-to-author-only...g.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css"
        />

        <link
            rel="stylesheet"
            type="text/css"
            href="https://c...content-available-to-author-only...s.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.css"
        />
    </head>
    <body>
        <div id="map"></div>

        <div class="pointer"></div>

        <script
            src="https://u...content-available-to-author-only...g.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""
        ></script>

        <script src="https://u...content-available-to-author-only...g.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

        <script src="https://c...content-available-to-author-only...s.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script>
        <script src="https://c...content-available-to-author-only...s.com/esri-leaflet-geocoder/0.0.1-beta.5/esri-leaflet-geocoder.js"></script>

        <!-- <script src="main.js"></script> -->
        <style>
            body,
            html {
                height: 100%;
                font-family: Arial;
            }

            #map {
                width: 100%;
                height: 100%;
                z-index: 100;
            }

            .pointer {
                position: absolute;
                top: 86px;
                left: 60px;
                z-index: 99999;
            }
            .leaflet-control-zoom {
                display: none;
            }

            .leaflet-touch .geocoder-control {
                width: 275px;
                height: 30px;
                /* border-radius: 30%; */
            }
            /* .leaflet-control-layers .leaflet-control .leaflet-control-layers-expanded{
        bottom: 0;
      } */
        </style>
    </body>
</html>

<script>
    var map = L.map('map', {
        center: [20.980519225977506, 105.78792801627205],
        zoom: 12,
    });
    var mylayers = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution:
            '&copy; <a href="http://o...content-available-to-author-only...m.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
</script>
`;
export default html_script;