31:T45b,Plot.plot({ projection: { type: "mercator", domain: transport_shape }, marks: [ Plot.geo(buildings_shape, { stroke: "grey", strokeWidth: 1 }), Plot.geo(landuse_shape, { stroke: "grey", strokeWidth: 1 }), Plot.geo(transport_shape, { stroke: "green", strokeWidth: 40 }), Plot.geo(transport_a_shape, { stroke: "brown", strokeWidth: 4 }), Plot.geo(natural_shape, { stroke: "green", strokeWidth: 0.4 }), Plot.geo(natural_a_shape, { stroke: "green", strokeWidth: 0.4 }), Plot.geo(places_shape, { stroke: "grey", strokeWidth: 0.4 }), Plot.geo(places_a_shape, { stroke: "grey", strokeWidth: 1 }), Plot.geo(pofw_shape, { stroke: "purple", strokeWidth: 4 }), Plot.geo(pofw_a_shape, { stroke: "purple", strokeWidth: 0.4 }), Plot.geo(pois_shape, { stroke: "yellow", strokeWidth: 1 }), Plot.geo(pois_a_shape, { stroke: "yellow", strokeWidth: 0.4 }) ], height: 400 })32:T582,viewof map = { // Yield a container to give it dimensions. const container = html`

`; yield container; // Initialize the map object. const map = (container.value = new mapboxgl.Map({ container, center: [84.5064605,28.4320633], zoom: zoom, // viewof zoom.value, // - not working correctly :( // TODO update dynamically pitch: pitch, // viewof pitch.value, // - not working correctly :( // TODO update dynamically bearing: 0, style: "mapbox://styles/mapbox/dark-v10", scrollZoom: false })); // Add some navigation controls. map.addControl(new mapboxgl.NavigationControl(), "top-right"); // When the user interacts with the map, propagate the values to inputs. map.on("zoom", () => (viewof zoom.value = map.getZoom())); map.on("pitch", () => (viewof pitch.value = map.getPitch())); // If this cell is invalidated, dispose of the map. invalidation.then(() => map.remove()); // The map must be loaded before we can add sources. await new Promise(resolve => map.on("load", resolve)); // Define map sources. map.addSource("transport_shape", { type: "geojson", data: transport_shape }); // Draw lawer. map.addLayer({ id: "transport_shape-fill", type: "circle", source: "transport_shape", layout: {}, paint: { "circle-color": "#00fffb", "circle-opacity": 0.6, } }); }33:[] 2f:{"title":"OSM Nepal 2021 | Load From Shapefile","cells":[{"id":0,"value":"# OSM Nepal 2021 | Load From Shapefile","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"md`\n[OpenStreetMap](https://www.openstreetmap.org) (OSM) is built by a community of mappers that contribute and maintain data about roads, trails, cafés, railway stations, and much more, all over the world.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`\nData used in this notebook were downloaded 31 Oct 2021 from the [Geofabrik Download Server](http://download.geofabrik.de/)\ndownload. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"`\n* buildings\n* landuse\n* natural\n* places\n* pofw\n* pois\n* railways\n* roads\n* traffic\n* transport\n* water\n* waterways\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"shapefile = require(\"shapefile\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitWidth(width, transport_shape)","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"height = Math.ceil(path.bounds(transport_shape)[1][1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"map_svg = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"proj4 = require(\"proj4@2.7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"unproject = function (feature, p) {\n const replacer = (key, value) =>\n typeof value === \"oProj\" &&\n value.length === 2 &&\n typeof value[0] === \"number\" &&\n typeof value[1] === \"number\"\n ? p(value)\n : value;\n const geo = JSON.parse(JSON.stringify(feature, replacer, 2));\n delete geo.bbox;\n return geo;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"buildings_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_roads_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_roads_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"landuse_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_landuse_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_landuse_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"natural_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_natural_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_natural_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"natural_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_natural_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_natural_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"places_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_places_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_places_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"places_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_places_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_places_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"pofw_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pofw_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pofw_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"pofw_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pofw_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pofw_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"pois_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pois_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pois_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"pois_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pois_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_pois_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"railways_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_railways_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_railways_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"roads_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_roads_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_roads_free_1.dbf\").then((response) => response.arrayBuffer())\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"traffic_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_traffic_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_traffic_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"traffic_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_traffic_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_traffic_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"transport_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_transport_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_transport_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"transport_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_transport_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_transport_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"water_a_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_water_a_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_water_a_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"waterways_shape = shapefile.read(\n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_waterways_free_1.shp\").then((response) => response.arrayBuffer()), \n await fetch(\"https://gis.s3.amazonaws.com/shapefiles/NEP/gis_osm_waterways_free_1.dbf\").then((response) => response.arrayBuffer())\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"viewof pitch = Inputs.range([0, 85], {value: 55, step: 1, label: \"Pitch\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof zoom = Inputs.range([6, 20], {value: 7, step: 1, label: \"Zoom\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.6.1\");\n if (!gl.accessToken) {\n gl.accessToken =\n key;\n const href = await require.resolve(\"mapbox-gl@2.6.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"import {key} from '@aaronkyle/mapbox-api-key'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}