Spaces:
Sleeping
Sleeping
| <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/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/leaflet.css"/> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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_a150e0fb4cc7276810a35f632619f3a1 { | |
| position: relative; | |
| width: 100.0%; | |
| height: 100.0%; | |
| left: 0.0%; | |
| top: 0.0%; | |
| } | |
| .leaflet-container { font-size: 1rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div style=" | |
| position: fixed; | |
| bottom: 50px; left: 50px; width: 300px; height: 200px; | |
| background-color: white; | |
| z-index:9999; font-size:14px; border:2px solid grey; | |
| padding: 10px; overflow-y: auto;"> | |
| <b>AQI Color Legend</b> | |
| <table style="width: 100%; border-collapse: collapse; text-align: left;"> | |
| <thead> | |
| <tr style="border-bottom: 2px solid grey;"> | |
| <th style="padding: 5px;">Color</th> | |
| <th style="padding: 5px;">Remark</th> | |
| <th style="padding: 5px;">Range</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:green; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Good</td> | |
| <td style="padding: 5px;">0-50</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:yellow; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Moderate</td> | |
| <td style="padding: 5px;">51-100</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:orange; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Unhealthy for Sensitive Groups</td> | |
| <td style="padding: 5px;">101-150</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:red; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Unhealthy</td> | |
| <td style="padding: 5px;">151-200</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:purple; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Very Unhealthy</td> | |
| <td style="padding: 5px;">201-300</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 5px;"><i style="background:maroon; width:15px; height:15px; display:inline-block; border:1px solid black;"></i></td> | |
| <td style="padding: 5px;">Hazardous</td> | |
| <td style="padding: 5px;">301+</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="folium-map" id="map_a150e0fb4cc7276810a35f632619f3a1" ></div> | |
| </body> | |
| <script> | |
| var map_a150e0fb4cc7276810a35f632619f3a1 = L.map( | |
| "map_a150e0fb4cc7276810a35f632619f3a1", | |
| { | |
| center: [21.2130139551601, 72.81864929625287], | |
| crs: L.CRS.EPSG3857, | |
| zoom: 10, | |
| zoomControl: true, | |
| preferCanvas: false, | |
| } | |
| ); | |
| var tile_layer_63bd45a9cd619b6645de023d33db15a9 = 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_63bd45a9cd619b6645de023d33db15a9.addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var marker_2429860b4cbaf5615ea1017c44b19f22 = L.marker( | |
| [21.195069775800516, 72.79324648126439], | |
| {} | |
| ).addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var icon_67d84c6204b0790d039646f6c1e2da39 = L.AwesomeMarkers.icon( | |
| {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"} | |
| ); | |
| marker_2429860b4cbaf5615ea1017c44b19f22.setIcon(icon_67d84c6204b0790d039646f6c1e2da39); | |
| marker_2429860b4cbaf5615ea1017c44b19f22.bindTooltip( | |
| `<div> | |
| Location 1 | |
| </div>`, | |
| {"sticky": true} | |
| ); | |
| var marker_b7a6e3483466a57f4c675d8f1855957d = L.marker( | |
| [21.3, 72.9], | |
| {} | |
| ).addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var icon_312c040d6b5b62945c0a9095b367df86 = L.AwesomeMarkers.icon( | |
| {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"} | |
| ); | |
| marker_b7a6e3483466a57f4c675d8f1855957d.setIcon(icon_312c040d6b5b62945c0a9095b367df86); | |
| marker_b7a6e3483466a57f4c675d8f1855957d.bindTooltip( | |
| `<div> | |
| Location 2 | |
| </div>`, | |
| {"sticky": true} | |
| ); | |
| var marker_7ae55386c3f54f1e32b3a75aa8a3c475 = L.marker( | |
| [21.1, 72.8], | |
| {} | |
| ).addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var icon_3dbc85d72a24050ac1f5c0e977d415fe = L.AwesomeMarkers.icon( | |
| {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"} | |
| ); | |
| marker_7ae55386c3f54f1e32b3a75aa8a3c475.setIcon(icon_3dbc85d72a24050ac1f5c0e977d415fe); | |
| marker_7ae55386c3f54f1e32b3a75aa8a3c475.bindTooltip( | |
| `<div> | |
| Location 3 | |
| </div>`, | |
| {"sticky": true} | |
| ); | |
| var marker_2d8020c07cc33b3b6500310ab4224ec2 = L.marker( | |
| [21.25, 72.85], | |
| {} | |
| ).addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var icon_a4e9c615cf66ea065d533cfb5956086b = L.AwesomeMarkers.icon( | |
| {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"} | |
| ); | |
| marker_2d8020c07cc33b3b6500310ab4224ec2.setIcon(icon_a4e9c615cf66ea065d533cfb5956086b); | |
| marker_2d8020c07cc33b3b6500310ab4224ec2.bindTooltip( | |
| `<div> | |
| Location 4 | |
| </div>`, | |
| {"sticky": true} | |
| ); | |
| var marker_a32fd1d6158d26403dfdfd275aeee4fe = L.marker( | |
| [21.22, 72.75], | |
| {} | |
| ).addTo(map_a150e0fb4cc7276810a35f632619f3a1); | |
| var icon_903f2288884967fe826c17b2e3de0ae6 = L.AwesomeMarkers.icon( | |
| {"extraClasses": "fa-rotate-0", "icon": "info-sign", "iconColor": "white", "markerColor": "orange", "prefix": "glyphicon"} | |
| ); | |
| marker_a32fd1d6158d26403dfdfd275aeee4fe.setIcon(icon_903f2288884967fe826c17b2e3de0ae6); | |
| marker_a32fd1d6158d26403dfdfd275aeee4fe.bindTooltip( | |
| `<div> | |
| Location 5 | |
| </div>`, | |
| {"sticky": true} | |
| ); | |
| </script> | |
| </html> |