1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="theme-color" content="#101111" /> 7 <title>HyperCities â Thick Mapping</title> 8 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" /> 9 <link rel="stylesheet" href="./styles.css?v=read-gestures-1" /> 10 </head> 11 <body> 12 <main id="app" aria-label="HyperCities map"> 13 <div id="map" aria-label="World map with historical map extents"></div> 14 <div id="core-renderer" aria-label="Three-dimensional historical time core"></div> 15 <button id="timewell-size" class="timewell-size" type="button" hidden aria-label="Expand TimeWell">EXPAND TIMEWELL â</button> 16 <p id="well-caption" class="well-caption" hidden></p> 17 <section id="book-entry" class="book-entry" aria-label="A passage from HyperCities"> 18 <button id="book-entry-dismiss" class="book-entry-dismiss" type="button" aria-label="Enter the map by clicking the background"></button> 19 <div class="book-entry-copy" data-source-quote="quote:010-in-this-respect-hypercities-are-much-larger-than-tw"> 20 <blockquote id="book-entry-quote">âIn this respect, HyperCities are much larger than twenty million inhabitants, since they might embody the entire (largely erased or absent) history of a cityâpotentially every life, every structure, every street, every voice over time.â</blockquote> 21 <button id="book-entry-read" class="book-entry-read" type="button" aria-label="Open page 14 in READ">14 <span aria-hidden="true">â</span></button> 22 <nav class="book-entry-actions" aria-label="Continue from this passage"> 23 <button id="book-entry-next" class="book-entry-next" type="button" aria-label="Show another quotation from the book"><svg viewBox="0 0 35 14" aria-hidden="true"><path d="M2 9 C10 2 14 13 22 6 S30 9 33 3"/></svg>ANOTHER QUOTE</button> 24 <button id="book-entry-enter" class="book-entry-enter" type="button">ENTER THE MAP <span aria-hidden="true">â</span></button> 25 </nav> 26 </div> 27 </section> 28 <header class="masthead"> 29 <div class="masthead-left"> 30 <a class="wordmark" href="./" aria-label="Return to the world map">HYPERCITIES</a> 31 <div class="explore-access"> 32 <button id="index-toggle" class="index-toggle" type="button" aria-haspopup="dialog" aria-controls="site-index" aria-expanded="false">EXPLORE <span aria-hidden="true">âº</span></button> 33 <nav class="explore-shortcuts" aria-label="Explore shortcuts" inert> 34 <button type="button" data-shortcut="read">READ</button> 35 <button type="button" data-shortcut="windows">WINDOWS</button> 36 <a href="./annotations.html">ANNOTATIONS</a> 37 <button type="button" data-shortcut="origins">ORIGINS</button> 38 </nav> 39 </div> 40 </div> 41 <div class="masthead-actions"> 42 <button id="surface" class="surface" type="button" hidden>â MAP</button> 43 <button id="ground-toggle" class="ground-toggle" type="button" aria-controls="ground-control" aria-expanded="false" aria-label="Change map ground"><i aria-hidden="true"></i><span>GROUND</span></button> 44 <button id="help-toggle" class="help-toggle" type="button" aria-haspopup="dialog" aria-controls="help-dialog">?</button> 45 </div> 46 </header> 47 <aside id="ground-control" class="ground-control" aria-label="Map ground and historical layer transparency" hidden> 48 <p class="ground-kicker">GROUND</p> 49 <div class="ground-switch" role="group" aria-label="Map ground"> 50 <button type="button" data-basemap="dark" aria-pressed="true">DARK</button> 51 <button type="button" data-basemap="satellite" aria-pressed="false">SATELLITE</button> 52 <button type="button" data-basemap="google" aria-pressed="false">GOOGLE</button> 53 </div> 54 <label class="ground-veil" for="historical-opacity"><span>MAP OPACITY</span><output id="historical-opacity-value" for="historical-opacity">â</output></label> 55 <input id="historical-opacity" class="ground-opacity" type="range" min="0" max="100" value="100" step="1" disabled aria-label="Historical map opacity" /> 56 <p id="satellite-credit" class="satellite-credit" hidden>WORLD IMAGERY · © ESRI</p> 57 <p id="google-credit" class="satellite-credit" hidden>MAP DATA · © GOOGLE</p> 58 </aside> 59 <div id="depth-indicator" class="depth-indicator" aria-live="polite" hidden></div> 60 <section id="field-prompt" class="field-prompt" aria-live="polite" hidden><p>Move across the map. Press into a place to find its depths.</p></section> 61 <aside id="field-encounter" class="field-encounter" aria-live="polite" hidden></aside> 62 <aside id="encounter" class="encounter" aria-live="polite" hidden> 63 <div id="encounter-content"></div> 64 <div id="journey" class="journey" hidden> 65 <button id="journey-toggle" type="button" aria-expanded="false">TRACE</button>
66 <div id="journey-content" class="journey-content" hidden></div> 67 </div> 68 </aside> 69 <aside id="annotation-float" class="annotation-float" aria-live="polite" hidden></aside> 70 <section id="take-prompt" class="take-prompt" aria-live="polite" hidden> 71 <p>TAKE A MAP</p> 72 <span>Enter a place. Choose a layer. Carry its trace outward.</span> 73 </section> 74 <nav id="touch-navigation" class="touch-navigation" aria-label="Move through time and ideas" hidden> 75 <button type="button" data-touch-move="newer" aria-label="Move to a later map"><span aria-hidden="true">â</span></button> 76 <button type="button" data-touch-move="back" aria-label="Return to the previous place or map"><span aria-hidden="true">â</span></button> 77 <button type="button" data-touch-move="stray" aria-label="Follow the offered lateral path"><span aria-hidden="true">â</span></button> 78 <button type="button" data-touch-move="older" aria-label="Move to an earlier map"><span aria-hidden="true">â</span></button> 79 </nav> 80 <dialog id="help-dialog" class="help-dialog"> 81 <button id="help-close" class="dialog-close" type="button" aria-label="Close help">Ã</button> 82 <p class="eyebrow">ABOUT HYPERCITIES</p> 83 <h1>HyperCities is a city made thick with time, maps, voices, and possible futures.</h1> 84 <p class="help-overview">HyperCities brings <em>HyperCities: Thick Mapping in the Digital Humanities</em>, the historical Map Library, and a source-grounded Hyperbook into one spatial experience. It is neither a conventional academic site nor a recreation of the original GIS platform.</p> 85 <dl class="help-ideas"> 86 <div><dt>MAP</dt><dd>A dark world field holds the real extents of historical maps; GROUND can reveal the satellite present beneath them.</dd></div> 87 <div><dt>TIMEWELL</dt><dd>Choose a place to drill a temporal CORE: each map stays geographically proportioned while its date rises or descends through the well.</dd></div> 88 <div><dt>HYPERBOOK</dt><dd>Maps and actions may evoke exact book passages, concepts, people, events, and source pagesâwith provenance retained.</dd></div> 89 <div><dt>TAKE A MAP</dt><dd>A selected layer can travel outward as a live MapLibre example, a Google Earth Network Link, or a QGIS XYZ source.</dd></div> 90 <div><dt>ANNOTATE</dt><dd>Choose a selected mapâs annotate mark, place a point on the raster, and leave a public note. Existing notes remain tied to their original layer and coordinate.</dd></div> 91 </dl> 92 <p class="help-kicker">A small grammar</p> 93 <p class="help-grammar">Pan and zoom the field. Click or tap to core a place. Move up or down through time. Read the book fragment that enters. Take the named STRAY route when you want a source-grounded lateral turn; TRACE keeps the residue of that dérive. On touch screens, the floating arrows mirror these movements.</p> 94 <p class="quiet">The site remains a simple GitHub Pages build: static files, MapLibre, deck.gl, and no backend.</p> 95 <a class="help-github" href="https://github.com/yohman/hypercities" target="_blank" rel="noreferrer">PROJECT, SOURCE DATA & README ON GITHUB <span aria-hidden="true">â</span></a> 96 </dialog> 97 <section id="site-index" class="site-index" role="dialog" aria-modal="true" aria-label="Ways into HyperCities" tabindex="-1" hidden> 98 <svg id="index-drift" class="index-drift" aria-hidden="true"></svg> 99 <nav class="site-index-nav" aria-label="Ways into HyperCities"> 100 <button id="index-close" class="index-close" type="button" aria-label="Close Explore">Ã</button> 101 <p class="index-intro">Ways into HyperCities</p> 102 <button class="index-route index-route--read" type="button" data-index-read><span>READ</span><small>enter through the book</small></button> 103 <button class="index-route index-route--windows" type="button" data-index-windows><span>WINDOWS</span><small>four stories from the book</small></button> 104 <a class="index-route index-route--annotations" href="./annotations.html"><span>ANNOTATIONS</span><small>enter through the public margin</small></a> 105 <button class="index-route index-route--origins" type="button" data-index-origins><span>ORIGINS</span><small>follow the original platformâs traces</small></button> 106 </nav> 107 </section> 108 <dialog id="stories-window" class="stories-window" aria-labelledby="windows-title"> 109 <button class="windows-close" type="button" data-stories-close aria-label="Close Windows and return to map">â MAP</button> 110 <div data-stories-content></div> 111 </dialog> 112 <dialog id="origins-window" class="origins-window" aria-labelledby="origins-title"> 113 <header class="origins-header"> 114 <div><p class="origins-kicker">HYPERCITIES · THE MOVING ARCHIVE</p><h1 id="origins-title">Origins</h1></div> 115 <button type="button" data-origins-close aria-label="Close Origins and return to the map">â MAP</button> 116 </header> 117 <p class="origins-intro">Cities, lives, and layers from the original HyperCities. Find a place, listen to a voice, or explore a connection across the archive.</p> 118 <div class="origins-content" data-origins-content></div> 119 <footer class="origins-colophon">Source titles preserved. Places and topics are editorial browsing guides. <
119a href="https://www.youtube.com/@hypercitiesproject/videos" target="_blank" rel="noopener">ORIGINAL YOUTUBE CHANNEL â</a></footer> 120 </dialog> 121 <dialog id="hyperbook-window" class="hyperbook-window" aria-label="Read HyperCities"> 122 <button id="hyperbook-window-close" class="window-close" type="button" aria-label="Close book">Ã</button> 123 <article id="hyperbook-window-content"></article> 124 </dialog> 125 <dialog id="take-map-window" class="take-map-window" aria-label="Take this historical map"> 126 <button id="take-map-window-close" class="window-close" type="button" aria-label="Close Take a Map">Ã</button> 127 <article id="take-map-window-content"></article> 128 </dialog> 129 </main> 130
130<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
130 131
131<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
131 132
132<script type="module" src="./js/main.js?v=metadata-read-controls-1"></script>
132 133 </body> 134</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.