25:null 26:["$","title",null,{"children":"OS Features API | johnx | Observable"}] 2b:T5da,viewof polyMap = { let container = html`

`; // Give the container dimensions. yield container; // Define parameters object. let params = { key: key, service: 'WMTS', request: 'GetTile', version: '2.0.0', height: 256, width: 256, outputFormat: 'image/png', style: 'default', layer: 'Outdoor_3857', tileMatrixSet: 'EPSG:3857', tileMatrix: '{z}', tileRow: '{y}', tileCol: '{x}' }; // Construct query string parameters from object. let queryString = Object.keys(params) .map(function(key) { return key + '=' + params[key]; }) .join('&'); // Create a map style object using the WMTS service. let style = { version: 8, sources: { 'raster-tiles': { type: 'raster', tiles: [endpoints.wmts + '?' + queryString], tileSize: 256 } }, layers: [ { id: 'os-maps-wmts', type: 'raster', source: 'raster-tiles' } ] }; let map = new mapboxgl.Map({ container, center: { lng: -5.5340349894711665, lat: 57.398721270793374 }, zoom: 7, style: style }); var draw = new MapboxDraw(mapboxDrawParams); map.addControl(draw); map.on('draw.create', updateArea); map.on('draw.delete', updateArea); map.on('draw.update', updateArea); function updateArea(e) { let data = draw.getAll(); container.value = data; container.dispatchEvent(new CustomEvent("input")); } }2c:T6fa,xmlFilter = { // First we will construct our XML filter query string. let xmlSpatialFilterTag = ``; let xmlAttributeFilterTag = ``; let xmlFilter = ``; if (!spatialQuery && !stringQuery) { return ""; } if (spatialQuery) { if (typeof polyMap == 'undefined' || polyMap.features.length == 0) { return md`Please draw a polygon to search within on the map above 👆, or untick "Select features inside polygon"!`; } let coordsString = polyMap.features[0].geometry.coordinates[0].join(' '); xmlSpatialFilterTag = ` SHAPE ${coordsString} `; } if (stringQuery) { if (!attributeQueryParams.attribute || !attributeQueryParams.string) { return md`Please select an attribute and input a query string a few cells above 👆.`; } xmlAttributeFilterTag = ` ${attributeQueryParams.attribute} ${attributeQueryParams.string} `; } if (spatialQuery && stringQuery) { xmlFilter = ` ${xmlAttributeFilterTag} ${xmlSpatialFilterTag} `; } else if (spatialQuery) { xmlFilter = ` ${xmlSpatialFilterTag} `; } else if (stringQuery) { xmlFilter = ` ${xmlAttributeFilterTag} `; } return xmlFilter; }2d:T720,turf.intersect( { type: "Feature", geometry: { type: "Polygon", coordinates: [ [ [-2.247891718975606, 53.47869649436991], [-2.247832711516677, 53.4789159235385], [-2.247750551789539, 53.47890890245925], [-2.247813326492266, 53.47868946553885], [-2.247833677986745, 53.47869122119889], [-2.247891718975606, 53.47869649436991] ] ] }, properties: { OBJECTID: 79822906, TOID: "osgb1000024085542", FeatureCode: 10021, Version: 4, VersionDate: "2/13/2008", Theme: "Buildings", ThemeCount: 1, CalculatedAreaValue: 133.25, ChangeDate: "11/18/2005", ReasonForChange: "Attributes", ChangeHistoryCount: 2, DescriptiveGroup: "Building", DescriptiveGroupCount: 1, DescriptiveTerm: "Archway", DescriptiveTermCount: 1, Make: "Manmade", PhysicalLevel: 50, PhysicalPresence: "null", style_code: 2, BHATopoAreaVersion: 4, BHAProcessDate: "3/2/2020", AbsHMin: 35.1, AbsH2: 45.2, AbsHMax: 46.8, RelH2: 10.1, RelHMax: 11.7, BHAConf: 99, Shape_Length: 60.2626726239521, Shape_Area: 133.250000002934 } }, { id: "5624bcbab79bf629565831b026cad192", type: "Feature", properties: {}, geometry: { coordinates: [ [ [-2.2478662399678626, 53.47821078203023], [-2.2477770762932607, 53.479192451694615], [-2.246796275875056, 53.479192451694615], [-2.246796275875056, 53.47808696622528], [-2.2462464332149636, 53.47811349821393], [-2.247138069959675, 53.47791008587711], [-2.2478662399678626, 53.47821078203023] ] ], type: "Polygon" } } )2e:T635,// Leaflet viewof map1 = { // 👇 This is an Observable-specific pattern to create the element for the map const container = html`

`; yield container; // Define parameters object. var params = { key: key, service: 'WMTS', request: 'GetTile', version: '2.0.0', height: 256, width: 256, outputFormat: 'image/png', style: 'default', layer: 'Light_3857', tileMatrixSet: 'EPSG:3857', tileMatrix: '{z}', tileRow: '{y}', tileCol: '{x}' }; // Construct query string parameters from object. var queryString = Object.keys(params) .map(function(key) { return key + '=' + params[key]; }) .join('&'); // Create a map style object using the WMTS service. var style = { version: 8, sources: { 'raster-tiles': { type: 'raster', tiles: [endpoints.wmts + '?' + queryString], tileSize: 256 } }, layers: [ { id: 'os-maps-wmts', type: 'raster', source: 'raster-tiles' } ] }; const map = (container.value = new mapboxgl.Map({ container, center: [-4.238160, 57.344767], zoom: 8.27, style: style })); map.dragRotate.disable(); // Disable map rotation using right click + drag. map.touchZoomRotate.disableRotation(); // Disable map rotation using touch rotation gesture. // Add navigation control (excluding compass button) to the map. map.addControl( new mapboxgl.NavigationControl({ showCompass: false }) ); invalidation.then(() => map.remove()); }2f:T546,function addLayer(geojson, map) { let featureType = geojson.features[0].geometry.type; // First clear old layer if (map.getSource('features') != undefined) { map.removeLayer('features-layer'); map.removeSource('features'); } map.addSource('features', { type: 'geojson', data: geojson }); if (featureType == 'Point') { map.addLayer({ id: "features-layer", type: 'circle', source: 'features', paint: { 'circle-radius': 6, 'circle-color': osColours.qualitative.lookup[1] } }); } else if (featureType == 'MultiLineString') { console.log('line!'); map.addLayer({ id: "features-layer", type: 'line', source: 'features', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': osColours.qualitative.lookup[1], 'line-width': 2, 'line-opacity': 0.8 } }); } else if (featureType == 'Polygon') { map.addLayer({ id: "features-layer", type: 'fill', source: 'features', layout: {}, paint: { 'fill-color': osColours.qualitative.lookup[1], 'fill-opacity': 0.5 } }); } let bounds = turf.bbox(geojson); map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], { padding: 50 }); }30:Tedf,mapboxDrawParams = { // mapbox-gl-draw modes to disable draggable drawn polygons const NewSimpleSelect = _.extend(MapboxDraw.modes.simple_select, { dragMove() {} }); const NewDirectSelect = _.extend(MapboxDraw.modes.direct_select, { dragFeature() {} }); return { styles: [ // Customise draw polygon to use OS colours // ACTIVE (being drawn) // line stroke { id: "gl-draw-line", type: "line", filter: [ "all", ["==", "$type", "LineString"], ["!=", "mode", "static"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": osColours.qualitative.lookup["1"], "line-dasharray": [0.2, 2], "line-width": 2 } }, // polygon fill { id: "gl-draw-polygon-fill", type: "fill", filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]], paint: { "fill-color": "#D20C0C", "fill-outline-color": osColours.qualitative.lookup["1"], "fill-opacity": 0.1 } }, // polygon outline stroke // This doesn't style the first edge of the polygon, which uses the line stroke styling instead { id: "gl-draw-polygon-stroke-active", type: "line", filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": osColours.qualitative.lookup["1"], "line-dasharray": [0.2, 2], "line-width": 2 } }, // vertex point halos { id: "gl-draw-polygon-and-line-vertex-halo-active", type: "circle", filter: [ "all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"] ], paint: { "circle-radius": 5, "circle-color": "#FFF" } }, // vertex points { id: "gl-draw-polygon-and-line-vertex-active", type: "circle", filter: [ "all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"] ], paint: { "circle-radius": 3, "circle-color": osColours.qualitative.lookup["1"] } }, // INACTIVE (static, already drawn) // line stroke { id: "gl-draw-line-static", type: "line", filter: [ "all", ["==", "$type", "LineString"], ["==", "mode", "static"] ], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": "#000", "line-width": 3 } }, // polygon fill { id: "gl-draw-polygon-fill-static", type: "fill", filter: ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]], paint: { "fill-color": "#000", "fill-outline-color": "#000", "fill-opacity": 0.1 } }, // polygon outline { id: "gl-draw-polygon-stroke-static", type: "line", filter: ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]], layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": "#000", "line-width": 3 } } ], displayControlsDefault: false, controls: { polygon: true, trash: true }, modes: { ...MapboxDraw.modes, simple_select: NewSimpleSelect, direct_select: NewDirectSelect } }; }31:[] 29:{"id":"5b7b9995f6e3bab3","slug":"os-features-api/2","title":"OS Features API","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-05-04T10:50:47.862Z","update_time":"$D2021-02-25T13:46:50.008Z","view_time":null,"first_public_time":"$D2020-06-09T15:04:37.664Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"694a515e88970367","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":"starter_2024"},"version":1702,"publish_version":1702,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null}],"members":[{"type":"individual","id":"a7851601ec4f2322","login":"johnx25bd","name":"johnx","avatar_url":"https://avatars-next.observableusercontent.com/2913455d7c8937d6db139dd4363a27c3d0ca15eb7cf0dc8a317fbde440d8a165","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7f988f55ce59f462","slug":"os-data-hub-tools","title":"OS Data Hub tools","owner":{"id":"694a515e88970367","login":"johnx25bd","name":"johnx"}},"type":"notebook","body":{"title":"OS Features API","cells":[{"id":0,"value":"md`${osLogo}\n
\n# OS Features API\n\nThis notebook will walk through the key functionality of Ordnance Survey's Features API. \n\nThe Features API enables developers and data scientists to access vector features as an [OGC Web Feature Service](https://www.ogc.org/standards/wfs). We'll look at:\n\n- authentication\n- feature types \n- parameters\n- spatial and string filters\n\nWith this notebook you'll be able to explore and investigate the APIs and data, building custom queries and visualising results on a map.\n\nObservable is an interactive notebook that let's us explore the functionality of the APIs using interactive maps, all in the browser. If you'd like to see the same examples in a format you can copy and paste into your JavaScript app, check out the [OS Data Hub Examples](https://labs.os.uk/public/os-data-hub-examples/) page.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`## Authentication\n\nThe Features API requires an API key for authentication. Paste your API key below - you can grab one on the [OS Data Hub](https://osdatahub.os.uk/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof key = text({\n value: \"\",\n placeholder: \"OS API key\",\n submit: \"Submit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"validateKey(key, 'features')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"md`## Select Feature Type\n\nIndividual geographic features are organised by type - greenspace areas in one feature type, cartographic symbols in another, and so on. \n\nSelect which feature type you'd like to fetch from the API:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"viewof featureType = select({\n title: \"Feature Type\",\n description: \"Select feature type\",\n options: featureTypes,\n value: featureTypes[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`## Parameters\n\nWe'll now construct the parameters object we'll need to build the query string. This pattern will be employed when we actually start fetching features as well.\n\nNotice how the properties are updated as you change variables below - an example of how Observable is [**reactive**](https://observablehq.com/@palewire/hello-reactivity).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"parameters = ({\n key: key,\n service: 'WFS',\n request: 'GetFeature',\n version: '2.0.0',\n typeNames: featureType,\n outputFormat: 'GEOJSON',\n srsName: 'urn:ogc:def:crs:EPSG::4326',\n count: numberToFetch > 100 ? 100 : numberToFetch,\n startIndex: 0\n}) // Observable is a bit different to JS - object literal declarations need to be wrapped in parentheses!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"md`## Select Number of Features to Fetch\n\nRequests to the OS Features API are called \"transactions\" - each transaction returns a maximum of 100 vector features. If more features in our National Geographic Database match query parameters, they need to be fetched with additional calls, which is possible by iteratively increasing the \\`\\`startIndex\\`\\` parameter.\n\nSelect how many features you'd like to fetch, bearing in mind that Premium requests made with your API key will count towards your monthly free limit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"viewof fetchAll = checkbox({\n description: \"⚠️!! This may cause high API usage!!⚠️\",\n options: [{ value: true, label: \"Fetch all matching features\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"viewof numberToFetch = number({\n placeholder: fetchAll ? \"Fetching all\" : \"Max 1000\",\n value: '100',\n max: 1000,\n title: \"Number to fetch\",\n\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"md`Set to fetch ${fetchAll ? \"all\" : numberToFetch} matching features.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"md`## Queries with XML Filters\n\nWe'll now look at the XML filters that enable us to write sophisticated queries for the OS Features API. These filters are defined in the [OGC Web Feature Service specification](https://www.ogc.org/standards/filter).\n\nHere you'll have the option to draw a polygon geometry on a map to include as a **spatial** parameter to the query, and to choose a **string** to match. This is just the start of the querying power of the Web Feature Service - the idea is to give you a sense of what is possible.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`## Spatial Query`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"viewof spatialQuery = checkbox(['Select features inside polygon?'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"{\n if (spatialQuery) {\n return md`Use the draw tool below to draw the polygon you'd like to select features from. We recommend choosing a small area to query for this demo.`;\n } else {\n return md`If you'd like to include a spatial parameter to your query, tick the box above and use the draw tool to draw the polygon you'd like to select features from.`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"md`## String Query\n\nThe dropdown list below has all of the attributes that are served with the \\`\\`${featureType}\\`\\` feature type. \n\nIf you'd like to query features that with a matching attribute, select the attribute and input the string you'd like to query for.\n\nIf you don't want to include a string query in the API call, uncheck the _\"Query by attribute value?\"_ checkbox.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"// viewof stringQuery = checkbox({\n// options: [{ value: Boolean(true), label: \"Query by attribute value?\" }],\n// value: false\n// })\n\nviewof stringQuery = checkbox(['Query by attribute value?'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"viewof attributeQueryParams = {\n const form = html``;\n form.oninput = () =>\n (form.value = {\n attribute: form.attributes.value,\n string: form.string.value\n });\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"md`## Fetching query results\n\nNow that we have the query parameters and feature type, we can build the API query and fetch results from the OS Features API endpoint.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"{\n if (xmlFilter) {\n parameters.filter = xmlFilter;\n } else {\n delete parameters.filter;\n }\n\n return md`Fetching results and displaying below 👇`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"parameters","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"queryResults = {\n let totalFeatures = [];\n let featureLength;\n\n do {\n let featureUrl = getUrl(endpoints.wfs, parameters);\n let json;\n // return featureUrl;\n try {\n let res = await fetch(featureUrl);\n json = await res.json();\n } catch (err) {\n return err;\n }\n\n let featureArray = json.features;\n featureLength = featureArray.length;\n\n totalFeatures.push(...featureArray);\n parameters.startIndex += featureLength;\n } while (\n featureLength >= parameters.count &&\n (fetchAll ? true : totalFeatures.length < numberToFetch)\n );\n\n let results = {\n type: \"FeatureCollection\",\n features: totalFeatures\n };\n\n //\n results.features = results.features.map(f => {\n if (f.geometry.type == 'LineString') {\n f.geometry.type = \"MultiLineString\";\n }\n return f;\n });\n\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"{\n if (queryResults.features.length > 0) {\n return md`# Results\nYour query search terms returned **${queryResults.features.length}** features. \n\nBelow we show the results in GeoJSON, and view the results on a map. If you click a feature you can see the attributes returned with that matching result.`;\n } else {\n return md`# Results\nYour query did return any matching features from the OS Features API. You could resolve this by:\n1. Changing the area searched, if you're using a spatial query.\n2. Changing the attribute string you're trying to match, if performing a string query. `;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"queryResults","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"{\n if (map1.loaded()) {\n addLayer(queryResults, map1);\n } else {\n map1.on('load', function() {\n addLayer(queryResults, map1);\n });\n }\n\n return md`Added layer to map!`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`# Under the hood\n\nBelow we share a bit about what is going on under the hood, and how to use the OS Features API to its full potential. \n\n## \\`\\`GetCapabilities\\`\\`\n\nWith \\`\\`GetCapabilities\\`\\` we can examine the capabilities of the API. Let's look at the information contained in the response returned from the \\`\\`GetCapabilities\\`\\` endpoint - the full XML document is below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`If you'd like to look more closely, click on \"\\`\\`Show truncated lines\\`\\`\" at the bottom of the cell below to see all of the data returned. We retrieved this document by sending an HTTP GET request to the following URL, using the JavaScript \\`\\`fetch\\`\\` API.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"capabilitiesUrl = {\n let params = {\n service: 'wfs',\n request: 'GetCapabilities',\n key: key\n };\n\n return getUrl(endpoints.features, params);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"capabilities = (await fetch(capabilitiesUrl)).text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`\n
\n## \\`\\`DescribeFeatureType\\`\\`\n\nNext, we'll learn how to fetch information about each Feature type via the DescribeFeatureType endpoint. This \n\nNow that we understand the capabilities of the API, let's build a query and look at the results.\n\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`We can build a valid URL from the parameters above. When OS receives a GET request with these parameters, it will parse this URL, assemble the appropriate data, and send its response.\n\nThe \\`\\`getUrl()\\`\\` function transforms a service endpoint URL and params object literal into a URL string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"function getUrl(serviceUrl, params) {\n // encodedParameters is assigned to descriptionParams object above converted into an encoded URI\n // As an example, {version: \"2.0.0\", service: \"WFS\"} becomes version=2.0.0&service=WFS\n let encodedParameters = Object.keys(params)\n .map(paramName => paramName + '=' + encodeURI(params[paramName]))\n .join('&'); // each parameter is joined with \"&\"\n\n // And the full URL is constructed\n return serviceUrl + '?' + encodedParameters;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`For example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"descriptionUrl = {\n let descriptionParams = {\n typeNames: featureType,\n key: key,\n service: 'WFS',\n request: 'DescribeFeatureType',\n version: '2.0.0'\n };\n\n return getUrl(endpoints.wfs, descriptionParams);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`Now we can fetch the description of the Feature Type we selected above, again with the \\`\\`fetch\\`\\` API. \n\nWe'll see a number of \\`\\`xsd:element\\`\\`s, each of which corresponds to a property returned with each feature. \n\nThe key in the key-value pair is defined in the \\`\\`name\\`\\` attribute of the XML tag, i.e. \\`\\`\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"featureTypeDescription = (await fetch(descriptionUrl)).text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`This \\`\\`FeatureTypeDescription\\`\\` has information about all of the attributes returned with each feature in that feature type. \n\nHere we extract those attribute names into an array using \\`\\`d3.xml\\`\\`. (Again - this list updates reactively when you select a different feature type above!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"featureTypeAttributes = {\n let xmlCapabilities = await d3.xml(descriptionUrl);\n\n let featureTypeDescriptionXml = xmlCapabilities.documentElement\n .getElementsByTagName('xsd:sequence')[0]\n .getElementsByTagName('xsd:element');\n\n let featureTypesHolder = [];\n\n for (let i in Object.keys(featureTypeDescriptionXml)) {\n featureTypesHolder.push(featureTypeDescriptionXml[i]);\n }\n\n return featureTypesHolder.map(ft => ft.getAttribute('name'));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"md`(This is the array we used to build the attribute dropdown form element above.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`\n
\n\n## \\`\\`GetFeature\\`\\`: Our First Request!\n\nNow we're ready to make our first request to the \\`\\`GetFeature\\`\\` endpoint! And we've already seen most of code we'll need to do so. The main difference is in the parameters object we define, then pass into \\`\\`getUrl()\\`\\`. Below is a parameters object that will fetch up to 100 features from the layer selected above:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"featureType","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"md`And fetching the URL generated:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`## Housekeeping and Requirements\n\nObservable notebooks differ from traditional JavaScript in that variable assignments can be defined in any order. They behave in a similar way to *hoisted* function declarations. You can learn more by reading [Observable's Not JavaScript](https://observablehq.com/@observablehq/observables-not-javascript).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"// Here we parse the XML document returned from the GetCapabilities endpoint to create an array of all the FeatureTypes we can request. We used this array above in creating the dropdown to select which layers to fetch.\n\nfeatureTypes = {\n let xmlCapabilities = await d3.xml(\n `${endpoints.wfs}?service=wfs&request=getcapabilities&key=${key}`\n );\n\n let featureTypesXml = xmlCapabilities.documentElement.getElementsByTagName(\n 'wfs:Title'\n );\n let featureTypesHolder = [];\n\n for (let i in Object.keys(featureTypesXml)) {\n let featureType = featureTypesXml[i].childNodes[0].nodeValue;\n featureTypesHolder.push(featureType);\n }\n\n return featureTypesHolder;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"featureTypeSelectInput = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"// This code sets an event listener that displays a popup with attribution in the map above.\n\nmap1.on('click', 'features-layer', function(e) {\n let geom = e.features[0];\n let properties = e.features[0].properties;\n\n let center = turf.centroid(geom);\n let popupHtml =\n '

' +\n    JSON.stringify(properties, null, ' ').replace(/[\\{\\}\"]/g, '') +\n    '

';\n\n new mapboxgl.Popup()\n .setLngLat(center.geometry.coordinates)\n .setHTML(popupHtml)\n .addTo(map1);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"import { osLogo, validateKey, endpoints, osColours } from '@johnx25bd/os'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { text, select, color, checkbox, number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n // This is @tmcw’s. https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"MapboxDraw = require('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"_ = require(\"lodash@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2a:"$29:body"