Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <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_78266fbe1759aea8d6c235f8af0c0d47 { | |
| position: relative; | |
| width: 100.0%; | |
| height: 100.0%; | |
| left: 0.0%; | |
| top: 0.0%; | |
| } | |
| .leaflet-container { font-size: 1rem; } | |
| </style> | |
| <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> | |
| L_NO_TOUCH = false; | |
| L_DISABLE_3D = false; | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/> | |
| </head> | |
| <body> | |
| <div class="folium-map" id="map_78266fbe1759aea8d6c235f8af0c0d47" ></div> | |
| <style> | |
| #export { | |
| position: absolute; | |
| top: 5px; | |
| right: 10px; | |
| z-index: 999; | |
| background: white; | |
| color: black; | |
| padding: 6px; | |
| border-radius: 4px; | |
| font-family: 'Helvetica Neue'; | |
| cursor: pointer; | |
| font-size: 12px; | |
| text-decoration: none; | |
| top: 90px; | |
| } | |
| </style> | |
| <a href='#' id='export'>Export</a> | |
| </body> | |
| <script> | |
| var map_78266fbe1759aea8d6c235f8af0c0d47 = L.map( | |
| "map_78266fbe1759aea8d6c235f8af0c0d47", | |
| { | |
| center: [37.44975286338557, 126.65343455495042], | |
| crs: L.CRS.EPSG3857, | |
| ...{ | |
| "zoom": 17, | |
| "zoomControl": true, | |
| "preferCanvas": false, | |
| } | |
| } | |
| ); | |
| var tile_layer_c1196f4c91b6a6393d3df89cf55b8c8f = 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_c1196f4c91b6a6393d3df89cf55b8c8f.addTo(map_78266fbe1759aea8d6c235f8af0c0d47); | |
| function geo_json_9b5f5972b80e71540402a2523e8a23d1_styler(feature) { | |
| switch(feature.id) { | |
| default: | |
| return {"color": "blue", "fill": false, "weight": 3}; | |
| } | |
| } | |
| function geo_json_9b5f5972b80e71540402a2523e8a23d1_onEachFeature(feature, layer) { | |
| layer.on({ | |
| }); | |
| }; | |
| var geo_json_9b5f5972b80e71540402a2523e8a23d1 = L.geoJson(null, { | |
| onEachFeature: geo_json_9b5f5972b80e71540402a2523e8a23d1_onEachFeature, | |
| style: geo_json_9b5f5972b80e71540402a2523e8a23d1_styler, | |
| ...{ | |
| } | |
| }); | |
| function geo_json_9b5f5972b80e71540402a2523e8a23d1_add (data) { | |
| geo_json_9b5f5972b80e71540402a2523e8a23d1 | |
| .addData(data); | |
| } | |
| geo_json_9b5f5972b80e71540402a2523e8a23d1_add({"features": [{"geometry": {"coordinates": [[[126.6504913, 37.4488536], [126.6502018, 37.4490381], [126.6501274, 37.4490101], [126.650006, 37.449035], [126.6499295, 37.4493095], [126.6497967, 37.4495766], [126.6496642, 37.4498464], [126.6493324, 37.4504076], [126.6490067, 37.4509487], [126.649781, 37.4514003], [126.6495914, 37.4517312], [126.6501326, 37.45175], [126.6505999, 37.4517726], [126.6510982, 37.4518266], [126.6512838, 37.4518467], [126.6517828, 37.4519342], [126.6520048, 37.4519731], [126.6520885, 37.4519878], [126.6524237, 37.4520465], [126.6525693, 37.452072], [126.6528855, 37.4521371], [126.6530797, 37.4521045], [126.6536373, 37.4518765], [126.6544021, 37.4516675], [126.6564271, 37.4511471], [126.6578465, 37.4507776], [126.6569217, 37.4492734], [126.6553859, 37.4466845], [126.6547144, 37.4468884], [126.6545294, 37.4469713], [126.6544155, 37.4470167], [126.653386, 37.4474272], [126.6527874, 37.4476634], [126.6507639, 37.4484888], [126.6505808, 37.4485626], [126.6505271, 37.4487565], [126.6504913, 37.4488536]]], "type": "Polygon"}, "id": "0", "type": "Feature"}], "type": "FeatureCollection"}); | |
| geo_json_9b5f5972b80e71540402a2523e8a23d1.addTo(map_78266fbe1759aea8d6c235f8af0c0d47); | |
| var options = { | |
| position: "topleft", | |
| draw: {"circle": false, "circlemarker": false, "marker": false, "polygon": true, "polyline": false, "rectangle": true}, | |
| edit: {"edit": true, "remove": true}, | |
| } | |
| // FeatureGroup is to store editable layers. | |
| var drawnItems_draw_control_9d017ca223827f6de1a10b444cecfa37 = | |
| new L.featureGroup().addTo( | |
| map_78266fbe1759aea8d6c235f8af0c0d47 | |
| ); | |
| options.edit.featureGroup = drawnItems_draw_control_9d017ca223827f6de1a10b444cecfa37; | |
| var draw_control_9d017ca223827f6de1a10b444cecfa37 = new L.Control.Draw( | |
| options | |
| ).addTo( map_78266fbe1759aea8d6c235f8af0c0d47 ); | |
| map_78266fbe1759aea8d6c235f8af0c0d47.on(L.Draw.Event.CREATED, function(e) { | |
| var layer = e.layer, | |
| type = e.layerType; | |
| var coords = JSON.stringify(layer.toGeoJSON()); | |
| layer.on('click', function() { | |
| alert(coords); | |
| console.log(coords); | |
| }); | |
| drawnItems_draw_control_9d017ca223827f6de1a10b444cecfa37.addLayer(layer); | |
| }); | |
| map_78266fbe1759aea8d6c235f8af0c0d47.on('draw:created', function(e) { | |
| drawnItems_draw_control_9d017ca223827f6de1a10b444cecfa37.addLayer(e.layer); | |
| }); | |
| document.getElementById('export').onclick = function(e) { | |
| var data = drawnItems_draw_control_9d017ca223827f6de1a10b444cecfa37.toGeoJSON(); | |
| var convertedData = 'text/json;charset=utf-8,' | |
| + encodeURIComponent(JSON.stringify(data)); | |
| document.getElementById('export').setAttribute( | |
| 'href', 'data:' + convertedData | |
| ); | |
| document.getElementById('export').setAttribute( | |
| 'download', "zones.geojson" | |
| ); | |
| } | |
| var layer_control_859bc6ff55e56629719267d89d3e2a9c_layers = { | |
| base_layers : { | |
| "openstreetmap" : tile_layer_c1196f4c91b6a6393d3df89cf55b8c8f, | |
| }, | |
| overlays : { | |
| "campus_boundary" : geo_json_9b5f5972b80e71540402a2523e8a23d1, | |
| }, | |
| }; | |
| let layer_control_859bc6ff55e56629719267d89d3e2a9c = L.control.layers( | |
| layer_control_859bc6ff55e56629719267d89d3e2a9c_layers.base_layers, | |
| layer_control_859bc6ff55e56629719267d89d3e2a9c_layers.overlays, | |
| { | |
| "position": "topright", | |
| "collapsed": true, | |
| "autoZIndex": true, | |
| } | |
| ).addTo(map_78266fbe1759aea8d6c235f8af0c0d47); | |
| </script> | |
| </html> |