Map of Madison bike shops and repair stations for the Madison Bikes website, using Leaflet and RMarkdown.
Bike shop info was manually compiled and entered into a Google Sheet; repair station data is imported from the City of Madison Open Data portal.
The Madison Bikes website runs on Wordpress, which means there are some manual steps required to set up the map.1
- Set the
YAML
header to output ahtml_document
and knit
title: 'Madison Area Bike Shops and Repair Stations'
output:
html_document:
self_contained: false
lib_dir: lib
- Copy the
lib
folder into your Wordpress site root directory viassh
(i.e. the libraries will bemadisonbikes.org/lib
) - Create a new root-level page on Wordpress
- Add an
html
block in the Wordpress editor - Copy all library references from the
map.html
<head>
section into the block (starting from<script src="lib/jquery-1.12.4/jquery.min.js"></script>
and ending at<link href="lib/fontawesome-4.7.0/font-awesome.min.css" rel="stylesheet">
) - Manually adjust the paths to point to the right
lib
directory (i.e. insert../
in front of every relative path to go up to the root directory and then intolib
) - Copy all content between the
<body> ... </body>
tags into the block after the<script>
s.
- Change
YAML
header output format tohtml_fragment
and knit - Copy
map.html
content and paste it into the<body>
section on Wordpress
Footnotes
-
If anyone can think of a more automated solution, let me know. ↩