MapExample/MapExample.html at main · iizydorc/MapExample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>

    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_b2abda5e2c9561d495e534847a55de81 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>

</head>
<body>


            <div class="folium-map" id="map_b2abda5e2c9561d495e534847a55de81" ></div>

</body>
<script>


            var map_b2abda5e2c9561d495e534847a55de81 = L.map(
                "map_b2abda5e2c9561d495e534847a55de81",
                {
                    center: [28.6139, 77.2088],
                    crs: L.CRS.EPSG3857,
                    zoom: 4,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );


            var tile_layer_f206b1a5a44a44d62cecab7bcaa190fd = L.tileLayer(
                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            );


            tile_layer_f206b1a5a44a44d62cecab7bcaa190fd.addTo(map_b2abda5e2c9561d495e534847a55de81);


            var marker_59c87ac0c8087f08a6896aa861248ede = L.marker(
                [28.6139, 77.2088],
                {}
            ).addTo(map_b2abda5e2c9561d495e534847a55de81);


            var icon_37434d8e66543b48e370fc148d6cdb5d = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "green", "prefix": "glyphicon"}
            );
            marker_59c87ac0c8087f08a6896aa861248ede.setIcon(icon_37434d8e66543b48e370fc148d6cdb5d);


        var popup_7b276d7c1581871c581249ae15e80643 = L.popup({"maxWidth": "100%"});


                var html_da8b909d49a41990d30acaa1db1a651c = $(`<div id="html_da8b909d49a41990d30acaa1db1a651c" style="width: 100.0%; height: 100.0%;">     <h1> New Delhi</h1><br>     This is where our website will include the journal lines referencing New Delhi.     <p>     </p>     </div>`)[0];
                popup_7b276d7c1581871c581249ae15e80643.setContent(html_da8b909d49a41990d30acaa1db1a651c);


        marker_59c87ac0c8087f08a6896aa861248ede.bindPopup(popup_7b276d7c1581871c581249ae15e80643)
        ;


            marker_59c87ac0c8087f08a6896aa861248ede.bindTooltip(
                `<div>
                     Click me!
                 </div>`,
                {"sticky": true}
            );


            var marker_3a887bb3b3a09574bf6f8135109cfc39 = L.marker(
                [28.6139, 85.5088],
                {}
            ).addTo(map_b2abda5e2c9561d495e534847a55de81);


            var icon_59ff52156c6308bc7ed9328ea975c596 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
            );
            marker_3a887bb3b3a09574bf6f8135109cfc39.setIcon(icon_59ff52156c6308bc7ed9328ea975c596);


        var popup_dc90bfa0b1da5f018e03e1829f460817 = L.popup({"maxWidth": "100%"});


                var html_3c6252253e03855a6b86b81cdc6d916b = $(`<div id="html_3c6252253e03855a6b86b81cdc6d916b" style="width: 100.0%; height: 100.0%;">     <h1> Somewhere directly east of New Delhi </h1><br>     Differing colors can indicate the differing number of times referenced     <p>     </p>     </div>`)[0];
                popup_dc90bfa0b1da5f018e03e1829f460817.setContent(html_3c6252253e03855a6b86b81cdc6d916b);


        marker_3a887bb3b3a09574bf6f8135109cfc39.bindPopup(popup_dc90bfa0b1da5f018e03e1829f460817)
        ;


            marker_3a887bb3b3a09574bf6f8135109cfc39.bindTooltip(
                `<div>
                     Click me!
                 </div>`,
                {"sticky": true}
            );


            tile_layer_f206b1a5a44a44d62cecab7bcaa190fd.addTo(map_b2abda5e2c9561d495e534847a55de81);

</script>
</html>