31:[{"id":"0daa8fecb73aca9de77cecc10e33b6147956d467e3ac3312cfad2abc6c5f60fae8e6c269056040400f04f751705e3abeb83f3775543092c6d521e3bca4be3bd5","href":"https://static.observableusercontent.com/files/0daa8fecb73aca9de77cecc10e33b6147956d467e3ac3312cfad2abc6c5f60fae8e6c269056040400f04f751705e3abeb83f3775543092c6d521e3bca4be3bd5","name":"committee_list.csv","type":"text/csv","lastModified":1677198504407.622,"size":16892}] 2f:{"title":"MapLibre with ArcGIS Server Query and Table","cells":[{"id":71,"value":"# MapLibre with ArcGIS Server Query and Table\n\nThis is a basic demonstration of how to load MapLibre, query an ArcGIS server, and display the results in both a map and a table.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"## Importing MapLibre\n\nMapLibre requires a slightly more complicated import in Observable because it is a large package and requires you to import CSS styles for things to display properly. This import process is also useful for using MapBox and Leaflet in Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"maplibregl = {\n const L = await require(\"maplibre-gl@2.2.1\");\n if (!L._style) {\n const href = await require.resolve(\n \"maplibre-gl@2.2.1/dist/maplibre-gl.css\"\n );\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"## Querying ArcGIS Server\nThe first thing to do is to query the base URL to get info ","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"url = \"https://gis.maine.gov/arcgis/rest/services/acf/Conserved_Lands/MapServer/0/\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"info = fetch(url + \"?\" + new URLSearchParams({ f: \"json\" })).then((response) =>\n response.json()\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"Next, we ask the server for a list of all ObjectIDs.","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"objectIds = fetch(\n url +\n \"query?\" +\n new URLSearchParams({ where: \"1=1\", returnIdsOnly: \"true\", f: \"json\" })\n).then((response) => response.json().then((response) => response.objectIds))","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"Notice that the number of objects (${objectIds.length}) exceeds the maxRecordCount (${info.maxRecordCount}). To get all features we will need to place multiple calls to the API. [See here for information on how to construct querys to an ESRI REST API.](https://developers.arcgis.com/rest/services-reference/enterprise/query-feature-service-layer-.htm)","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"data = {\n let responses = [];\n\n const perChunk = Math.min(info.maxRecordCount, 100); // items per chunk. Using a small value here increases the number of requests but reduces the risk of running into 404 errors\n\n for (let i = 0; i < objectIds.length; i += perChunk) {\n const chunk = objectIds.slice(i, i + perChunk);\n // query definition\n const query = {\n where: \"1=1\",\n outFields: \"*\",\n f: \"geojson\",\n objectIds: chunk.toString()\n };\n const fullUrl = url + \"query?\" + new URLSearchParams(query);\n responses.push(fetch(fullUrl).then((response) => response.json()));\n }\n\n // return a Promise to ensure that Observable knows the cell is not ready until all responses are loaded\n return Promise.all(responses).then((responses) => ({\n type: \"FeatureCollection\",\n // combine all feature arrays using an Array reduce\n features: responses.reduce(\n (acc, curr) => acc.concat(curr.features),\n new Array(0)\n )\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"Now place the API call using Promises to extract the JSON from the response.","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"## Generate Map\nNext, create a cell that contains the div to hold your map. Doing it this way provides much more flexibility if embedding the notebook in another website. I also include additional divs that utilize Bootstrap to add a lightweight loading spinner when embedded.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"container = html`\n

\n Loading...\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"Having an Input for basemap selection is handy.","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"viewof basemap = Inputs.radio([\"voyager\", \"positron\", \"dark-matter\"], {\n value: \"positron\",\n label: \"Basemap\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"For details on the actual map, see the MapLibre [Style Specification](https://maplibre.org/maplibre-gl-js-docs/style-spec/) and [Examples](https://maplibre.org/maplibre-gl-js-docs/example/).","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"// MapLibre Heatmap from Lukas with minor tweaks and unused code removed\nmap = {\n const map = new maplibregl.Map({\n maplibreLogo: true,\n container,\n center: [-69, 45.5],\n zoom: 6,\n style: `https://basemaps.cartocdn.com/gl/${basemap}-gl-style/style.json`,\n cooperativeGestures: true\n });\n\n invalidation.then(() => map.remove());\n\n map.addControl(new maplibregl.NavigationControl());\n\n map.on(\"load\", function () {\n map.addSource(\"lands\", {\n type: \"geojson\",\n data: data\n });\n\n map.addLayer({\n id: \"landsfill\",\n type: \"fill\",\n source: \"lands\",\n paint: {\n \"fill-color\": \"green\",\n \"fill-opacity\": 0.5,\n \"fill-outline-color\": \"white\"\n }\n });\n });\n\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"## Table with Search\nFirst, we create a search input, mapping to the properties of each feature.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"viewof search = Inputs.search(data.features.map((d) => d.properties))","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"Second, we create a table showing the search results, applying formatting functions where needed.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"table = Inputs.table(search, {\n format: {\n ACQ_YEAR: d3.format(\"d\"), // format as \"1960\" rather than \"1,960\"\n ACQ_DATE: (d) => new Date(d) // format as \"1960\" rather than \"1,960\"\n },\n height: width / 3\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}