Telling Geospatial Stories with WordPress

Presenter: Hello. Good afternoon, morning, or night, depending on your time zone. My name is Jeff Everhart and I'm Telling geospatial stories with WordPress. I want to give background about me and what I've done with WordPress.

I'm a web and application developer working at Virginia Commonwealth University working in the Alt Lab. I have an eclectic background and started my education to be an English teacher. I've taught a lot of classes online in educational studies before transitioning to web development. My pronouns are he/him.

As far as technical abilities/skills, I enjoy working in programming in an environment, and working to accomplish a task. If you check out my website, I have an eclectic variety. There's geospatial stuff, systems development, making chat box in Amazon Web Services and language processing with JavaScript or Python. I am a JavaScript junky.

I've worked with WordPress doing theme and plugin development to create educational tools, some of which you'll see. I'm a big fan of Google Apps Script to automate a lot of stuff as part of our job.

My other developer Streett cred, I have blown up at least one server user rm rf. If you're interested in following my work, there are two great ways to do that. 1, I have a blog Jeffereyeverhart.com. I Tweet at J_Everhart.

A lot of what I show you today is a process of the larger team, the ALT Lab R & D team. We're in an interesting position, having been in the higher ed field for a decade. We're designers, media specialists, and online administrators. ALT Lab RN & D is three people, including myself.

We have the benefit of doing ed techne development and brought in to assess problems and build automatons. We're transitioning to Canvas and helping to build courses to scale.

We run and support Rampage, WordPress multisite installation, around 30K sites on there. We have 30K users, not all active. A large, multisite installation that takes up a lot of time.

On our team, we have admin, web development and design capabilities. We are well-rounded and complement each other and are able to produce some cool work.

We automate the boring parts using Google Apps Script. It's a talk I'd love to give at some point, but worth checking out.

We are small and mighty and support everything we build or add to Rampage. Before we get into stuff, I wanted to give a disclaimer about bandwidth. Who is burnt out over the last 6 months? Juggling children and getting our work done . . . I was hoping things would more polished. I am trying to be kind. "You're dealing with a pandemic and working with 30K on time so it's okay you only spent 10% of time on the fun and interesting projects."

This opportunity is a way to get feedback before we go to see what you think of it and where you'd go with faculty and students and where to go with it. I'm interested in your Q & A and give you time to ask questions.

I'll go ahead and get started. I wanted to tackle the topic. Over the last several years at VCU, we are pulled into talks with faculties, who want to build a product with geospatial. I say "geospatial" with geographic data and attribute data about the varying levels that we want to display in a different/interesting way.

In 2016, we started to tackle/got these requests. In the beginning, it was D3, the method we used to create some interactive and geospatial components outside of WordPress.

Because it was outside of WordPress and in D3, a fairly bare bones visualization library, it took time and they became time consuming and finding and cleaning the data was difficult to do. We also wanted to say− our larger goal, as part of ALT Lab was to recognize the patterns that faculty request across our group and build tools with multiple faculty needs, that they can build on their own, without me building it for them.

I want to take a look at a couple examples of what we build in early 2016. We have a popular density map built for a particular class so they could look at population density across Virginia County. We had a comment book and decided to analyze CDC data and create map of opioid death rates by each state.

We included statistical and color scale filters to illuminate the process of data visualization. People see a map and don't analyze the process we used to come up with the result. We visualizing total deaths is different than deaths per 100K data.

When telling stories as part of assignments, these distinctions are important and we want students to think about it as producers and consumers. There are choices we make, as creators, to impact the way the story is viewed and the narrative it fits.

We read a great book about the opioid epidemic and created the resource as a supplement so professors could use this and look at the different between total deaths, and deaths per 100K. Here, it looks like the situation is bad in CA, but in reality, it has a ton of people. We apply a different statistical filter and get a different result. Different scales, different results. It's a way to bring to light what happens behind the scenes as people create geospatial visualizations.

The problem with that− it took a ton of time to produce. One, I was responsible for finding the data, cleaning the data, joining geographical data with statistical data from CDC and making it a nice, interactive visualization.

We are interested in easier ways to do this, as we discovered throughout the process. We are trying to use WordPress to make this repeatable and make the tools easier to interact and easier for our team.

As I mentioned, thought pattern is to double down on patterns. We interacted with faculty and saw repeating requests, or 75-85% similar. "As a team, we want to find a way to annotate geospatial data or to support a specific narrative." A lot of people at VCU, an urban RI institution, using Richmond metro area, as an exploratory space for courses. You'll see this in a few examples coming.

These are what we identified. We need to build something to make it easier for people to collect geospatial data. We need something that supports the arguments, like maps and data visualization like you saw.

We'll look at a couple examples to help people collect/annotate data.

Our general development process is iterative and build our initial prototypes using simple tools before investing in developing a larger theme/plugin that could be drop in ready.

The first is this Bicycle Urbanism course. This was created for the same course. There was an international bike race that shut down a lot of downtown Richmond. A lot of interest went into this and themed courses came about. This scenario essentially allowed students to explore the area and document the bicycling conditions and map them on the document to see where the bicycling conditions were good vs. not.

Clearly the red indicates an unsafe bike condition. The green indicates a good one. Same with the blue here. It's "okay."

It's an interesting assignment for the students. One, they undergo the experience of exploring the larger Richmond environment to collect the data. Two, what are the public planning/policy that geospatial stories into changing this. There were a number of unsafe conditions and when the students showed to appropriate officials, they were addressed. It's a great way to have them involved in a real-world environment and enact real change in a course.

When you come to "Submit information" thing, it sends us to another page. This page collects our latitude and longitude and passed in a URL parameter and sucked up to a regular gravity form.

We submit it and it's displayed in mapping results page. In terms of development time, not a lot was invested. We use Gravity Form for the submission and show the mapping results in the plugin.

An interesting project with low overhead in terms of overhead time, in making this. Once someone sees this, someone else wants it, but different, or they want something more customized. That's where we get into− once we see repeat patterns and this happens, we take 75-85% and build a robust solution to drop in a course site and get them running. If we need visual customizations like CSS, we handle that using build in appearance tools.

The second one is the result of that investment into a more robust theme.
This course was "Social Justice and the City" and focuses on gentrification. The students were asked to explore the Richmond Metro area and show instances of gentrification. Do we see yoga and Starbucks across from ethnic grocery stores and barbershops? What happens when we talk to the residence that are gentrified and how do they perceive it?

This is similar. This is drag and drop. We build it as a theme, not a plugin. I'll field questions for why, later. The short answer is that if anyone is familiar with SPOT, simplest possible learning online tool, we follow that terminology. This is the thing.

If you want another site with a different look and feel, fine. This is a tool in and itself and it generates the page that it needs to function. It's contained, not meant to be modified. That's why we went that route. I'm sure someone will ask this in the questions and I'll talk about the later.

This works similarly. It has a method for adding. If I wait, it'll geospatial locate me. It allows us to generate categories and will show up on the left-hand side and add an image and a particular point and submit it.

It allows you to stop the geolocation thing. I could select a point in space. We could do that, too. I build a lot of stuff for the way we view this. There's stuff on the left-hand side that we filter by. We can click "read more" for a detailed page.

These students did media production and interviewed people experiencing gentrification and did a podcast. It's a tool to capture the geospatial data, but because it's WordPress, it handles the media, the video, podcast, etc. It gave the instructor flexibility for handling the interviews and represent them in the best way. This is the piece.

The points give us a list of the map points. The instructor asked us to create different layers of stuff. "Can we create a heat map so students can look at where they spend most of their time?" There was a category removed for privacy.

They essentially logged their common places, where they ate lunch, went to class, hung out later, etc. That way they could visualize the heat map compared to the gentrified areas. This was easy using a Leaflet add on, a customization that someone said, "It'd be neat if we do this." We had the bones built so it was easy to show the heat map.

When the student logs in, I'm an admin and I see everyone's post and map points. The students see theirs. When reviewing the heat map layer, they only viewed their own stuff.

Let's hop out of that. Again, those are examples of what we have done to build tools to collect and annotate data. We used the theme for a lot of varying purposes. Now that we're at the end of the spring semester, when everyone went remote, VCU was urban so we had a wide range of areas, from VA and out of state. Some people said, "Wait and see where people are at" and we used the map tool to create a map of people in the course and where they were at. It was a way they could do interesting things that we didn't plan on. It's neat.

Once you invest in building a tool like this, I am interested in how often people coop it for a purpose other than what I anticipated, rewarding as an educational technologist.

From here, we'll hop into examples for using maps to support narratives. I'll give a little background on the project. This doesn't have to do with WordPress. It's initial. Our development process is us creating lowest fidelity prototype to test it and make sure it's what people want before building it out to a comprehensive solution.

We were tasked with working with student/faculty researchers who studied the migratory patterns of the warbler. This is an important bird migrating from North American to a mangrove ecosystem in Panama. The mangrove ecosystem was destroyed. As a predictor of global warming, it's an important bird, in the opinion of these researchers.

We messed around with ways to pair the narrative of the bird's journey to North America and central/South America. As things have gotten warmer and seasons change, it messes up the migration pattern. They arrive in Mexico expecting spring and larvae to eat. It's throwing a lot for a loop.

This is what we built in Code Pen that does what we said. It has narrative text here. As we scroll, we draw this list line on the map. I'll close out this window. We follow the bird's migration to Panama. Nothing serious. We wanted to see how to do it, if it was a good way to represent it? We build this using a library Scrollama JavaScript library, created by a group at "The Pudding".

It's a fantastic site if you're into bespoke data visualization. They do a fantastic job. If you get nothing else and think I'm a total idiot, go look at "The Pudding". The Scrollama library is fantastic, they do a scroll telling stereotype. We scroll through the text and use an "intersection observer" to trigger different functions to run in the code.

The nice thing, it's totally agnostic. Some examples they give in the tutorial use the D3 library. You could use it with D3, with leaflet, etc. It's up to you to determine what change you're trying to illicit in visualization, what libraries you use to do it. There are no real restrictions other than HTML markup to create sections that are triggered when entering/exiting the viewport.

I can also go forward in time and go backward. We thought this was really promising. One, I don't think we ended up using it for this project. We said, "There's enough here so we should think about what makes this more robust." I will switch to the code view. I won't look at a ton of code, but this is worth showing. This was fairly easy to make, in 2-3 hours.

When you look at how we build it, there's hard coded data for the waypoints. When we talk about maintainability, a web development team of 3 people supporting a large faculty and student base, we thought, "we can't make this bespoke and we have to manage the data." This is where WordPress stepped in, when we looked at managing the geospatial data in a way that makes it easier for someone else to do without a programmer making up a JSON array.

We'll hop into the presentation and see what it took to make this configurable. We forgot the first theme and coopted to provide a scrolly experience. Instead of adding in particular data from the geolocation. We don't collect data, researchers/students have already compiled it. We want to make it interactive and combine map visualization with narrative and make them trigger changes on the map based on the data associated with them.

The project we used to kick off the development of that theme was Mapping Black Religion by a colleague who is a former VSU, now at Yale, Dr. Nicole Turner was writing "Soul Liberty: The Evolution of Black Religious Politics in Postemancipation Virginia." She wanted to tablet vote tallies and interesting stuff that begs to be displayed here. I'll go with this. Scrollama.

This goes to Mapping Black Religion and forgot the other theme and made changes to do what we want. This allows us to create the scrolling experience. The process for managing the geographical data, sadly, is really involved, particularly because of the constraints of Nicole's research. We looked at the post-emancipation period, from the 1860s to the 1870s, and had to look at shape files and did black magic and RGS in GeoJSON.

There was a lot of manual massaging and I'm not sure the best approach to it. We use professional level tools like ArcGIS and I am looking for the future for building similar tools to WordPress to allow data management and make it easier for Nicole, which is something she passed off to me to do and it was my responsibility to combine this with the other stuff to get something we could visualize. We have a nice narrative that Nicole wrote. As we step through the sections, it processes different changes and restyle this layer.

We can add points with additional description. Obviously, styling different polygons and different areas on the fly. I'll show you what it looks like on the WordPress backend in a second.

I'll go back here. I'll close that out. Here we go. This is the test site that we built. We created custom post types. Some, we don't currently use. We have a narrative section we use to create the narrative. Down here, this's advanced custom fields to help the user process map transition files. We can data bind to the attribute field or property on the feature. We can specify the color, pattern, opacity, etc.

The author can me it what they want without having to interact with a web developer. In addition, we come down here and process transitions on the map. Like zooming, panning, focus latitude. This is a default view; we were looking at the entire state of Virginia.

We could go from Richmond City and Spotsylvania, from one transition section to the other. It gives us the ability to throw in a title. Each has a bit of additional context. You have the ability to add in the different points, like a leaflet map with the rich text here.

A lot of customizability goes along with the faculty and it works well for us. Our long-term goal was editing the geographical data, but it's tricky to do, number one. I'd be interested if people have done it before, like polygons, attribute data, etc. It can get tricky. A point location isn't too tough. We have description, post body, post fields with latitude and longitude and features can get muddy. We look to involve it in with the tool and a friendlier interface. Again, it's not in the current version.

Check out Nicole's work. It's fantastic. I was happy to support her. It's definitely a good look into religion. This is a companion to her book. As COVID happened, we put that on hold. We are hoping there's guidance for the fall semester and we can hop into that and pick up where we left off and continue our work there.

In terms of code, there's a method that I'm not really happy with and worth changing. As awesome as ACF is, they can look bulky and be hard to use. There's room for using the Gutenberg interface and make blocks to do this in a better-looking fashion. But it's very template driven and can be messy when we write the front end JavaScript.

Where I've gone since, we had the opportunity to make a geospatial tool as the COVID outbreak happened. We were asked to make a prototype for creating a website for crowdsourcing Wi-Fi hotspots, to provide students who don't have internet with internet access. We looked at public libraries who have that as in option. The legal people squashed it. "What if someone gets mugged in the parking lot." We made it and went nowhere.

This one is a single page application build with a view. The theme is one Index.PHP file and the application is injected into it. The interaction with the back end is done with custom routes in WordPress API. I linked a blog post and talked about my design choices. It's interesting. I don't know if it's totally headless. It's hybrid headless. It's not separated from WordPress, it's WordPress theme, and the apps are supported by WordPress.

Obviously, the data we save and retrieve is generated by the custom API routes. It's an interesting way− if it's not totally separate; Gaxby or NUCs are hosted elsewhere. We get a hybrid approach, a single page application, but with benefits of being on the WordPress site, using WordPress cookies for authentication. It's the best of both worlds.

If you're looking into headless stuff, look at the blog post. It helped me with problems in trying to separate them, totally. There's a separation of concern benefit by removing them entirely, but creates more problems, authenticated requests to the API and having people log in and out. This seems to solve these parts.

Either way, this is the route we take with this moving forward. We want to take what we have and say, "How do we rewrite it so the data is provide by the REST API and all the rest is through it." The front-end code is easier to code. This is the response I get from WordPress API. I don't have to do parsing to get to it. It's a custom route and I control what the response looks like, in a way you don't get with a build in response, even if you have a custom post through REST API.

When I talk about geospatial stuff and WordPress, people are like, "Why did you use WordPress? Why not StorMap or Neatline, etc.?" Those are valid concerns. For some, we use ArcGIS. Some of these are specific answers to our group. This gives us tech stack for the project. If we build something, we're answering the emails when it breaks.

The more we get into this, the less control we have, especially as a team of three people. There's a lot out there. We have a base level understanding of WordPress and can take apart theme or plugin. We can hop in and out of projects based on the familiarity. If Jeff can't go in, then Tom or Matt can go in and fix it.

ArcGIS costs a lot of money. There's money allocated to it. It's difficult to get them to commit what they will support for one off classes. It's not a GIS class, but World Studies looking at gentrification. It's hard to find the budget to support this.

I have found that WordPress is easy to transport. Like the example above, Nicole and I worked on the project while she was faculty at VGU and moved to Yale. I said, "Get a hosting account and we'll expert it and there we go and it can live wherever and we can work on it outside of a university ecosystem." This provides continuity. It's easy to bring people in and out with WordPress as the base.

Eventually, "standard." This is my experience working with faculty that are expert and have high bars for what they put out there. "Standard" isn't enough for most people. They say, "I don't like the look/feel and I want to change it." We have total control. We don't have to make a JavaScript do something that it is not meant to do.

I say that, but there are struggles. I'll go through some of these. This has made the storytelling aspect of WordPress and creating geospatial stuff easier, the process of transforming and organization it is very difficult. It's part of the game, to some degree. As the world is more data centric, we see the change. Now, for example, I can get good datasets in GeoJSON about bus stops, incidents of crime and these really cool things.

In some cases, there's no choice but to take on the manual, data munching work, to get it in a usable format. I am forward thinking about what role can work and if it makes sense and how we do that and what it looks like.

The other struggle I have, I alluded to when talking about templated story telling example is totally API generated. Sometimes mapping the fields to the custom objects can be cumbersome. I think that's solved by the API and unveils more PHP programming, creating the route, getting data from WordPress, transform it to what you want, but it's more tenable than having the front end dealing with it than WordPress Suite.

Obviously, WordPress API responses are what they are and are super helpful for some things. It's an annoyance with a lot of development work. I'd rather say, "This is what the object looks like." Like this, for example, and then I have the mental model. Instead of looking at WordPress's custom field and what you have to do to include that. Make sure it's included in the response.

There are benefits for the method. I am finishing one minute ahead of time. Do we have a few seconds? I can do Q and A here or I can hop in and answer the questions that people have asked.

Room Host: You are correct. We are about out of time. Fortunately for those that have questions, use "Ask a Question" on the session page and Jeff can answer the questions. I want to thank you for the presentation and the information you provided.

Presenter: Thanks. Thanks for tuning in.