29:null 2a:["$","title",null,{"children":"MapLibre with ArcGIS Server Query and Table | Philip Mathieu | Observable"}] 2f:[{"id":"0daa8fecb73aca9de77cecc10e33b6147956d467e3ac3312cfad2abc6c5f60fae8e6c269056040400f04f751705e3abeb83f3775543092c6d521e3bca4be3bd5","href":"https://static.observableusercontent.com/files/0daa8fecb73aca9de77cecc10e33b6147956d467e3ac3312cfad2abc6c5f60fae8e6c269056040400f04f751705e3abeb83f3775543092c6d521e3bca4be3bd5","name":"committee_list.csv","type":"text/csv","lastModified":1677198504407.622,"size":16892}] 2d:{"id":"763fd8cc1b64b2c5","slug":"maplibre-arcgis-table","title":"MapLibre with ArcGIS Server Query and Table","thumbnail":"2b057820e2ecea9809294a1087c71db6d6b78ee216b08cbaf7e77bd2e3df00af","access_level":"public","create_time":"$D2023-01-11T14:34:27.999Z","update_time":"$D2023-02-24T00:29:45.174Z","view_time":null,"first_public_time":"$D2023-01-11T15:35:50.969Z","has_unpublished_edits":null,"fork":{"id":"ee9e4fb45c009de1","slug":"search-table","title":"Search + Table","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"87b30b5eafbc2191","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":"starter_2024"},"version":252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null}],"members":[{"type":"individual","id":"78e7f3c5039127cf","login":"philipmathieu","name":"Philip Mathieu","avatar_url":"https://avatars-next.observableusercontent.com/3533b43594be7a55938f0093ff36620b8ba0fd8b365f9a982cc722d35edeef32","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"url = \"https://gis.maine.gov/arcgis/rest/services/acf/Conserved_Lands/MapServer/0/\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"info = fetch(url + \"?\" + new URLSearchParams({ f: \"json\" })).then((response) =>\n response.json()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"Next, we ask the server for a list of all ObjectIDs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"Now place the API call using Promises to extract the JSON from the response.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"container = html`\n

\n Loading...\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Having an Input for basemap selection is handy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"viewof basemap = Inputs.radio([\"voyager\", \"positron\", \"dark-matter\"], {\n value: \"positron\",\n label: \"Basemap\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof search = Inputs.search(data.features.map((d) => d.properties))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"Second, we create a table showing the search results, applying formatting functions where needed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"