Hugging Face's logo

Spaces:
ArielKes
/
RoutePlannerApp
Sleeping

App Files Community
RoutePlannerApp
File size: 10,207 Bytes
228d915
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!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_032557809d7a4dea92d5f1f5e3822985 {
                    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_032557809d7a4dea92d5f1f5e3822985" ></div>
        
</body>
<script>
    
    
            var map_032557809d7a4dea92d5f1f5e3822985 = L.map(
                "map_032557809d7a4dea92d5f1f5e3822985",
                {
                    center: [32.814268, 35.488181],
                    crs: L.CRS.EPSG3857,
                    ...{
  "zoom": 10,
  "zoomControl": true,
  "preferCanvas": false,
}

                }
            );

            

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

            );
        
    
            tile_layer_7df4869bb9b7e3166a194baa9e37f887.addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
    
            var marker_814ce55a8061a1fb2362904f61577340 = L.marker(
                [32.814268, 35.488181],
                {
}
            ).addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
    
            var div_icon_b977ab13a3cd91a695e03d4802a00f83 = L.divIcon({
  "html": "\n                \u003cdiv style=\"\n                    background-color: #28a745;\n                    color: white;\n                    border-radius: 50%;\n                    text-align: center;\n                    font-size: 14px;\n                    width: 30px;\n                    height: 30px;\n                    line-height: 30px;\n                    border: 2px solid white;\"\u003e\n                    1\n                \u003c/div\u003e\n            ",
  "iconSize": [30, 30],
  "iconAnchor": [15, 15],
  "className": "empty",
});
            marker_814ce55a8061a1fb2362904f61577340.setIcon(div_icon_b977ab13a3cd91a695e03d4802a00f83);
        
    
        var popup_ab803584d5c238e75c1d7c4a3b0cc7cf = L.popup({
  "maxWidth": "100%",
});

        
            
                var html_86979bf997aedcf69319cb1e71273396 = $(`<div id="html_86979bf997aedcf69319cb1e71273396" style="width: 100.0%; height: 100.0%;">1. v1 (start)</div>`)[0];
                popup_ab803584d5c238e75c1d7c4a3b0cc7cf.setContent(html_86979bf997aedcf69319cb1e71273396);
            
        

        marker_814ce55a8061a1fb2362904f61577340.bindPopup(popup_ab803584d5c238e75c1d7c4a3b0cc7cf)
        ;

        
    
    
                marker_814ce55a8061a1fb2362904f61577340.setIcon(div_icon_b977ab13a3cd91a695e03d4802a00f83);
            
    
            var marker_d307494adb80dd7d39a9f4c91d713b4e = L.marker(
                [32.802768, 35.006878],
                {
}
            ).addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
    
            var div_icon_37edf19e050c848518253b29be06f5b1 = L.divIcon({
  "html": "\n                \u003cdiv style=\"\n                    background-color: #007bff;\n                    color: white;\n                    border-radius: 50%;\n                    text-align: center;\n                    font-size: 14px;\n                    width: 30px;\n                    height: 30px;\n                    line-height: 30px;\n                    border: 2px solid white;\"\u003e\n                    2\n                \u003c/div\u003e\n            ",
  "iconSize": [30, 30],
  "iconAnchor": [15, 15],
  "className": "empty",
});
            marker_d307494adb80dd7d39a9f4c91d713b4e.setIcon(div_icon_37edf19e050c848518253b29be06f5b1);
        
    
        var popup_9a8311d86c5f7feb2aea8feee7d7b958 = L.popup({
  "maxWidth": "100%",
});

        
            
                var html_e2579899cf4982557a539fc4d5f889a3 = $(`<div id="html_e2579899cf4982557a539fc4d5f889a3" style="width: 100.0%; height: 100.0%;">2. s3 (service)</div>`)[0];
                popup_9a8311d86c5f7feb2aea8feee7d7b958.setContent(html_e2579899cf4982557a539fc4d5f889a3);
            
        

        marker_d307494adb80dd7d39a9f4c91d713b4e.bindPopup(popup_9a8311d86c5f7feb2aea8feee7d7b958)
        ;

        
    
    
                marker_d307494adb80dd7d39a9f4c91d713b4e.setIcon(div_icon_37edf19e050c848518253b29be06f5b1);
            
    
            var marker_b670e2995dfe5038e92e942bc31e058e = L.marker(
                [32.460452, 35.047826],
                {
}
            ).addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
    
            var div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297 = L.divIcon({
  "html": "\n                \u003cdiv style=\"\n                    background-color: #007bff;\n                    color: white;\n                    border-radius: 50%;\n                    text-align: center;\n                    font-size: 14px;\n                    width: 30px;\n                    height: 30px;\n                    line-height: 30px;\n                    border: 2px solid white;\"\u003e\n                    3\n                \u003c/div\u003e\n            ",
  "iconSize": [30, 30],
  "iconAnchor": [15, 15],
  "className": "empty",
});
            marker_b670e2995dfe5038e92e942bc31e058e.setIcon(div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297);
        
    
        var popup_889ddb2d7b467cb956d9cdfaa4ef3c90 = L.popup({
  "maxWidth": "100%",
});

        
            
                var html_4bb5217cfee9fca021597169034da718 = $(`<div id="html_4bb5217cfee9fca021597169034da718" style="width: 100.0%; height: 100.0%;">3. s1 (service)</div>`)[0];
                popup_889ddb2d7b467cb956d9cdfaa4ef3c90.setContent(html_4bb5217cfee9fca021597169034da718);
            
        

        marker_b670e2995dfe5038e92e942bc31e058e.bindPopup(popup_889ddb2d7b467cb956d9cdfaa4ef3c90)
        ;

        
    
    
                marker_b670e2995dfe5038e92e942bc31e058e.setIcon(div_icon_a3bfb08ee3ff9856b6c3d036d6aa1297);
            
    
            var marker_c1b59c0d14a598a246351e28ef3d3451 = L.marker(
                [32.008725, 35.127033],
                {
}
            ).addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
    
            var div_icon_a771342ba853ff7e4124cd25cd13c3b0 = L.divIcon({
  "html": "\n                \u003cdiv style=\"\n                    background-color: #007bff;\n                    color: white;\n                    border-radius: 50%;\n                    text-align: center;\n                    font-size: 14px;\n                    width: 30px;\n                    height: 30px;\n                    line-height: 30px;\n                    border: 2px solid white;\"\u003e\n                    4\n                \u003c/div\u003e\n            ",
  "iconSize": [30, 30],
  "iconAnchor": [15, 15],
  "className": "empty",
});
            marker_c1b59c0d14a598a246351e28ef3d3451.setIcon(div_icon_a771342ba853ff7e4124cd25cd13c3b0);
        
    
        var popup_18bf89254577ae6a32a47f9444bc0d07 = L.popup({
  "maxWidth": "100%",
});

        
            
                var html_41d214c7be2b7578fb56f71278aa303b = $(`<div id="html_41d214c7be2b7578fb56f71278aa303b" style="width: 100.0%; height: 100.0%;">4. s2 (service)</div>`)[0];
                popup_18bf89254577ae6a32a47f9444bc0d07.setContent(html_41d214c7be2b7578fb56f71278aa303b);
            
        

        marker_c1b59c0d14a598a246351e28ef3d3451.bindPopup(popup_18bf89254577ae6a32a47f9444bc0d07)
        ;

        
    
    
                marker_c1b59c0d14a598a246351e28ef3d3451.setIcon(div_icon_a771342ba853ff7e4124cd25cd13c3b0);
            
    
            var poly_line_6d1de7e38590cb5924865d53f70b8bee = L.polyline(
                [[32.814268, 35.488181], [32.802768, 35.006878], [32.460452, 35.047826], [32.008725, 35.127033], [32.814268, 35.488181]],
                {"bubblingMouseEvents": true, "color": "black", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "black", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 0.7, "smoothFactor": 1.0, "stroke": true, "weight": 3}
            ).addTo(map_032557809d7a4dea92d5f1f5e3822985);
        
</script>
</html>