This week’s Mapbox Map Madness challenge was to add a marker for my team’s stadium to my Cartogram map from last week using their Marker Playground tool.
If you’re interested, you can check out my submission for Round One.
The Marker Playground is an interactive tool that allows you to mark a point of interest on a map using a marker image (commonly a pin). It then generates code that you can use to put the map on your platform of choice (web, iOS, Android, etc). It looks like Marker playground is part of a new collection of tools designed for learning and experimentation.
Mapbox provided a tutorial for the process, though the Playground was pretty straight forward on its own. It consists of three steps.
I ended up wanting to further customize the marker image. It was… a little less straight forward, but overall a good learning experience.
Step 1 – Pick your platform
Step 2 – Position the map and marker
The University of Arizona’s stadium is in Tucson, AZ, so I zoomed out and then back in again to get to the McKale Memorial Center.
I appreciated that this step encouraged (forced?) experimentation. For example, I had to figure out that I had to set the marker’s source (or, its lat/long) with a single click on the map. I also really appreciated that the tool displays and dynamically updates the map’s center and the zoom level as you navigate it. You could use this tool to quickly capture the lat/long of a location – very handy for the #geodevs.
Step 3 – View/access your starter code
Copy your code and paste it wherever you wish, with one small caveat. If you want to use your own map pin, you must be hosting the image file on the same server as the image or somewhere that has CORS enabled. This could be a show stopper for some people, but since this tool’s primary audience seems to be developers, no problem right?
Anyway, I opted to paste the code into Code Pen.
Customizing the map / Demonstrate hoop jumping skills
By default, Mapbox gives you one of their basemaps – some variations of topo or aerial. The Round 2 challenge is to replace that basemap style with the one you created last week using Cartogram.
In order to update the style, I had to copy the url of my Cartogram from the Styles section of the Mapbox account and paste it in as the style prop for the Map object.
Also by default, Mapbox gives you a blue pin as your marker image. I couldn’t have the blue clashing with my U of A navy, so I decided to swap it out for my own image map pin image.
To use my own pin image, I ended needing to setup https (long overdue) and CORS on my server.
…talk about a rabbit hole.
- I’m not using Mapbox technology for any of my work projects right now, but Marker Playground seems like a great tool for visualizing and identifying zoom levels and map center for a given extent.
- Yay, Let’s Encrypt, yay.
- Boo, CORS, boo.