Rendering the US with React Simple Maps

React Simple Maps

4 min readAug 16, 2018

If you’re looking to incorporate a general dynamic map into your React project that plots some points and maybe has some simple animation to it, RSM can be a good choice for you. If you haven’t checked RSM out yet — here you go.

In this article, we will be rendering an Albers projection of the USA (a conic projection (according to the internet )), which brings Hawaii and Alaska into frame and resizes them. If you hardly know anything about map projections, like myself, I highly recommend watching this great clip which happens to be from the West Wing.

Anyways, we are also plotting points based upon latitude and longitude coordinates, which happily works well with the displacement of AK and HI.

When all is said and done, we’ll get something that looks like this:

Step 1:

In your terminal under your current project folder, run — npm install — save react-simple-maps

Step 2:

We’ll make this map a component in our App architecture, so make a new file and import the following at the top.

import React, { Component } from 'react';
import {
    ComposableMap,
    ZoomableGroup,
    Geographies,
    Geography,
    Markers,
    Marker,
  } from "react-simple-maps"import {geoAlbersUsa} from "d3-geo";

Those elements being imported from react-simple-maps are components from the RSM library. From d3-geo (a dependency of the RSM library), we’re getting the Albers Usa projection.

Step 3:

Set up your Class Component. At this point, embed the <Map /> component into your code wherever you’d like it to render.

(import...)class Map extends Component {
    
    render() { 
        return (
           <div className="map-container">              ==== EVERYTHING WILL GO IN HERE ====           </div>
        )
    }
}export default Map

Step 4:

Set up your ComposableMap component.

<ComposableMap
   projection={geoAlbersUsa}
   projectionConfig={{ scale: 1000 }}
   width={980}
   height={551}
   style={{
      width: "100%",
      height: "auto",
   }}
>   ==== NEXT ELEMENT WILL BE IN HERE ====</ ComposableMap>

Notice we’re bringing in the geoAlbersUsa that we imported. This whole component lets the system know our general details, how we’re sizing the map, what its projection will be.

Step 5:

Bring in the Zoomable Group component

<ComposableMap ...>
  <ZoomableGroup center={[ -97, 40 ]} disablePanning>    ==== NEXT ELEMENT WILL BE IN HERE ====  </ ZoomableGroup>
</ ComposableMap>

This component lets RSM know where you’ll be centering your map with the desired coordinate. PLEASE NOTE — The order in which you place Latitude and Longitude in the array is different than we usually see it. Make sure to enter: [Longitude, Latitude]. The above coordinates are for central usa.

Step 6:

Probably the most involved step here, we need to make a topoJSON file that will give us the shapes that our projection will use to create the map.

Go to the following website and download the Shapefile option: https://gadm.org/download_country_v3.html
Go to http://mapshaper.org/
From the folder that you downloaded, import the gadm36_USA_1 files ending in .shp, .dbf, and .prj. (When you import the first one, it’ll show a new screen. Click on the file name in the top center and it’ll allow you to layer the other files there.)
Click on Simplify in the top right and scroll it down to to however much detail you’d like to render in your program. The more simple it is, the more efficient the file will be to load in the long run. Apply the changes.
Export the file to topoJSON.
Bring that new shiny topoJSON file into your project

Step 7:

Render the map with <Geographies> and <Geography> components.

<ComposableMap ...>
<ZoomableGroup...><Geographies  geography='/gadm36_USA.json'>  <---- FILEPATH TO YOUR 
  {(geographies, projection) =>                  TOPOJSON FROM ROOT
    geographies.map((geography, i) =>
     <Geography
       key={i}
       geography={geography}
       projection={projection}
       style={{
         default: {
            fill: "#ECEFF1",
            stroke: "#607D8B",
            strokeWidth: 0.75,
            outline: "none",
         },
         hover: {
            fill: "#CFD8DC",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         },
         pressed: {
            fill: "#FF5722",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         }
      }}
    />
   )
  }
</ Geographies></ ZoomableGroup>
</ ComposableMap>

This is iterating over the states, making each of them a “geography”. You should definitely check out your site to look at your map! Click, hover around, experiment with changing the styles.

Step 8:

Let’s plot a point

<ComposableMap ...>
<ZoomableGroup ...>
<Geographies>
   <Geography ...>
   </ Geography>
</ Geographies><Markers>
    <Marker
       marker={{coordinates: [-153.2917758, 67.75961636]}}
       style={{
         default: { fill: "#FF5722" },
         hover: { fill: "#FFFFFF" },
         pressed: { fill: "#FF5722" },
       }}
    >
       <circle
          cx={0}
          cy={0}
          r={5}
          style={{
            stroke: "#FF5722",
            strokeWidth: 3,
            opacity: 0.9,
          }}
       />
    </Marker>
</Markers></ ZoomableGroup>
</ ComposableMap>

In Marker — put in the coordinates that you’d like to render. Again, remember the desired coordinate structure is Longitude then Latitude. (Check out the RSM resource provided at the top to see how to iterate over a list to generate markers.)

And that’s it!

You should have a nice looking map.