2f:T632,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([22.875572,79.6574379], 4); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); /// Additional Base Layers let world_imagry = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community', maxZoom: 17 } ); let world_topo = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community', maxZoom: 17 } ); let baseLayers = { "Open Street Maps":osmLayer, "ESRI World Imagery":world_imagry, "ESRI World Topo":world_topo, }; let controlLayers = { "osm_india": osm_india_map.addTo(map), }; let control_layers = new L.control.layers(baseLayers, controlLayers, { position: 'topright', collapsed: false }); map.addLayer(world_topo); map.addControl(control_layers); }30:T485,` /* This has been generated by the overpass-turbo wizard. The original search was: */ [out:json][timeout:525]; // fetch area “India” to search in {{geocodeArea:India}}->.searchArea; // gather results ( node["boundary"="protected_area"]["protect_class"="4"](area.searchArea); way["boundary"="protected_area"]["protect_class"="4"](area.searchArea); relation["boundary"="protected_area"]["protect_class"="4"](area.searchArea); node["boundary"="national_park"]["protect_class"="2"](area.searchArea); way["boundary"="national_park"]["protect_class"="2"](area.searchArea); relation["boundary"="national_park"]["protect_class"="2"](area.searchArea); ); // print results {{style: /* http://wiki.openstreetmap.org/wiki/MapCSS/0.2 */ way{ opacity: 0; fill-opacity: 0; } node{ opacity: 0; fill-opacity: 0; } way[protect_class=2], relation[protect_class=2] { color: rgb(150, 50, 50); width: 5; fill-color:red; fill-opacity: 0.5; } way[protect_class=4], relation[protect_class=4] { color: rgb(50, 150, 50); width: 5; fill-color:green; fill-opacity: 0.5; } }} out body; >; out skel qt; `31:[{"id":"b45da2c0c429b9e2a07b14df5ddf5910193958a4dcb16ab0cb27db4c0587385af1c4a60281254cd043a5ac11a1072cbea60e08f5e8aa45a0968e3bcb1619fb29","href":"https://static.observableusercontent.com/files/b45da2c0c429b9e2a07b14df5ddf5910193958a4dcb16ab0cb27db4c0587385af1c4a60281254cd043a5ac11a1072cbea60e08f5e8aa45a0968e3bcb1619fb29","name":"osm_protected_areas_2022.geojson","type":"application/geo+json","lastModified":1657289009833.502,"size":15849109}] 2d:{"title":"OSM Protected Areas | India","cells":[{"id":0,"value":"# OSM Protected Areas | India","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof search = Inputs.search(osm_india.features.map(d => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"Inputs.table(search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"osm_india = await FileAttachment(\"osm_protected_areas_2022.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"osm_india_map = L.geoJson(osm_india, {\n onEachFeature: osm_india_tooltip,\n fillColor: \"purple\",\n fillOpacity: 0.5,\n color: \"purple\",\n weight: 0.5,\n opacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"osm_india_tooltip = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

Name: \" + feature.properties['name'] + \"
\" + \"Type: \" + feature.properties['boundary'] + \"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\", 'https://unpkg.com/esri-leaflet@2.5.3');\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}