Sometimes you don’t want all the roads, locations and details that comes with Google Maps. React-simple-maps provides elegant and minimalist map renders, and after playing with a few settings and components you’ll have fun with these interactive maps yourself. It’s recommended to follow along with their docs and examples, in conjunction with this guide. Their boilerplate code for paired with their examples are especially useful, and won’t differ all that much, regardless of what type of map you’re using.
Also, this guide won’t go into creating the topoJSON map data — for that, I recommend following this excellent guide, here.
Once you have the map files you want to use, be sure to place them somewhere within the public directory of your project. You can nest them in another directory, rename them, etc, but it must be in the public directory.
Now, let’s go through a couple of the key components of react-simple-maps and talk about some of the attributes you’ll want to mess with.
ComposableMap:
The most important attribute here is the projection. Most users will want to go with geoAlbers unless they are displaying a full world map and want to go for a more global, or classic mid-century-style map. For information on different map formats checkout the readme at D3, here.
Height and width are important too, but I would recommend leaving those out for now until we’ve done some other tasks. Set the scale on the projectionConfig to something low for starters. The lower your scale, the more zoomed-out you will be from your map, which is great for locating it in order to start positioning.
It’s a common problem to have loaded your map, but — and this is especially common if your map consists of only one small state, province or country — it’s unable to be seen because the map is outside of the SVG’s view window. For this reason, I’d advise using your dev-tools to make the SVG window as large as possible, or use good ole’ fashioned CSS.
If you can’t locate your map yet, it might be time to introduce…
ZoomableGroup:
With the ZoomableGroup component added. you’ll now be able to click-and-drag within the SVG window, allowing you to move your map — hopefully into frame. Once you’ve found your map, we can go back to our ComposableMap, in order to trail-and-error our way to victory.
There are a number of ways we can change our perspective of the map within our SVG, but ultimately I have found it best to use the the ‘center’ coordinates to position your map where you want it, and then use the height, width, and scale attributes in order to correctly size it. You’ll most likely have to tweak your ‘center’ attribute as you go.
Aesthetically, I’ve gravitated towards stationary maps on my projects. If you’re the same way you’ll most likely want to remove the ZoomableGroup component once you’ve located your map — my mind always wanders to users dragging the maps outside the scope of the SVG and being unable to relocate them. To each their own!
