Grasping information from a CSV or a JSON file isn’t only complicated, but is also tedious. Representing the same data in the form of visual aid is simpler. In this article, we’re going to represent the locations of the non-medical fire incidents to which the SF Fire Department responded on a map.
For this tutorial, we will be utilizing the following tools:
React components for Leaflet maps
What Is Leaflet?
Leaflet weighs about 38KB and works perfectly for basic things. For additional extensions, it can be extended with a vast amount of plugins.
A lot of newspapers, including NPR, Washington Post, Boston Globe, among others, and other organizations use Leaflet for their in-depth data projects.
The San Francisco Chronicle, for example, did a project called the California Fire tracker — an interactive map that provides information on wildfires burning across California, using Leaflet. Not only did they pinpoint the origin of the fire, but they also showed us the trajectory of it.
Since this is an introductory tutorial, we will only be marking the locations of the fire incidents and display some details about it.
Before jumping into React, let’s understand the basics of Leaflet. For this, we will create a simple example where we will be setting up a Leaflet map, working with markers, and popups.
First, let’s create index.html and app.js files in our
/project folder and link the latter to our index.html file.
To start using Leaflet, we need to link Leaflet CSS and Leaflet JS in our head tags. One thing to keep in mind is that Leaflet CSS comes before Leaflet JS. That’s it for Leaflet.
There’s one more thing we need to add to our index.html file — a container that will hold our map.
Before we forget, let’s give height to our div.
#mapid height: 1000px;
<div id="mapid"> is added to the dom before calling
You’re probably asking “But, why?” Well, it’s because it will give you an error if you bind the map to a container that doesn’t exist just yet.
Uncaught Error: Map container not found
Creating A Map
Now, onto the fun part. To initialize the map, we pass in our div to
L.map() with some options.
const myMap = L.map('mapid', center: [37.7749, -122.4194], zoom: 13 )
Let’s go step by step to understand what just happened. We use Map class of Leaflet API to create a map on the page. We pass in two parameters to this class:
- We passed in a string variable representing the
- An optional object literal with map options
There are many options we could pass to our class, but the main two options are the center and zoom. The center defines an initial geographic center of the map while zoom specifies an initial map zoom level. They both are undefined by default.
For the center, we passed in San Francisco’s coordinates. There are a lot of places where we can perform forward and reverse geocoding, but for basic search such as this, we can google it.
Usually, the value for zoom will depend on what you want to display. Do you want to show a city or a state? Country or a continent? Go ahead and play around with the zoom value to get a better idea. For this example, we chose 13 because it shows the entire city.
Another way of initializing the map is by using setView(). It takes the in an array of coordinates and an integer for the zoom level.
const myMap = L.map('map').setView([37.7749, -122.4194], 13);
By default, all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.
Creating A Layer
Next, we’ll add a tile layer to our map; in our case, it’s a Mapbox Streets tile layer. We can append various types of tile layers by instantiating the TileLayer class.
To create a tile layer, we need to set the URL template for the tile image, the attribution text, and the maximum zoom level of the layer. The URL template is what gives us access to the desired tile layer from the service provider. Since we are using Mapbox’s Static Tiles API, we will need to request an access token.
L.tileLayer('https://api.mapbox.com/styles/v1/id/tiles/z/x/y?access_token=accessToken', attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', accessToken: 'your.mapbox.access.token' ).addTo(mymap);
At this point, if we open our index.html in a browser, we should be able to see a map of San Francisco. Let’s drop a pin on the map.
Markers And Circles
We’ve got the map and the layer, but it doesn’t point us to anything specific. To point to a particular location on the map, Leaflet provides us with markers.
To pin a location, we instantiate the marker using the Marker class, pass in the coordinates, and add it to the map. Here we are using the coordinates of Twin Peaks in the city.
const marker = L.marker([37.7544, -122.4477]).addTo(mymap);
Similarly, we can bind a circle to the map using a
Circle class. We pass in a few optional options, such as radius, color, and so on. For the
circle marker, we are passing in the coordinates of Point Bonita Lighthouse.
const circle = L.circle([37.8157, -122.5295], color: 'gold', fillColor: '#f03', fillOpacity: 0.5, radius: 200 ).addTo(mymap);
This is all great, but what if we want to pass in some more information about the location. We do this using popup.
circle.bindPopup("I am pointing to Point Bonita Lighthouse"); marker.bindPopup("I am pointing to Twin Peaks");
The bindPopup method takes in a specified HTML content and appends it to the marker, so the popup appears when you click on the marker.
The first task for us is to get an access token from the San Francisco Open Data portal. It’s an online portal where we can find hundreds of datasets from the City and County of San Francisco. I decided to use this resource, but there are plenty of other resources out there that we can use instead.
Access API Key
- Make an account and sign-in to the portal.
- Click on the manage link towards the bottom-right.
- Click on Create New API Key and give it a name.
- Copy your Key ID and Key Secret. You’d need this to access the data.
For this, we will use React-Leaflet – react components for Leaflet maps. Let’s create a react app.
npx create-react-app react-fire-incidents cd react-fire-incidents
Then let’s install
react-leaflet, and Leaflet by running the following command in our terminal:
npm install react-leaflet leaflet
Let’s create a folder
src. Inside components, let’s create a file named Map.js. This is where our Map will live. Now let’s edit App.js by removing unnecessary code and importing modules from
react-leaflet axios and the newly created Map.js.
import React, Component, Fragment from 'react'; import axios from 'axios'; import Map from './components/Map'
In our App class, we are going to define an array in our state called incidents — when the page loads, we will push our data into this array.
class App extends Component state = incidents: , render() return ( <div> </div> ); export default App;
Next, we will make a GET request when the component mounts. We have the app token, but we still need an endpoint. Where do we find the endpoint?
Let’s head over to the portal and click on Browse Data. In the search bar, let’s search for fire incidents. The first result that shows up is what we are looking for. Once we click on the link, we can get the URL by clicking the API button on the top-right.
We will pass in the endpoint to our GET request, and pass in a limit and our app token as parameters. The original data has thousands of records, but for the sake of keeping things simple, we have limited it to 500. We update our incidents array with our results.
Once we get the data, we update our state.
async componentDidMount() const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', params: "$limit": 500, "$$app_token": YOUR_APP_TOKEN ) const incidents = res.data; this.setState(incidents: incidents ); ;
This is what our App.js should look like.
class App extends Component state = incidents: , async componentDidMount() const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', params: "$limit": 500, "$$app_token": YOUR_APP_TOKEN ) const incidents = res.data; this.setState(incidents: incidents ); ; render() return ( <Map incidents=this.state.incidents/> ); export default App;
Since we already know how to create a Leaflet map, this part will be relatively easy. We will import
Popup components from
import React, Component from 'react' import Map, TileLayer, Marker, Popup from 'react-leaflet'
If we remember from the previous example, we need coordinates and a zoom level for initializing the map. In our
Map class, we define them in our state using
export default class Map extends Component state = lat: 37.7749, lng: -122.4194, zoom: 13, render() return ( <div></div> )
Then we will check whether our array of incidents is empty. If it’s empty, we will return a message saying “Data is Loading”; otherwise, we will return a map.
Map component, we will pass center coordinates and a zoom level along with some styling. In our
TileLayer component, we will pass attribution and URL similar to our previous example.
render() return ( this.props.incidents ? <Map center=[this.state.lat, this.state.lng] zoom=this.state.zoom style= width: '100%', height: '900px' > <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://s.tile.openstreetmap.org/z/x/y.png" /> </Map> : 'Data is loading...' ) }
Next, we loop over our
props.incident and pass in the coordinates of every incident to the Marker component. Since React warns us to pass a key to every item in an array, we will pass in a key to Marker as well.
Marker component, we pass in a
Popup component. I’ve added some information about the incident inside the popup.
<Map center=[this.state.lat, this.state.lng] zoom=this.state.zoom style= width: '100%', height: '900px'> <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://s.tile.openstreetmap.org/z/x/y.png" /> this.props.incidents.map(incident => const point = [incident['point']['coordinates'], incident['point']['coordinates']] return ( <Marker position=point key=incident['incident_number'] > <Popup> <span>ADDRESS: incident['address'], incident['city'] - incident['zip_code']</span> <br/> <span>BATTALION: incident['battalion']</span><br/> </Popup> </Marker> ) ) </Map>
And this is it. If we run our app, and if everything went fine, we should be able to see a map of San Francisco with 500 markers pointing us to the locations of the fire-incidents. If we click on one of those markers, a popup will appear with more information about the incident.
Even though we covered a lot, this was just the basics. Leaflet is a very powerful tool, and we can create a lot of different kinds of maps. If you want to play around, try adding another layer or a custom icon. Or maybe you would like to create an interactive Choropleth Map.