2f:null 30:["$","title",null,{"children":"Animated Historical Map Chronologies: Code API | Olivia Vane | Observable"}] 35:T4ec,md`

### (2) Map sheet imagery In these notebooks the historic map raster imagery is imported as [XYZ map tiles](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames). By using tile imagery, the sheets are already stitched together. Because tile imagery has already been resampled for different zoom levels, there is no performance issue with animating very large numbers of maps. Eg. the [Six-inch-to-the-mile maps visualisation]() animates ~15,000 sheets. (The individual sheets are revealed in the animation by applying and updating a [clip path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath)). You can either point to a tileserver url (e.g. [\`\`https://tiles.wmflabs.org/bw-mapnik/\${z}/\${x}/\${y}.png\`\`](https://wiki.openstreetmap.org/wiki/Tile_servers)). Or attach a zipped directory of tile images for one zoom level as a notebook file attachment. (This is what I've done in these notebooks as the [tileservers used are not public](https://maps.nls.uk/projects/api/)). See footnote for which tiles to attach.

Unzip directory of tile images (More details about importing images from a zipped directory can be found in these notebooks [1](), [2]()): `36:T4af,md`

#### Customise how the graphic is drawn Options include (pass this options object into the \`\`animated_map\`\` function): - **colour_mode** - \`\`'light'\`\` or \`\`'dark'\`\` (light mode—the default—,or dark mode colour theme) - **animation_speed** - Optional. Takes a number (milliseconds per year in the animation). Default 1000ms/yr. - **sheetsActive_colour** - eg. \`\`'#DB5461'\`\`. Optional override for the colour highlighting new sheets for a year - **draw_sheetOutlines** - set this as \`\`'true'\`\` to draw the outlines of the individual map sheets over the raster imagery - **maps_baseColor** - eg. \`\`'rgb(236,229,214)'\`\`. Optional base colour for the raster imagery in case the map sheet boundary data extends beyond the raster imagery and you want to fill the shape with a paper colour - **shape_behind** - optional geojson object to draw beneath the revealing map sheets - **width_padding** - Add extra width padding to the animation graphic (in pixels) - **translate_x** - Offset the map part of the graphic horizontally (in pixels) - **translate_y** - Offset the map part of the graphic vertically (in pixels) `37:[{"id":"1d7965636bb6c4c7691d06486a7af32eb467f3810631c3eb62b6fcb2930f2dbcff184903994b91e36900f33594e9e623d4f2fe1c02ce8b0842bcb521773ea9b5","href":"https://static.observableusercontent.com/files/1d7965636bb6c4c7691d06486a7af32eb467f3810631c3eb62b6fcb2930f2dbcff184903994b91e36900f33594e9e623d4f2fe1c02ce8b0842bcb521773ea9b5","name":"land.json","type":"application/json","lastModified":1628536015073.069,"size":261484},{"id":"0329b8aeed7ad58698343d0e6690942ed3827fa21a54ca374f1541af80ea8b5d236bc0242caa5d9540354f041ea637f3dc21d0f9318fee7853b63d08a59654ae","href":"https://static.observableusercontent.com/files/0329b8aeed7ad58698343d0e6690942ed3827fa21a54ca374f1541af80ea8b5d236bc0242caa5d9540354f041ea637f3dc21d0f9318fee7853b63d08a59654ae","name":"one_inch_clean.json","type":"application/json","lastModified":1628594153907.047,"size":55208},{"id":"7a0bf880a41951c8f443d0d6f5deae91cdbe1986dfaba32b4a574741b9425dd678663d919a44fb7745ed8f58c04aa4dd02df324c3f8417ca12f9b89bc089b4e3","href":"https://static.observableusercontent.com/files/7a0bf880a41951c8f443d0d6f5deae91cdbe1986dfaba32b4a574741b9425dd678663d919a44fb7745ed8f58c04aa4dd02df324c3f8417ca12f9b89bc089b4e3","name":"8@1.zip","type":"application/zip","lastModified":1628852925306.562,"size":1021699}] 33:{"id":"235c58cad97f5dda","slug":"animated-historical-map-chronologies-code-api","title":"Animated Historical Map Chronologies: Code API","thumbnail":"1c30b7bd9f07b9348d53c9359e7483604f332a9f1c9cf23c99836b1d0b3f661c","access_level":"public","create_time":"$D2021-08-05T11:34:33.815Z","update_time":"$D2023-04-11T17:16:08.370Z","view_time":null,"first_public_time":"$D2023-04-11T17:16:45.233Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":"starter_2024"},"version":881,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null}],"members":[{"type":"individual","id":"ac5315ae69e3a5e3","login":"oliviafvane","name":"Olivia Vane","avatar_url":"https://avatars-next.observableusercontent.com/1d95b23cf0db36d6edeb5a6e81b4f13e828c958c60e5999766ea1953e592b907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c7ac7dc25ccb0c48","slug":"map-animations-to-publish","title":"Animated Map Chronologies","owner":{"id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane"}},"type":"notebook","body":{"title":"Animated Historical Map Chronologies: Code API","cells":[{"id":0,"value":"md`# Animated Historical Map Chronologies: Code API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n

\n## Data and Imagery\n

\n\nTo make a map chronology animation you will need:\n

\n\n### (1) Map sheet boundary + dates dataset, geojson format e.g.:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"one_inch = FileAttachment(\"one_inch_clean.json\")\n .json()\n .then(data => ({ type: 'FeatureCollection', features: data }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"html`

The data used in this notebook is provided by the National Library of Scotland. The data is available for re-use under the Creative Commons Attribution Non-Commercial Share Alike 4.0 (CC BY-NC-SA 4.0) licence. For more information visit https://maps.nls.uk/copyright.html.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"{\n const one_inch_copy = JSON.parse(JSON.stringify(one_inch)); // deep clone\n const map1 = vl\n .markGeoshape({ fill: \"\", stroke: \"gray\" })\n .data([one_inch_copy]);\n\n const one_inch_centroid = {\n type: \"FeatureCollection\",\n features: one_inch_copy.features.map((d) => ({\n ...d,\n centroid: d3.geoCentroid(d)\n }))\n };\n\n const map2 = vl\n .markText({ fill: \"black\", fontSize: 10, dy: 1 })\n .data(one_inch_centroid.features)\n .encode(\n vl.longitude().fieldQ(\"centroid[0]\"),\n vl.latitude().fieldQ(\"centroid[1]\"),\n vl.text().fieldN(\"properties.YEAR\")\n );\n\n return vl\n .layer(map1, map2)\n .height(600)\n .width(600)\n .view({ stroke: \"transparent\" }) // removes chart border\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`Reshape the geojson to create two new datasets: organising the data by year, and cumulatively by year:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"one_inch_byYear = {\n let year_min = d3.min(one_inch.features.map(d => +d.properties.YEAR)),\n year_max = d3.max(one_inch.features.map(d => +d.properties.YEAR));\n\n let one_inch_filtered_byYear = [];\n for (let i = year_min; i <= year_max; i++) {\n one_inch_filtered_byYear.push({\n year: i,\n data: {\n type: \"FeatureCollection\",\n features: one_inch.features.filter(feature => {\n return feature.properties.YEAR == i;\n })\n }\n });\n }\n return one_inch_filtered_byYear;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"one_inch_byYear_cumulative = one_inch_byYear.map(d => ({\n ...d,\n data: {\n type: \"FeatureCollection\",\n features: one_inch_byYear\n .filter(k => k.year <= d.year)\n .map(k => k.data)\n .map(k => k.features)\n .flat()\n }\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"import { zip, zipreader } from \"@fil/jszip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"folder_zip = FileAttachment(\"8@1.zip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"files_resolved = {\n // Create Map of file paths to promises\n const files = await zipreader(folder_zip, { type: 'base64' });\n // Create new Map resolving all the promises to each image encoded as base64\n let resolved_promises = await Promise.all(files.values());\n let keys = [...files.keys()];\n let new_map = {};\n for (let i = 0; i < keys.length; i++) {\n new_map[keys[i].replace(\".png\", \"\")] = resolved_promises[i];\n }\n return new_map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`Whether you are pointing to a tileserver url or using a file attachment, create a function (below called \\`\\`url_oneInch\\`\\`) with arguments \\`\\`x,y,z\\`\\` that resolves to an image for that zoom, x, and y.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"url_oneInch = (x, y, z) =>\n `data:image/png;base64,` + files_resolved[`${z}/${x}/${y}`]\n\n// Example url function pointing instead to tileserver url (switch this in for the function above, and see what happens to the graphic at the bottom of the page)\n// url_oneInch = (x, y, z) =>\n// `https://tiles.wmflabs.org/bw-mapnik/${z}/${x}/${y}.png\t`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`\n

\n\n### (3) Background shape data (optional)\nE.g. shape of Great Britain, to show beneath the revealing map sheets. Geojson format:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"gb = FileAttachment(\"land.json\").json()\n// This was created from \"https://bost.ocks.org/mike/map/uk.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"vl\n .markGeoshape({ fill: \"lightgray\" })\n .data([gb])\n .project(vl.projection('mercator'))\n .view({ stroke: 'transparent' }) // removes chart border\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n

\n## Create Animation\n\n[Import](https://observablehq.com/@observablehq/introduction-to-imports) the function \\`\\`animated_map\\`\\` (which generates the graphic) and [\\`\\`viewof\\`\\`](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof) \\`\\`year\\`\\` (which surfaces the animation scrubber) from the template notebook and swap in the new data. Set the graphic's width here as it is needed to determine the map projection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"width_oneInch = 380","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { animated_map, viewof year } with {\n one_inch_byYear as year_data_features,\n one_inch_byYear_cumulative as year_data_features_cumulative,\n url_oneInch as url,\n width_oneInch as width,\n options\n} from \"a78b35a4c53c6e4c\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"options = ({\n width_padding: 200,\n animation_speed: 1000,\n shape_behind: gb,\n draw_sheetOutlines: true,\n colour_mode: \"light\", // or 'dark'\n translate_x: -50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"md`\n

\n## Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof year","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"animated_map(options)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`This demo displays the OS One-inch-to-the-mile 1st Edition maps of Scotland. For more information about these maps, see [this notebook](). For an annotated version, narrating the patterns that appear, see this [notebook]()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"mdIt`---\n### Footnote\nHow do you find out what zoom level of XYZ tiles to attach?\nTo check which zoom level is expected by the animation (which will depend on the animation size), import a function called \\`\\`tile \\`\\` from the template notebook with the other imports, as so:\n~~~js\nimport { animated_map, viewof year, tile } with {\n ...etc\n~~~\n\nThen, call \\`\\`tile()\\`\\` in a separate cell. This implements the [\\`\\`d3.tile\\`\\`](https://github.com/d3/d3-tile#tile) function and returns an array of [x, y, z] arrays representing the x- (horizontal), y- (vertical) and z- (zoom) integer coordinates of the tiles to be displayed. So you can tell what the expected z (or zoom) level of tiles is to attach.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"import { mdIt } from '@sgregson/md-plus'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"