2d:null 2e:["$","title",null,{"children":"Stae JS SDK Basics | Crystal | Observable"}] 33:T781,{ let container = html`

`; yield container; mapboxgl.accessToken = 'pk.eyJ1IjoiY3J5c3RhbHBlbmFsb3NhIiwiYSI6ImNqcmt4ZnpobzAweWM0OW1sdGJ3cjYweDQifQ.2jfSIUMSAx0ikaI4FXl6XA' ; let map = new mapboxgl.Map({ container, center: incidentDatum.geometry.coordinates, zoom: 15, style: "mapbox://styles/mapbox/streets-v9", scrollZoom: true }); map.on('load', function () { map.addLayer({ "id": "points", "type": "symbol", "source": { "type": "geojson", "data": incidentDatum.geometry }, "layout": { "icon-image": "circle-15", // "text-field": "{t}", // "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], // "text-offset": [0, 0.6], // "text-anchor": "top" } }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // When a click event occurs on a feature in the places layer, open a popup at the // location of the feature, with description HTML from its properties. map.on('click', 'points', function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); var description = "incident information reported at: " + e.features[0].geometry.coordinates.slice(); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on('mouseenter', 'points', function () { map.getCanvas().style.cursor = 'pointer'; }); // Change it back to a pointer when it leaves. map.on('mouseleave', 'places', function () { map.getCanvas().style.cursor = ''; }); }); invalidation.then(() => map.remove()); }34:[] 31:{"id":"ac83a0369c361e49","slug":"stae-module-basics","title":"Stae JS SDK Basics","thumbnail":"90455a3e586232c203be554a98e69ed79d59a242e713dddfe015b1d586344fd3","access_level":"public","create_time":"$D2019-01-16T23:33:12.164Z","update_time":"$D2020-03-13T22:12:27.641Z","view_time":null,"first_public_time":"$D2019-01-29T21:35:46.848Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f183b5382428c1ca","login":"cpenalosa","name":"Crystal","avatar_url":"https://avatars-next.observableusercontent.com/ebca234ad9b53db39eb10a780dfdeb888883d7f93119aed7f81a1f52badecd2b","tier":"starter_2024"},"version":1451,"publish_version":1451,"role":null,"authored":false,"authors":[{"type":"individual","id":"9c60e6048cc673eb","login":"cpenalosa","name":"Crystal","avatar_url":"https://avatars-next.observableusercontent.com/ebca234ad9b53db39eb10a780dfdeb888883d7f93119aed7f81a1f52badecd2b","tier":null}],"members":[{"type":"individual","id":"9c60e6048cc673eb","login":"cpenalosa","name":"Crystal","avatar_url":"https://avatars-next.observableusercontent.com/ebca234ad9b53db39eb10a780dfdeb888883d7f93119aed7f81a1f52badecd2b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Stae JS SDK Basics","cells":[{"id":0,"value":"md`# Stae JS SDK Basics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"md`#### [Full support documentation](https://support.municipal.systems/hc/en-us/categories/360001210674-How-to-use-the-API) and [NPM package instructions](https://www.npmjs.com/package/stae)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md `The following notebook will walk you through how to use the Stae JS SDK. Part of this page contain live code so you can tweak different parameters to see how the API will respond.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`#### 1) Create a basic readable API client, authed as you.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"stae = require('https://bundle.run/stae@2.0.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"api = stae.createClient({key:Secret(\"STAE_API_KEY\")})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md` Create an account at [Stae](https://municipal.systems/signup) and pass your API Key. We're using [Observable's Secrets](https://observablehq.com/@observablehq/secrets) but you'll need to pass your own API Key from the [/account page](https://municipal.systems/account) if you fork this project.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`#### 2) Get a list of places of available \nA place in Stae can be a city, county, state, or country.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"places = await api.place.find({\noptions: {\n// The API returns a default of 100 results on every request made. Use the limit field to define how many results you want.\n limit: 200 \n }})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`#### Search for a specific place\nType in a city, state, or country you're interested in seeing data for in the search box. Live results of the search will be populated below, using traffic as an example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"place = await api.place.find({\n options: {\n search: object.message,\n limit: 200 \n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md `${place.results[0].name} has ${place.results[0].data} data points in Stae. [Check out the data on the public portal map](http://${place.results[0].id}.municipal.systems/map).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`#### 3) Get the most recent Traffic Incident Data for ${place.results[0].displayName}\nIf you're looking for other sources of publicly available data for ${place.results[0].displayName}, check out the data types on [the public portal](http://${place.results[0].id}.municipal.systems) and replace the dataTypeId field below `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"incident = await api.place.dataType.datum.find({\n placeId: place.results[0].id,\n dataTypeId: 'traffic-incident',\n options: { \n orderings: [ \n { direction: 'desc', value: { field: 'data.startedAt' } } \n ] \n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"md`${place.results[0].displayName} has a total of ${incident.meta.total} traffic incidents received in Stae. The most recent incident happened at ${recentIncident} [Check out the data source](https://${place.results[0].id}.municipal.systems/types/traffic-incident/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`#### 4) Get the most recent ${place.results[0].displayName} traffic jam, filtered & sorted by date`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"traffic = await api.place.dataType.datum.find({ \n placeId: place.results[0].id, \n dataTypeId: 'traffic-jam', \n options: { \n orderings: [ \n { direction: 'desc', value: { field: 'data.startedAt' } } \n ] \n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"md ` ${place.results[0].displayName} has a total of ${traffic.meta.total} traffic jams received in Stae. The most recent traffic jam started at ${recent} on ${traffic.results[0].data.street}. [Check out the data source](https://${place.results[0].id}.municipal.systems/types/traffic-jam/). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"nycjams = \n{\n let container = html`

`;\n\n\n yield container;\n\n\nlet map = new mapboxgl.Map({\n container,\n center: traffic.results[0].geometry.coordinates[0],\n zoom: 10,\n style: \"mapbox://styles/mapbox/streets-v9\"\n });\n\n // Wait until the map loads.\n map.on(\"load\", () => {\n \nmap.addLayer({\n\"id\": \"route\",\n\"type\": \"line\",\n\"source\": {\n\"type\": \"geojson\",\n\"data\": traffic.results[0].geometry\n},\n\"layout\": {\n\"line-join\": \"round\",\n\"line-cap\": \"round\"\n},\n\"paint\": {\n\"line-color\": \"#ff0000\",\n\"line-width\": 8\n}\n});\n});\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`#### 5) Get a specific Traffic Incident by datumId and display on Mapbox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"incidentDatum = await api.place.dataType.datum.findById({ \n placeId: place.results[0].id,\n dataTypeId: 'traffic-incident',\n datumId: incident.results[1].id\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"md`This traffic incident happened at ${recentIncident} and was reported as a ${incidentDatum.data.notes} ${incidentDatum.data.type} on ${incidentDatum.data.street}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"md `#### 6) Write data to an existing data source\nUse the API to create a data point for an existing source you own.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"md `A) Create the writer. In the key field, copy the source's key from a data source that you own.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"writer = stae.createClient({ key: '327913ab-0362-422e-adcd-08479ea335bf' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"md `B) Create the object based on the data type you're writing to. You can get GeoJSON coordinates from [GeoJSON.io](https://geojson.io) if you don't have any. Double check the data type's fields on our [API documentation](https://municipal.systems/api). The example below writes to a data source in New York`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"await writer.source.datum.create({\n sourceId: 'f7b96365-7074-4a25-8ab5-f8467a8d4c7c',\n data: {\n id: '0405201912103000',\n operators: ['Openbox', 'Stae'],\n hours: '9AM to 6PM, 5 days a week',\n type: 'Marquises Car',\n available: true, \n location: {\n type: 'Point',\n coordinates: [-73.99048715829849,40.744050339871116]\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md `# Notebook Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`##### form stuffs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"object","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"function form(form) {\n form.addEventListener(\"change\", () => form.dispatchEvent(new CustomEvent(\"input\")));\n form.addEventListener(\"input\", () => form.value = formValue(form));\n form.value = formValue(form);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"function formValue(form) {\n const object = {};\n for (const input of form.elements) {\n if (input.disabled) continue;\n let value = input.value;\n switch (input.type) {\n case \"range\":\n case \"number\": {\n value = input.valueAsNumber;\n break;\n }\n case \"date\": {\n value = input.valueAsDate;\n break;\n }\n case \"radio\": {\n if (!input.checked) continue;\n break;\n }\n case \"checkbox\": {\n if (input.checked) value = true;\n else if (input.name in object) continue;\n else value = false;\n break;\n }\n case \"file\": {\n value = input.multiple ? input.files : input.files[0];\n break;\n }\n }\n object[input.name] = value;\n }\n return object;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`##### vizla and vegaEmbed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"vegaEmbed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"vz = {\n const vz = await require('@gjmcn/vizsla');\n vz.Vizsla.prototype.plot = function(opt) {\n return vegaEmbed(this.prep(), opt);\n };\n return vz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`##### mapbox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\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":909,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"md`##### time bandits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"incidentTime = new Date(incident.results[1].data.startedAt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"trafficTime = new Date(traffic.results[0].data.startedAt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"recent = trafficTime.toLocaleString(undefined, {\n \"weekday\": \"long\",\n \"month\": \"long\",\n \"day\": \"numeric\",\n \"hour\": \"numeric\",\n \"minute\": \"numeric\",\n \"second\": \"numeric\",\n \"timeZoneName\": \"short\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"recentIncident = incidentTime.toLocaleString(undefined, {\n \"weekday\": \"long\",\n \"month\": \"long\",\n \"day\": \"numeric\",\n \"hour\": \"numeric\",\n \"minute\": \"numeric\",\n \"second\": \"numeric\",\n \"timeZoneName\": \"short\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`###### shh` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"function Secret(name) {\n switch (name) {\n case \"STAE_API_KEY\": return \"374f2944-2e3b-4c55-9f48-84c6173e70fc\";\n default: throw new Error(\"secret not found\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"mbox = function Secret(name) {\n switch (name) {\n case \"MAPBOX_KEY\": return \"0123456789abcdef\";\n default: throw new Error(\"secret not found\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"