hugh/public_library_map
hugh/public_library_map
1
Fork 0
Code Issues 9 Pull requests Actions Packages Projects Releases Wiki Activity

Mobile friendly #19

Merged
hughrun merged 6 commits from mobile-friendly into master 2021-01-24 13:00:18 +11:00
Conversation 0 Commits 6 Files changed 9 +454 -349
9 changed files with 454 additions and 349 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -14,7 +14,7 @@ See [sources](sources.md).
## Want to help?
See [contributing](contributing.md).
See [contributing](contributing.md), especially *[which files to update](https://github.com/hughrun/public_library_map/blob/master/contributing.md#which-files-to-update)*.
## Licenses

2
contributing.md
View file

@ -19,7 +19,7 @@ To update information about library *locations* (e.g. street address, phone numb
* `website/data/nsla_library_locations.csv`
* `website/data/public_library_locations.csv`
Do not directly edit JSON files - these are [updated programatically](about.md#important-files-that-are-not-in-this-repository).
Do not directly edit JSON files - these are [updated programatically](https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository).
### Citing and crediting data sources

2
sources.md
View file

@ -41,7 +41,7 @@ Library locations are generally provided by state government departments.
| Source | Link | License |
|--- |--- | ---|
| Libraries Tasmania / data.gov.au | [Libraries Tasmania locations](https://data.gov.au/dataset/ds-dga-409f7f64-35ef-4a70-8db1-dd737a6fabec/details?q=libraries) | CC-BY 4.0 |
| Vicmap Features of Interest | https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest | CC-BY 4.0 |
| Vicmap Features of Interest | [data.vic.gov.au FoI](https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest) | CC-BY 4.0 |
| ACT Open Data Portal | [ACT Libraries locations](https://www.data.act.gov.au/dataset/Library-Locations-Map/3nit-7kex) | CC-BY 4.0 |
| NSW State Library (NSW library locations and contacts) | [Public library services](https://www.sl.nsw.gov.au/public-library-services/about-public-library-services/find-public-library-nsw) | © (fair dealing) |
| State Library of Queensland | [Queensland public libraries directory](https://www.data.qld.gov.au/dataset/public-libraries) | CC-BY 4.0 |

7
website/about/index.html
View file

@ -15,7 +15,6 @@
<h2>About Library Map</h2>
<p id="beta">Beta!</p>
</section>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
@ -25,6 +24,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul>
</nav>
</header>
<main>
<section class="info-page">
<h2 id="about-library-map">About Library Map</h2>
<p>This project collects and maps data from public libraries across the Australia and the external Australian Territories of Christmas Island and the Cocos (Keeling) Islands. In the long term I hope to include more data that can be combined and cross-referenced, e.g. library funding from local and state governments, HILDA data etc.</p>
@ -61,5 +62,9 @@
<li>National &amp; State Libraries</li>
</ul>
</section>
</main>
<footer>
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
</footer>
</body>
</html>

28
website/contributing/index.html
View file

@ -15,7 +15,6 @@
<h2>Contributing to Library Map</h2>
<p id="beta">Beta!</p>
</section>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
@ -25,26 +24,49 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul>
</nav>
</header>
<main>
<section class="info-page">
<h2 id="contributing">Contributing</h2>
<p>I’d love your help to make <em>Library Map</em> as accurate and useful as possible.</p>
<h3 id="how-to-contribute-your-idea-bug-report-or-improvement">How to contribute your idea, bug report or improvement</h3>
<ol type="1">
<li>You can <a href="https://github.com/hughrun/public_library_map/issues">create an issue</a> on GitHub.</li>
<li>You can <a href="https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li>
<li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code></li>
<li>You can <a href="https://docs.github.com/en/github/.collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li>
<li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code>.</li>
</ol>
<h3 id="which-files-to-update">Which files to update</h3>
<p>To update information about library <em>services</em> (e.g. fines info, loan period etc) you should edit <code>website/data/library_services_information.csv</code></p>
<p>To update information about library <em>locations</em> (e.g. street address, phone number, coordinates) you shoudl edit the relevant csv location file:</p>
<ul>
<li><code>website/data/indigenous_knowledge_centre_locations.csv</code></li>
<li><code>website/data/mechanics_institute_locations.csv</code></li>
<li><code>website/data/nsla_library_locations.csv</code></li>
<li><code>website/data/public_library_locations.csv</code></li>
</ul>
<p>Do not directly edit JSON files - these are <a href="https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository">updated programatically</a>.</p>
<h3 id="citing-and-crediting-data-sources">Citing and crediting data sources</h3>
<p>If you are adding a lot of data and have a new source for it, make sure it is cited. You should update the list of sources at both <code>sources.md</code> <em>and</em> <code>website/sources/index.html</code>. If your source is “I just know because it’s my local library” or “I looked it up on their website” you don’t need to add that to the list of sources. If your source is “I found a PDF listing every public library on the State Library website”, you do.</p>
<h3 id="missing-or-inaccurate-data">Missing or inaccurate data</h3>
<p>Currently we’re missing data for some library services in relation to <strong>standard loan periods</strong> and <strong>fines for overdue items</strong>.</p>
<p>It’s likely that some <strong>library location data</strong> is inaccurate — especially for New South Wales. It’s also possible that the address data is wrong (even though the location shown may be correct), and in some cases it is missing.</p>
<p>It’s possible that some of the <strong>fines data for Queensland</strong> is a little off. This came from the State Library of Queensland but I know for a fact that some of the data was wrong (e.g. Gold Coast Libraries does not charge overdue fines, but the SLQ reports says it does).</p>
<p>I am particularly interested if you know of data sources for entire regions, states, or Australia — especially if they’re reliably kept up to date.</p>
<p>If you can fill in any of these blanks, please update the relevant CSV file and send a pull request. If your data is coming from somewhere in particular, you should also add that to <code>sources.md</code> in the relevant table.</p>
<h3 id="ideas-for-additional-data">Ideas for additional data</h3>
<p>You might have an idea for library data that would be useful to map. I’m really happy to hear about these ideas! It’s possible that the information you want to map is unavailable, or just really hard to get, or maybe I will disagree that it’s useful. That’s ok - please ask anyway, expecially if you know where to find the data.</p>
<h3 id="improvements-to-documentation">Improvements to documentation</h3>
<p>I’m always — <em>always</em> — happy to hear how I can improve documentation. Even better if you make the edit and then send a pull request.</p>
<h3 id="improvements-to-the-website-design-layout-or-information">Improvements to the website design, layout, or information</h3>
<p>You might have an idea for an improvement that’s not about the data per se, but rather about the website. Maybe there’s some accessibilty improvements I can make. Let me know!</p>
<h3 id="licensing-and-copyright">Licensing and copyright</h3>
<p>By contributing to this project you agree to license your work under the following licenses:</p>
<p><strong>/website/data/*</strong>: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a></p>
<p><strong>everything else</strong>: <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPL-3.0-or-later</a></p>
</section>
</main>
<footer>
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
</footer>
</body>
</html>

8
website/index.html
View file

@ -19,7 +19,6 @@
<h2>Library Map</h2>
<p id="beta">Beta!</p>
</section>
</header>
<nav>
<ul>
<li class="active-tab">Home</li>
@ -29,7 +28,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul>
</nav>
</header>
<main>
<div id="loading">Loading, please be patient...</div>
<!-- leaflet script -->
@ -57,6 +57,10 @@
<script src="./secrets.js" type="text/javascript"></script>
<!-- this is the guts of it -->
<script src="./load-map.js" type="text/javascript"></script>
</main>
<footer>
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
</footer>
</body>
</html>

68
website/load-map.js
View file

@ -74,7 +74,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
layer.on({
mouseover: e => highlightFeature(e),
mouseout: e => resetHighlight(e, fines),
click: zoomToFeature
click: e => zoomToFeature(e, feature.properties),
})
}
});
@ -320,10 +320,11 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
}
// add control layers
var isSmallScreen = window.screen.availWidth < 800;
var mapControl = L.control.layers(
baseMaps,
overlayMaps,
{ "collapsed" : false }
{ "collapsed" : isSmallScreen }
).addTo(map);
// scale
@ -344,17 +345,21 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
setGeneral()
mapControl.remove();
infoBoxes.branches.remove()
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map);
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
if (!isSmallScreen) {
infoBoxes.branches.addTo(map)
}
} else {
sessionStorage.setItem('mapMode', 'fragile');
setFragile()
mapControl.remove();
infoBoxes.branches.remove()
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map);
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
if (!isSmallScreen) {
infoBoxes.branches.addTo(map)
}
}
}
modeButton.addEventListener('click', switchMode, false);
@ -379,15 +384,32 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
if (!isSmallScreen) {
infoBoxes.serviceInfo.addTo(map)
infoBoxes.serviceInfo.update(layer.feature.properties);
infoBoxes.serviceInfo.update(layer.feature.properties)
}
}
function zoomToFeature(e, props) {
map.fitBounds(e.target.getBounds());
e.target.bindPopup(`
<strong>${props.name}</strong>` +
`<p>Fines: ` +
(
props.fines === "no" ? "No" :
props.fines == "no_unconfirmed" ? "Probably no" :
props.fines === "yes" ? "Yes" :
props.fines == "adults" ? "No for children" :
props.fines == "by_lga" ? "Varies by LGA" : "Unknown"
) +
`<br/>Loans : ` +
(!props.standard_loan_weeks || props.standard_loan_weeks == "?" ? `Unknown` : `${props.standard_loan_weeks} weeks`) +
`</p>`
).openPopup()
}
// clear on mouseout
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function resetHighlight(e, layer) {
layer.resetStyle(e.target);
infoBoxes.serviceInfo.remove()
@ -423,7 +445,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
<h4>Library Branches</h4>
<p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p>
`};
infoBoxes.branches.addTo(map) // add by default
if (!isSmallScreen) {
infoBoxes.branches.addTo(map) // add by default it larger screen
}
// STANDARD LOAN PERIOD LEGEND
infoBoxes.loanPeriod.onAdd = addLegend;
@ -485,23 +509,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
)}
}
// remove info boxes & markers when relevant layer is removed
map.on('overlayremove', l => {
if (l.name == "Fines") {
infoBoxes.fines.remove()
}
if (l.name == "Loan Period") {
infoBoxes.loanPeriod.remove()
}
})
// add info boxes & markers when relevant layer is added
// loan period layer is always at bottom
map.on('overlayadd', l => {
if (l.name == "Fines") {
infoBoxes.fines.addTo(map)
}
if (l.name == "Loan Period") {
infoBoxes.loanPeriod.addTo(map)
loanPeriod.bringToBack()
}
})
@ -523,6 +533,10 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
mapControl.removeLayer(overlayMaps[i])
overlayMaps[i].remove()
}
if (!isSmallScreen) { // only add infoboxes to larger screens
infoBoxes.loanPeriod.addTo(map)
infoBoxes.fines.addTo(map)
}
modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant
} else {
mapControl.removeLayer(fines)
@ -533,7 +547,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
for (let k in overlayMaps ) {
mapControl.addOverlay(overlayMaps[k], k)
}
infoBoxes.branches.addTo(map);
if (!isSmallScreen) {
infoBoxes.branches.addTo(map)
}
modeButton.setAttribute('class', 'visible');
}
})

9
website/sources/index.html
View file

@ -15,7 +15,6 @@
<h2>Sources &amp; Attributions</h2>
<p id="beta">Beta!</p>
</section>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
@ -25,6 +24,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul>
</nav>
</header>
<main>
<section class="sources">
<h2 id="sources-attributions">Sources &amp; Attributions</h2>
<p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p>
@ -145,7 +146,7 @@
</tr>
<tr class="even">
<td>Vicmap Features of Interest</td>
<td>https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest</td>
<td><a href="https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest">data.vic.gov.au FoI</a></td>
<td>CC-BY 4.0</td>
</tr>
<tr class="odd">
@ -181,5 +182,9 @@
</tbody>
</table>
</section>
</main>
<footer>
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
</footer>
</body>
</html>

135
website/style.css
View file

@ -1,3 +1,13 @@
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
html,
body {
font-family: "Calibri", Arial, Tahoma, sans-serif;
@ -5,6 +15,13 @@ body {
padding: 0;
}
code,
pre {
font-family: "Jetbrains Mono", "Consolas", "Courier New", monospace;
background-color: #eee;
padding: 0 0.5em;
}
a,
a:active {
color: #FF3961;
@ -25,13 +42,27 @@ a:hover {
header {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: auto 1fr auto;
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
color: #fff;
}
/* NAVIGATION */
/* ========== */
nav {
margin: 0;
padding: 0;
grid-row: 3;
}
nav,
nav ul {
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
margin: 0;
padding-left: 2em;
}
nav li {
@ -56,8 +87,52 @@ nav li a:hover {
.active-tab {
color: #000;
background-color: #fff;
border-top-right-radius: 10px;
}
@media only screen and (max-width: 800px) {
nav ul {
margin-left: 0;
padding-left: 0;
}
nav li {
display: block;
margin: 0;
padding: 0.5em 0 0.5em 1em;
border-color: #777;
border-left: none;
border-right: none;
}
}
#title {
display: flex;
align-items: center;
margin: 0;
padding: 0.5em 1em;
}
#logo {
height: 4em;
margin: 0 1em;
}
#beta {
font-family: "Comic Sans", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.4em;
margin-left: 1em;
transform: rotate(-35deg);
background-color: #fff;
color: #FF3961;
padding: 0.25em 0.5em;
border-radius: 5px;
}
/* loading */
/* ======= */
#loading {
font-family: "Calibri", Arial, Tahoma, sans-serif;
font-size: 20px;
@ -107,36 +182,10 @@ nav li a:hover {
font-family: "Calibri", Arial, Tahoma, sans-serif;
}
header {
margin: auto;
display: grid;
grid-template-columns: auto 1fr auto;
padding: 0.5em 1em;
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
color: #fff;
}
#title {
display: flex;
align-items: center;
}
#logo {
height: 4em;
margin-right: 1em;
}
#beta {
font-family: "Comic Sans", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.4em;
margin-left: 1em;
transform: rotate(-35deg);
background-color: #fff;
color: #FF3961;
padding: 0.25em 0.5em;
border-radius: 5px;
footer {
border-top: 1px solid #eee;
width: 100%;
text-align: center;
}
#mode-switch {
@ -169,10 +218,12 @@ header {
}
table {
margin: auto;
border-collapse: collapse;
table-layout: fixed;
border: 1px solid #000;
width: 80%;
margin: 0 auto 0 -25%;
width: 150%;
max-width: 54em;
}
thead {
@ -190,21 +241,23 @@ tbody td {
padding: 0.5em 1em;
}
.sources table {
margin: 0 auto 0 -25%;
width: 150%;
max-width: 54em;
}
/* when below max width of para */
@media only screen and (max-width: 54em) {
.info-page,
.sources {
width: 95vw;
padding: 0 2.5vw;
}
.sources table {
table {
margin: 0 auto;
width: 100%;
max-width: 100%;
max-width: 100vw;
font-size: smaller;
}
td {
line-break: anywhere;
}
}