I made an adventure map for Oaxaca, Mexico and here's what I learned

Oaxaca State in Southern Mexico is an absolute gem of a place. It has incredible beaches, several rugged mountain ranges, dozens of hiking and biking trails, over 3000 mezcal distilleries, seven types of mole, intact indigenous cultures, coffee, chocolate, microclimates, immense biodiversity, and a walkable capital city with a nice arts scene. If you haven't been to Oaxaca yet, definitely put it on your list.

In late 2018 / early 2019, I launched a map and adventure guide called Oaxaca Explorer. Oaxaca Explorer is meant to help Oaxaca travelers find hiking/biking trails, cabins, waterfalls, and other interesting off-the-beaten-path destinations to explore. I wrote this short piece to describe why/how I made it and what I learned.

Background

Oaxaca has long been a 2nd home of mine. I first visited in 2011, after a stint of crewing on sailboats down Mexico's Pacific Coast. I ended up working at a hostel in Oaxaca City and doing a lot of side trips (on the gringo backpacker trail). In 2014, I moved back to work remotely and study web development on my own. During that 8 month stay, I spent a lot of time exploring Oaxaca’s mountains. One of my friends, Carlos, had a car and we’d spend most weekends out exploring gravel roads, hiking, or swimming in waterfalls. Sometimes we’d rally a crew, stay in some nice cabins, and finish the days with a meal of fresh trout, beans, and rice. Off the gringo track, Oaxaca’s mountains and ecotourism parks are mostly empty of tourism. Many of these small towns have built some nice cabins, small restaurants, and trails, but don’t seem to know how to attract tourists/travelers to them. We'd often be the only ones staying at them. Meanwhile, down in the Oaxaca Central Valleys (where the capital city is), thousands of tourists would visit Monte Alban, El Tule (an enormous Cypress tree), and Hierve El Agua. Hierve El Agua has become so crowded (in particular) that people have to show up at dawn or dusk to get their Instagram photos. As cool as those three main spots are, it frustrated me that more people were not seeing Oaxaca's trails, mountains, and waterfalls. To me, there's just nothing as refreshing as a Sunday morning hike, a single track MTB rip, or sipping hot chocolate and Mezcal by the fire in a comfy cabin at a chilly 10,000 ft. I wanted more people to have these experiences and the ecotourism towns to have more customers. So when I returned to Oaxaca in 2018, I set off to create a free map-based information site.

Making OaxacaExplorer

Looking back, making a site like this seems quite simple. But somehow, it still took a lot of work. Here are the rough steps I took:

Collecting the Data

Like most sites, the core of this site is its data. For this site, the data is either map locations, map linepaths or strings, or text for the articles. To get this data, I biked or hiked many of these trails with friends. The other routes came from friends sending me their GPX data (from Strava, Gaia GPS, Garmin or similar). I used Gaia GPS as my master trail repository, which also allowed me to convert the GPX to GeoJSON. The big map is pulling from a large GeoJSON array of Points and LineStrings. I learned that GeoJSON arrays can get quite huge and bog down a map. Thankfully, I found a really nifty NPM module for simplifying the GeoJSON tracks (maxogden/simplify-geojson). This module applies the Ramer–Douglas–Peucker algorithm to the GeoJSON linepaths, essentially removing excess data. It was so cool to see the file size shrink 5x while still having almost exactly the same resolution. It’s odd to think there was just all this extraneous data in there not really adding anything to the route.

Mapping the Data

I mapped the GeoJSON file of trails and routes using React, Material-UI, and React-Leaflet. I typically use google-map-react for React mapping projects but it didn’t have a simple way to work with GeoJSON. Leaflet, on the other hand, has built-in support for GeoJSON and Leaflet is pleasant to work (and well-documented). The trickiest part of the map design was deciding how clicks and hovers would change styles and interactivity. I initially opened up the marker/line popups on hover. It was nice for browsing over the map (with the mouse) but I eventually found this frustrating and confusing. It was too easy to accidentally open popups you didn’t mean to. I eventually settled for mouse hover changing the line styles while click would open the popup. Hovering on the Cards (on the left), opens the popup on the item on the map and pans to that area on the map. This can be a bit jarring but overall I think it helps someone figure out where that route/place is.

Creating the Pages

I opted to create the overall site with Wordpress to get things up and running sooner. The Avada Wordpress theme I used had a ‘Travel’ demo with some great template pages. I reasoned it would faster to create the site this way vs. rolling my own React-driven CMS. However, in hindsight this created more work than it saved. The adventure page content lives on Wordpress while the map data lives on a separate standalone React app. Having these two data sources makes for a lot of tedious linking of pages and data duplication. These hassles make it less fun to add new data to the site. It also made it more complex to a create relationships between the content types (individual trail pages have destination page parents).

Taxonomies and Relationships

If you click on a trail page on the map, you probably want it to take you
a page where you can learn more about that trail. And you’d also like to probably know where that trail lives (in which park or region). Originally, I linked the trails on the map to the pages where those trails were at. So trail A in XYZ area would link to the page on XYZ area. But this ended up feeling like a substandard functionality to me. If I don’t really know anything about trail A or XYZ area (as you would visiting a new place for the first time) it would be confusing to be linked to XYZ area when you clicked on trail A. To fix this, I created pages for each trail. I then used a Wordpress plugin to display the GPX data for that trail and allow people to download it. Again, this is data duplication and makes it really tedious to add/update content. The problem with having my content live in two places was having to create the trails on the map and then create a trail page in Wordpress. The beauty of a CMS would be having one source of truth that both the map and pages would pull from. I will not make this mistake again.

Writing the Blog Posts

The original purpose of the site was to make it far easier for travelers to get into Oaxaca’s mountains. To do this, they needed to know about things like where to rent bikes and how to take public transit to different towns. This is where my Spanish and connection with locals helped. I made some calls to different people and bus companies and compiled the various bus routes into a helpful blog post. It felt good to be providing knowledge that lives literally nowhere else.

Creating the Paper Map

I wanted travelers coming through Oaxaca to know about the site I made. Instagram, Facebook and word of mouth have provided a steady trickle of traffic. But I also wanted to reach people offline. So next I took the same data and created a map brochure to be distributed around Oaxaca City. I used the open source QGIS program to design the map on MapBox tiles. This was a whole other fun project as paper maps need different design elements vs. digital maps. The trickiest part of the paper map is adding just enough data. The map wasn’t meant to be used for actual trail navigation so much as inspiration to check out the website (and download the trails). Still, I wanted it to be generally helpful and aesthetically pleasing. The biggest tweaks that made the map more usable was bringing down the opacity of the topograpy tilelayer, adding labels, and making a legend for the types of activities you could do at each spot. I outputted large PNGs from QGIS and used Canva to create the final map, legend, and brochure. I then contacted some local Oaxaca hostels, restaurants, tour companies, and coffeeshops to sponsor the printing costs. I didn’t make any money off of them but they did help distribute the brochure to travelers coming through.

What I learned and would do differently

The site is a success overall. I got to bike and hike a lot, learn more about map making, cut my teeth on QGIS and paper map making, and learn from some valuable development mistakes (mostly around data duplication). That said, my regret is not having spent more time on the actual content. I envisioned being able to write or curate really interesting original content on things like Oaxaca coffee growing regions, Oaxaca’s 700+ species of ferns, the history of Los Pueblos Mancomunados, ecotourism volunteer projects, and generally more deep dives into the botany, cultures, and microregions of Oaxaca. Because I spent so much time tinkering with the React interface, I didn’t have enough time to develop the content I really wanted to. In hindsight, it would have probably been better to just focus 60% on original content development and 40% on a basic map site. Once the map site had gained some traction and esteem, it would justify a bunch of a custom development work. But...oh well. I did get to learn a lot. I merely mention this as a point for people thinking about doing a similar project. Do you want to spend your time diving in and creating content about the place? Do you want to spend your time getting better at digital tools? Something in between? It’s easy to underestimate how much time ‘simple’ projects can take.

I love the practice of creating web content, interfaces, and sites to ultimately help people get off the web and go see cool things in the REAL world. I’m looking forward to working on more projects like this.