<%@ page language="C#" autoeventwireup="true" inherits="Forms_LocalMap, App_Web_kob0wgzu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>how to create map </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../OfflineMap/leaflet.css" />
    <style type="text/css">
        .leaflet-container {
            background-color: #c5e8ff;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <style>
            .info {
                padding: 6px 8px;
                font: 14px/16px Arial, Helvetica, sans-serif;
                background: white;
                background: rgba(255,255,255,0.8);
                box-shadow: 0 0 15px rgba(0,0,0,0.2);
                border-radius: 5px;
            }

                .info h4 {
                    margin: 0 0 5px;
                    color: #777;
                }

            .legend {
                text-align: left;
                line-height: 18px;
                color: #555;
            }

                .legend i {
                    width: 18px;
                    height: 18px;
                    float: left;
                    margin-right: 8px;
                    opacity: 0.7;
                }
        </style>
        <div id="map" style="width: 100%; height: 100%"></div>
        <script src="../OfflineMap/jquery-1.10.2.min.js"></script>
        <link href="../OfflineMap/walid.css" rel="stylesheet" />
        <script src="../OfflineMap/dist/leaflet.js"></script>
        <script src="../OfflineMap/dist/leaflet.rotatedMarker.js"></script>
        <link href="../OfflineMap/src/Icon.Label.css" rel="stylesheet" />
        <script src="../OfflineMap/src/Icon.Label.js"></script>
        <script src="../OfflineMap/src/Icon.Label.Default.js"></script>
        <script>
            var map = L.map('map').setView([25.138844674785265, 55.275999298267614], 10);

            map.attributionControl.addAttribution('&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors & Develop by &copy; <a href="https://edafait.com/">walid abdelazeem</a>');
            L.tileLayer('../OfflineMap/dubai/{z}/{x}/{y}.png', {
                maxZoom: 13,
                minZoom: 3,
                tileSize: 512,
                zoomOffset: -1
            }).addTo(map);

            var LeafIcon = L.Icon.extend({
                options: {
                    //shadowUrl: 'Marker/leaf-shadow.png',
                    iconSize: [38, 95],
                    shadowSize: [50, 64],
                    iconAnchor: [22, 94],
                    shadowAnchor: [4, 62],
                    popupAnchor: [-3, -76]
                }
            });
            var greenIcon = new LeafIcon({ iconUrl: '../OfflineMap/Marker/Generator.png' });
            var greenIcon1 = new LeafIcon({ iconUrl: '../OfflineMap/Marker/Generator.png' });
            L.marker([25.007963299222816, 54.98735882128552], { icon: greenIcon }).addTo(map)
                .bindPopup("<b>Hello world!</b><br />I am a popup in EGYPT.").openPopup();
            //.bindPopup("<b>Hello world!</b><br />I am a popup in EGYPT <br /> <img src='Marker/leaf-green.png' />.").openPopup();
            L.marker([25.379937188941874, 55.87125846862982], { icon: greenIcon1 }).addTo(map)
                .bindPopup("<b>Hello world!</b><br />I am a popup in EGYPT.").openPopup();
            //.bindPopup("<b>Hello world!</b><br />I am a popup in EGYPT <br /> <img src='Marker/leaf-green.png' />.").openPopup();

            var LeafIcon_2 = L.Icon.extend({
                options: {
                    iconSize: [50, 82],
                    shadowSize: [50, 64],
                    iconAnchor: [22, 94],
                    shadowAnchor: [4, 62],
                    popupAnchor: [-3, -76]
                }
            });
            //var markers_icon = new LeafIcon_2({ iconUrl: 'Marker/marker-icon-2x.png' });
            //L.marker([-26.64991293944776, 153.06281312253793], { icon: markers_icon }).addTo(map)
            //    .bindPopup("<b>Hello world !</b><br />I am a popup in AUST.").openPopup();
            //        var icon = L.Icon.Label.extend({
            //    options: {
            //        iconUrl: '1.png',
            //        shadowUrl: null,
            //        iconSize: new L.Point(0, 0),
            //        iconAnchor: new L.Point(0, 1),
            //        labelAnchor: new L.Point(-136, -3),
            //        wrapperAnchor: new L.Point(12, 13),
            //        labelClassName: 'my-label_gov'
            //    }
            //});
            //function onLocationFound(e) {
            //   var radius = e.accuracy / 2;
            //   L.marker(e.latlng, { icon: new icon() }).addTo(map)
            //      .bindPopup("You are within " + radius + " meters from this point").openPopup();
            //    L.circle(e.latlng, radius).addTo(map);
            //}
            //function onLocationError(e) {
            //    alert(e.message);
            //}
            //map.on('locationfound', onLocationFound);
            //map.on('locationerror', onLocationError);
            //map.locate({ setView: true, maxZoom: 13 });
        </script>
    </form>
</body>
</html>
