We need to start cleaning up the components if this is gonna scale to a month of mapping
Day 1 was quick and dirty. There wasn't much time to write about any details, one of the big ones being that I used mapbox to build the map and I intend on using it through all 30 challenges. I threw together a map with a single point based on 3 different tutorials provided by mapbox in a new vite project and then ported over the code into this blog.
Step 1 was getting a map to render in a react project. This was pretty simple and I just followed the tutorial exactly minus the part about adding controls. I didn't really need to add that for this first day. The other change I made was where the map center was based, in this case I set it to be the location of the Odd13 brewery in Lafayette, CO.
Step 2 was getting a point on the map with an image. I used ChatGPT to generate a pint glass png and then dropped it into removebg to get rid of the background. The free, low resolution version of the image export was fine since I was rendering the pint glass as a small point on the map.
The 3rd and last step was getting a label on the point. I only grabbed the part around modifying the layout properties of a layer to adjust the location of the title property that I added to the geojson point.
After all that I added a couple tiny features including a loading spinner from the phosphor-icons pack to be in the position that the map exists in before it loads and the fade the map in after it loads. I also utilized the theme switcher in this blog to adjust the style of the map that I'm setting and the color of the font for the brewery label. I'm sure there is some weird rendering thing happening under the hood where react is rendering more times than it needs to but this works for now and it's fairly simple. Here's the code for the finished product from day 1.
If I'm going to complete 30 days of this challenge, I need to clean up the map from day 1 and make the underlying component more reusable for the rest of the month's challenges. This was done by adding props to control the basic map settings and adding an onMapLoad callback that would be called after that map loads. The code for adding the point to the map was pulled out and passed into the onMapLoad callback within the new parent component. The resulting resuable map component looks something like this. There are some underyling issues with the blog that I need to fix before we get too far along on this challenge including an ineffecient MDX renderer with the way I'm pulling in components and some CSS styling issues with code snippets in dark mode, but I'll tackle those in coming days.
Onto Streams & Ditches
Day 2's theme is lines so I decided to poke around online to see if I can find any interesting data to map and came across Boulder County's Geospatial Open Data. This was an awesome and an unexpected find as I didn't realize how much data was freely available online about the county that I live in. I decided to download the Streams & Ditches dataset which includes all of the rivers and creeks as LineString geometries.
Using the geojson provided by Boulder County, I'm able to fetch it and create a source and layer on the map to render the streams and ditches. Here's the result.