public_library_map/website/index.html
Hugh Rundle 0bd4b4892f restructure website for better data integration
Big commit here.
This moves the "data" directory inside the website, and then uses fetch to bring the csv and geoJSON files into the map instead of copy-pasting into JS files. Much cleaner and reduces steps from updating a CSV to updating the actual website. Now we simply need to git pull on the webserver (unless the updated data is for library services rather than library locations).

Also cleans up some styling.

Also removes my MapBox secrets from the Git repo whoops. These are now brought in via a secrets.js file that simply declares a constant. This file will not be visible in the repo.

Fixes #14
2021-01-20 09:28:43 +11:00

64 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Library Map</title>
<link rel="shortcut icon" href="/logo.svg" type="image/x-icon">
<!-- css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<header>
<section id="title">
<img id="logo" src="/logo.svg"/>
<h2>Library Map</h2>
<p id="beta">Beta!</p>
</section>
</header>
<nav>
<ul>
<li class="active-tab">Home</li>
<li><a href="/about">About</a></li>
<li><a href="/sources">Acknowledgements</a></li>
<li><a href="/contributing">How you can help</a></li>
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul>
</nav>
<div id="loading">Loading, please be patient...</div>
<!-- leaflet script -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- TopoJSON -->
<script src="https://unpkg.com/topojson@3"></script>
<!-- geocsv -->
<script src="leaflet.geocsv.js" type="text/javascript"></script>
<!-- leaflet fill patterns -->
<script src="leaflet.pattern.js" type="text/javascript"></script>
<section class="intro">
<p>Made by <a href="https://www.hughrundle.net">Hugh Rundle</a> using open data. Play with the layers by using the layer control at the top right of the map.</p>
<p>Email <strong>librarymap@hugh.run</strong> if you have any tips or suggestions.</p>
<p>You need a <a href="https://caniuse.com/?search=fetch">modern browser</a> with JavaScript enabled to use Library Map. This site does not work in Internet Explorer.</p>
</section>
<div id="mode-switch">
<div></div>
<button id="mode-button" name="mode-button">View in White Fragility Mode</button>
</div>
<!-- div to attach everything to -->
<div id="mapid"></div>
<!-- declares mapBoxToken constant -->
<script src="./secrets.js" type="text/javascript"></script>
<!-- this is the guts of it -->
<script src="./load-map.js" type="text/javascript"></script>
</body>
</html>