28:null 29:["$","title",null,{"children":"Native Land Territories and Land Acknowledgement | Shipeng Sun | Observable"}] 2f:T6ff,mapV = { const container = yield htl.html`

`; let map = L.map(container, {doubleClickZoom: false}).setView([40.7678, -73.9645], 11); let esriImage = L.tileLayer.provider('Esri.WorldImagery'); let cartoMap = L.tileLayer.provider('CartoDB.Positron').addTo(map); let ntL = L.topoJson(null, { weight: 1, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", }); /* ntL.bindPopup(l => { return '\ \ \ \ \

ID	' + l.feature.properties.ID + '
Name	'+l.feature.properties.Name+'
Slug	' + l.feature.properties.Slug + '
Website	' + l.feature.properties.description + '

'; }); */ ntL.addData(native_territories_01_16_2023); ntL.addTo(map); L.control.layers({"ESRI Imagery": esriImage, "Carto Location": cartoMap}, {"Native Territories": ntL} ).addTo(map); map.fitBounds(ntL.getBounds()); map.on('dblclick', e => { let names = [], p = turf.point([e.latlng.lng, e.latlng.lat]);; ntL.eachLayer(l => { //set(viewof landStatementText, "inside: " + l.feature.properties.Name); if(turf.booleanPointInPolygon(p, l.feature)) { //debugger; names.push(l.feature.properties.Name); //debugger; } if(l.isPopupOpen()) l.closePopup(); }); //debugger; set(viewof landStatementText, "I acknowledge that I live on the occupied/unceded/seized territory of the " + formatNameSeries(names) + " peoples." ); }); }30:T93f,mapV1 = { const container = yield htl.html`

`; let map = Lk.map(container, {doubleClickZoom:false}).setView([40.7678, -73.9645], 11); let esriImage = Lk.tileLayer.provider('Esri.WorldImagery'); let cartoMap = Lk.tileLayer.provider('CartoDB.Positron').addTo(map); let ntL = Lk.topoJson(native_territories_01_16_2023, { weight: 1, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", }).bindPopup(l => { return '\ \ \

Name	'+l.feature.properties.Name+'
Slug	' + l.feature.properties.Slug + '

'; }).addTo(map); L.control.layers({"ESRI Imagery": esriImage, "Carto Location": cartoMap}, {"Native Territories": ntL} ).addTo(map); map.fitBounds(ntL.getBounds()); map.addControl( new Lk.GeoSearchControl({ provider: new Lk.OpenStreetMapProvider(), style: 'button', // or bar zoomLevel: 9, autoClose: true, notFoundMessage: 'Cannot find the address.', keepResult: true, }), ); // r, m: result, marker map.on('geosearch/showlocation', r => { //debugger; //set(viewof landStatementText, "coord: " + r + "\n\n" + r.location.x + ", " + r.location.y); //console.log(r); let names = [], p = Lk.turf.point([r.location.x, r.location.y]); ntL.eachLayer(l => { //set(viewof landStatementText, "inside: " + l.feature.properties.Name); if(Lk.turf.booleanPointInPolygon(p, l.feature)) { names.push(l.feature.properties.Name); } }); set(viewof landStatementText, "I acknowledge that I live on the occupied/unceded/seized territory of the " + formatNameSeries(names) + " peoples." ); }); map.on('dblclick', e => { let names = [], p = Lk.turf.point([e.latlng.lng, e.latlng.lat]);; ntL.eachLayer(l => { //set(viewof landStatementText, "inside: " + l.feature.properties.Name); if(Lk.turf.booleanPointInPolygon(p, l.feature)) { names.push(l.feature.properties.Name); } }); set(viewof landStatementText, "I acknowledge that I live on the occupied/unceded/seized territory of the " + formatNameSeries(names) + " peoples." ); }); }31:T503, Lk = { // Pack all the libraries into a single variable/instance/object/module Lk. // L_base contains leaflet and several plug-ins. Those plug-in cannot be on their own. They must work along with leaflet. let L_base = await require('leaflet@1.9.4', 'leaflet-providers@1.13.0', 'leaflet-geosearch@3.11.1/dist/geosearch.umd.js'); // turf is independent from leaflet, but here we add it as a member/variable of the bigger pack. L_base.turf = await require("@turf/turf@6"); // TopoJOSN and topoJson are directly added as functions of L_base L_base.TopoJSON = L_base.GeoJSON.extend({ addData: function (data) { var geojson, key; if (data.type === "Topology") { for (key in data.objects) { if (data.objects.hasOwnProperty(key)) { geojson = topojson.feature(data, data.objects[key]); L_base.GeoJSON.prototype.addData.call(this, geojson); } } return this; } L_base.GeoJSON.prototype.addData.call(this, data); return this; } }); L_base.topoJson = function (data, options) { return new L_base.TopoJSON(data, options); }; // Export L_base to Lk return L_base; } // */ /* Use Lk for basic Leaflet and Leaflet providers. Use Lk.turf for turf functions. */32:[{"id":"61d1dd304f3a575a6f086996671e98cf17519e39fe03132ce2d789b5a077a01488b73829b9fdfc75a0885613ca48edf3882b19fd237af39ea9c9fd00bda1a57a","href":"https://static.observableusercontent.com/files/61d1dd304f3a575a6f086996671e98cf17519e39fe03132ce2d789b5a077a01488b73829b9fdfc75a0885613ca48edf3882b19fd237af39ea9c9fd00bda1a57a","name":"native_territories_01_16_2023@1.topojosn","type":"application/octet-stream","lastModified":1674365001580.199,"size":1207090}] 2c:{"id":"3dcd050fecff9864","slug":null,"title":"Native Land Territories and Land Acknowledgement","thumbnail":"a6e2907781e197a3962a9f8417c5dbd32ad153170cd06ac93a1c5b231d6e7d83","access_level":"public","create_time":"$D2023-01-22T04:33:46.826Z","update_time":"$D2024-04-25T02:29:02.114Z","view_time":null,"first_public_time":"$D2023-01-22T04:33:46.826Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":619,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Native Land Territories and Land Acknowledgement","cells":[{"id":0,"value":"

Native Land Territories and Land Acknowledgement

","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"

\nMap the land of Native Americans and help generate a preliminary indigenous land acknowledgement for further revision. \nThe data is from [Native Land Digital](https://native-land.ca/). Sample indigenous land acknowledgement is based on [Guild from NEEF](https://www.neefusa.org/guide-to-indigenous-land-acknowledgment).

","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"viewof landStatementText = Inputs.textarea({label: html`Indigenous Land Acknowledgement`, placeholder:\"I acknowledge that I live on the occupied/unceded/seized territory of the ____ peoples.\", width: (width - 100)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"

\nDouble click on the map to generate a sample statement for that location.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"

\nYou can also just search an address by using the search tool on the top-left corner.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"L = await require('leaflet@1.9.4', 'leaflet-providers@1.13.0');","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"turf = await require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":" L.topoJson = function (data, options) {\n return new L.TopoJSON(data, options);\n };\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"

\n\nWhen load Leaflet library with extensions or other additions, it might be better not to name the object __L__ because __L__ is the default Leaflet object automatically loaded by OberservableHQ.

To avoid confusion and interference, rename our own Leaflet class to a different name.

\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"It is important to import the associated __css__. Otherwise, many things will not display correctly.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"native_territories_01_16_2023 = await FileAttachment(\"native_territories_01_16_2023@1.topojosn\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"To import a local JS library, see [the link](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/4).\n\nBasically, we need to use\nfoo = require(await FileAttachment(\"foo.js\").url()). Note that some Leaflet plugins will load Leaflet automatically as dependency while some don't. \n","pinned":false,"hidden":false,"mode":"html"},{"id":313,"value":"

Debug JavaScript Notebook on Observable

","pinned":false,"hidden":false,"mode":"html"},{"id":315,"value":"

\nIn ObservableHQ, it is often necessary to use __console.log__ function to \"print\" some intermediate results. This practice is also very common in regular JavaScript debugging.
Unlike the regular JavaScript, where we can easily set break point in IDE or Browser's Developer Tools, it is little bit hard to put break point in JavaScript Notebook because the user's JS code is deeply embedded in the JS code that renders the Notebook itself. In this situation, we can use the __debugger__ statement to force a pause/break, which will allow the Browser to show the JS code block where the debugger statement is located.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"L.TopoJSON = L.GeoJSON.extend({\n addData: function (data) {\n var geojson, key;\n if (data.type === \"Topology\") {\n for (key in data.objects) {\n if (data.objects.hasOwnProperty(key)) {\n geojson = topojson.feature(data, data.objects[key]);\n L.GeoJSON.prototype.addData.call(this, geojson);\n }\n }\n return this;\n }\n L.GeoJSON.prototype.addData.call(this, data);\n return this;\n }\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"formatNameSeries = function (names) {\n if(names.length < 1) return '';\n if(names.length == 1) return names[0]; \n if(names.length == 2) return names[0] + ' and ' + names[1];\n let lName = names.pop();\n return names.join(', ') + ', and ' + lName; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"(viewof landStatementText).querySelector(\"label\").style.width = '180px';\n// Discussion on the label width\n// https://observablehq.com/d/ab8cd2ed34740752\n// https://github.com/observablehq/inputs/issues/57","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"makeCellsScreenWide = function(cellW = width) {\n d3.selectAll('.normalText').style(\"max-width\", cellW + \"px\");\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"//import {makeCellsScreenWide} from \"@suncodeearth/misc-functions-library\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"makeCellsScreenWide();","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"