2b:null 2c:["$","title",null,{"children":"Situated Views of Rio de Janeiro | Martim Passos | Observable"}] 31:T160e,viewof m1 = { // define constants const YEAR_MIN = 1800; const YEAR_MAX = 1950; const MAP_CENTER = [-43.19, -22.93]; const MAP_ZOOM = 11; const MAP_MAX_BOUNDS = [ [-43.852873, -23.125182], [-42.995993, -22.701798] ]; const MAP_STYLE = "mapbox://styles/mapbox/satellite-streets-v11"; // create elements const searchInput = html` `; const countDisplay = html`

`; function updateMapFilters() { let filterId = document.getElementById("search-input").value.trim(); let filterCreator = creatorSelect.value !== "All" ? ["==", "creator", creatorSelect.value] : ["==", "$type", "Point"]; let filterStatus = statusSelect.value === "All" ? ["==", "$type", "Point"] : ["==", "status", statusSelect.value]; //let filterYearMin = [">=", "firstyear", filterYearMin]; //let filterYearMax = ["<=", "lastyear", filterYearMax]; map.setFilter("points-layer", [ "all", filterId ? ["in", "document_id", filterId] : ["==", "$type", "Point"], filterCreator, filterStatus //filterYearMin, //filterYearMax ]); } const creatorSelect = select({ title: "Filter by creator", options: creators }); creatorSelect.addEventListener("change", () => { updateMapFilters(); }); const statusSelect = select({ title: "Filter by status", options: ["All", "Complete", "Scanned", "Reviewed", "Geolocated"] }); statusSelect.addEventListener("change", () => { updateMapFilters(); }); //filter by input document.getElementById("search-input"); // .addEventListener("keypress", function (e) { // var key = e.which || e.keyCode; // if (key === 13) { // 13 is enter - if key is enter key, read out value of text field // var id = e.target.value.trim(); // if (getIndex(id) > -1) { // filterId = ["==", "Source ID", id]; // highlight(id, map); // } // if (id == "") { // filterId = ["==", "$type", "Point"]; // } else { // filterId = viewcones.features.reduce( // function (memo, feature) { // if (feature.properties["document_id"].indexOf(id) == 0) { // memo.push(feature.properties["document_id"]); // } // return memo; // }, // ["in", "document_id"] // ); // } // updateMapFilters(); // } // }); function createTimeSlider(minValue, maxValue) { const timeSlider = html`

${minValue}

${maxValue}

`; return timeSlider; } const timeSlider = createTimeSlider(YEAR_MIN, YEAR_MAX); const mapContainer = html`

`; const mapWrapper = html`

${timeSlider} ${creatorSelect} ${statusSelect} ${searchInput} ${countDisplay} ${mapContainer}

`; // add elements to the page yield mapWrapper; // create map const map = new mapboxgl.Map({ container: mapContainer, center: MAP_CENTER, zoom: MAP_ZOOM, maxBounds: MAP_MAX_BOUNDS, style: MAP_STYLE, scrollZoom: true }); // add map controls and data map.addControl(new mapboxgl.NavigationControl(), "top-right"); map.on("load", function () { // add terrain layer map.addSource("mapbox-dem", { type: "raster-dem", url: "mapbox://mapbox.mapbox-terrain-dem-v1", tileSize: 512, maxzoom: 14 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 }); // add a sky layer that will show when the map is highly pitched map.addLayer({ id: "sky", type: "sky", paint: { "sky-type": "atmosphere", "sky-atmosphere-sun": [0.0, 0.0], "sky-atmosphere-sun-intensity": 15 } }); map.addSource("polygons", { type: "geojson", data: mapData.viewcones }); map.addSource("points", { type: "geojson", data: points }); // add points layer map.addLayer({ id: "points-layer", type: "circle", source: "points", filter: ["==", "$type", "Point"], paint: { "circle-radius": 3, "circle-stroke-color": "white", "circle-stroke-width": 0.5, "circle-color": [ "match", ["get", "status"], "Complete", mapData.arrstatus["complete"].color, "Reviewed", mapData.arrstatus["reviewed"].color, "Scanned", mapData.arrstatus["scanned"].color, mapData.arrstatus["geolocated"].color ] } }); // create viewcones layer map.addLayer( { id: "cones-layer", type: "fill", source: "polygons", paint: { "fill-color": "rgba(255, 255, 255, 0.5)" }, // show none by default filter: ["all", ["==", "$type", "Polygon"], ["in", "document_id", ""]] }, "points-layer" ); }); }32:T563,legend = { const size = 7; const page = html`

<\div>`; return page; }33:T46d,

A catalogar (${mapData.arrstatus["scanned"].items.length}):

${mapData.arrstatus["scanned"].items.sort().join(".jpg \n")}.jpg

A digitalizar (${mapData.arrstatus["reviewed"].items.length}):

${mapData.arrstatus["reviewed"].items.sort().join(".jpg \n")}.jpg

34:T1363,html``35:T696,function processData(geojson, metadata) { var statusCounts = { geolocated: { color: "#eff3ff", items: [] }, scanned: { color: "#6baed6", items: [] }, reviewed: { color: "#bdd7e7", items: [] }, complete: { color: "#2171b5", items: [] } }; var combinedGeojson = { type: "FeatureCollection", features: [] }; geojson.features.forEach(function (feature) { var id = feature.properties.document_id; var item = metadata.find(function (item) { return item.DocumentID === id; }); if (item) { if (item.DocumentURL && item.MediaURL === "") { feature.properties.status = "Reviewed"; statusCounts.reviewed.items.push(item.DocumentID); } else if (item.MediaURL && item.DocumentURL === "") { feature.properties.status = "Scanned"; statusCounts.scanned.items.push(item.DocumentID); } else if (item.MediaURL && item.DocumentURL) { feature.properties.status = "Complete"; statusCounts.complete.items.push(item.DocumentID); } else { feature.properties.status = "Geolocated"; statusCounts.geolocated.items.push(item.DocumentID); } var metadataItem = metadata.find(function (obj) { return obj.DocumentID === id; }); if (metadataItem) { var mergedObj = { ...feature, properties: { ...feature.properties, creator: metadataItem["Creator"], provider: metadataItem["Provider"] } }; combinedGeojson.features.push(mergedObj); } } }); console.log(statusCounts); return { viewcones: combinedGeojson, arrstatus: statusCounts }; }36:T8d8,function highlight(id, map) { if (map.getLayer("cones-layer-clicked")) { map.removeLayer("cones-layer-clicked"); } const popup = document.getElementsByClassName("mapboxgl-popup"); if (popup.length) { popup[0].remove(); } let index = getIndex(id); let target = mapData.viewcones.features[index]; // create clicked viewcones layer map.addLayer({ id: "cones-layer-clicked", type: "fill", source: "polygons", filter: ["all", ["in", "document_id", id]], paint: { "fill-color": "rgba(255, 255, 255, 0.6)" } }); let title = target.properties.title; let creator = target.properties.creator; let date = target.properties.Date; let FirstYear = target.properties["firstyear"]; let LastYear = target.properties["lastyear"]; let thumb_url = target.properties.thumbnail; let status = target.properties.status; let thumbnail = `

`; // get bearing from cone with same id let bearing = mapData.viewcones.features[index].properties.heading; let statuscircle = ``; // zoom to feature and align map to viewcone map.flyTo({ center: target.geometry.coordinates[0][0], zoom: Math.max(14, map.getZoom()), offset: [0, 80], bearing: bearing, pitch: 60 }); // show popup with thumbnail and metadata var popupClick = new mapboxgl.Popup({ anchor: "right", //if //offset: 80 offset: { top: [0, 0], "top-left": [0, 0], "top-right": [0, 0], bottom: [0, 0], "bottom-left": [0, 0], "bottom-right": [0, 0], left: [0, 0], right: [-100, 0] } //closeButton: false }) .setLngLat(target.geometry.coordinates[0][0]) .setHTML( "

" + id + "

" + thumbnail + "

" + title + "

" + `Creator: ${creator}` + "

" + FirstYear + " - " + LastYear + statuscircle + "

" ) .setMaxWidth("200px") .addTo(map); }37:T4d2,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }38:[] 2f:{"id":"4ab2a5edc048c3a3","slug":null,"title":"Situated Views of Rio de Janeiro","thumbnail":"07047a516921b304ab160edf50061a31cbc1e675e5273c8584c7403078a8e9f1","access_level":"public","create_time":"$D2023-05-16T17:21:10.950Z","update_time":"$D2023-05-17T14:57:06.573Z","view_time":null,"first_public_time":"$D2023-05-16T17:21:10.950Z","fork":{"id":"cd0a8e93e9bb0007","slug":"situated-views-of-rio-de-janeiro","title":"Situated Views of Rio de Janeiro","owner":{"id":"ef1ddc8589891073","login":"imaginerio","name":"imagineRio"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b84b76879e79d3b0","login":"martimpassos","name":"Martim Passos","avatar_url":"https://avatars-next.observableusercontent.com/519c186cca8d332bacf9df96f2da4e8c70ffc3aa3e2158d4e3fedd135e9fe479","tier":"starter_2024"},"version":3344,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"75f4b5c388755f01","login":"martimpassos","name":"Martim Passos","avatar_url":"https://avatars-next.observableusercontent.com/519c186cca8d332bacf9df96f2da4e8c70ffc3aa3e2158d4e3fedd135e9fe479","tier":null},{"type":"individual","id":"fe65ee7f9556cf90","login":"mechlerc","name":"Cíntia Mechler","avatar_url":"https://avatars-next.observableusercontent.com/cb85cce6a0c4647011104d04191a88d903dbe75dd1670f552e80bfda664b8c40","tier":null}],"members":[{"type":"individual","id":"75f4b5c388755f01","login":"martimpassos","name":"Martim Passos","avatar_url":"https://avatars-next.observableusercontent.com/519c186cca8d332bacf9df96f2da4e8c70ffc3aa3e2158d4e3fedd135e9fe479","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Situated Views of Rio de Janeiro","cells":[{"id":0,"value":"md`# Situated Views of Rio de Janeiro`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3031,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"html`

Usage:

Hover over point to preview viewcone
Click on point to lock viewcone and display available thumbnail and metadata
Click on map to reset pitch and orientation
Use the filters to narrow down results by year, creator or identifier

Authors:

\nMartim Passos, Cíntia Mechler, Maiara Pitanga\n

Data:

\nInstituto Moreira Salles

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"// table(\n// metadata.map((item) => createTable(item)),\n// { title: \"Project Data\", pageSize: 5 }\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`#### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2641,"value":"imsGeolocated = mapData.viewcones.features\n .filter(\n (feature) => feature.properties.provider == \"Instituto Moreira Salles\"\n )\n .map((item) => item.properties.document_id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2422,"value":"points = pointsGeojson(mapData.viewcones)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"mapData = fetch(\n \"https://raw.githubusercontent.com/imaginerio/imaginerio-data/main/output/import_viewcones.geojson\"\n)\n .then(function (response) {\n return response.json();\n })\n //viewcones = FileAttachment(\"import_viewcones@4.geojson\").json()\n .then((r) => formatDates(r))\n .then((r) => getThumbs(r))\n .then((r) => processData(r, metadata))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"creators = {\n let creators = getUniquePropertyValues(metadata, 'Creator');\n creators.unshift(\"All\");\n return creators;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"metadata = d3\n .csv(\n \"https://raw.githubusercontent.com/imaginerio/imaginerio-data/main/output/ims_metadata.csv\"\n )\n .then((r) => renameColumns(r))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3108,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3098,"value":"function getUniquePropertyValues(arr, prop) {\n let uniqueValues = [];\n let tempValues = {};\n\n for (let i = 0; i < arr.length; i++) {\n let value = arr[i][prop];\n\n if (value !== undefined && !(value in tempValues)) {\n tempValues[value] = true;\n uniqueValues.push(value);\n }\n }\n\n return uniqueValues;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2446,"value":"// function createTable(item) {\n// let index = getIndex(item.DocumentID);\n// let thumb =\n// index != -1 ? viewcones.features[index].properties.thumbnail : null;\n// console.log(thumb);\n// return {\n// Identifier: md`**${item.DocumentID}**`,\n// Thumbnail: html`

`,\n// title: `${item.title}`,\n// Creator: `${item.creator}`,\n// Date: `${item.Date}`,\n// Latitude: md`${parseFloat(item.Latitude).toFixed(5)}`,\n// Longitude: md`${parseFloat(item.Longitude).toFixed(5)}`\n// };\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"function renameColumns(data) {\n data.map(function (i) {\n Object.keys(i).map((item) => {\n if (item.indexOf(\" \") > 0) {\n var n = item.split(\" \").join(\"\");\n i[n] = i[item];\n delete i[item];\n }\n });\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2172,"value":"getThumbs = function (geojson) {\n geojson.features.map(async function (feature) {\n let id = feature.properties.ss_id[0];\n let sizes;\n try {\n await fetch(`https://iiif.imaginerio.org/iiif/${id}/info.json`)\n .then((response) => response.json())\n .then((data) => (sizes = data.sizes[0]));\n let width = sizes.width;\n let height = sizes.height;\n feature.properties.thumbnail = `https://iiif.imaginerio.org/iiif/${id}/full/${width},${height}/0/default.jpg`;\n } catch (error) {\n console.log(error);\n feature.properties.thumbnail = null;\n }\n });\n return geojson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"function getIndex(id) {\n return mapData.viewcones.features\n .map((feature) => feature.properties[`document_id`])\n .indexOf(id);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"pointsGeojson = function (geojson) {\n let newGeojson = {\n type: \"FeatureCollection\",\n features: []\n };\n geojson.features.map(function (polygon) {\n var point = polygon.geometry.coordinates[0][0];\n var properties = polygon.properties;\n var feature = {\n type: \"Feature\",\n properties: properties,\n geometry: {\n type: \"Point\",\n coordinates: point\n }\n };\n newGeojson.features.push(feature);\n });\n return newGeojson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"function formatDates(data) {\n data.features = data.features.map(function (feature) {\n feature.properties.lastyear = feature.properties.lastyear\n ? new Date(feature.properties.lastyear).getUTCFullYear()\n : 1800;\n\n feature.properties.firstyear = feature.properties.firstyear\n ? new Date(feature.properties.firstyear).getUTCFullYear()\n : 1800;\n\n return feature;\n });\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"mdPlus`#### To do:\n- [X] Busca por id ou outros metadados\n- [X] Filtro dropdown de autores\n- [X] Slider de data\n- [X] Centralizar/zoom in no ícone ao buscar ou clicar\n- [X] Rotacionar mapa para alinhar com direção da foto\n- [ ] Cluster de fotos próximas\n- [X] Usar ícone de câmera?\n- [X] Diferenciar itens por cor (publicados no Omeka, faltando imagem em alta)\n- [X] [Adicionar terreno? 🤯](https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/)\n- [X] Fixar pop-up no canto esquerdo superior ou direito inferior\n- [ ] Implementar [seleção lasso](https://codesandbox.io/s/mapbox-lasso-select-i0ytlx?file=/src/index.js)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"md`#### Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"import { input } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"import {table} from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"import {mdPlus} from \"@tmcw/bonus-markdown-flavor\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.1.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoiYmVuamFtaW5hZGsiLCJhIjoiY2p4bndvOHp6MDB0MTNucXVudzU5MGh6NiJ9.w0jaZd2EhKnoe0ttahUmuQ\"\n const href = await require.resolve(\"mapbox-gl@2.1.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"

" + id + "

" + title + "

" + FirstYear + " - " + LastYear + statuscircle + "

Usage:

Authors:

Data:

See also: