Adding Leaflet To Your Rails Application

We’re finishing up our mod 4 project from Flatiron School (wow, where has the time gone!?) which was a yelp clone specifically for ice cream shops. One feature we really wanted to add was add a moveable map like Google Maps (see this blog post) but Google Maps required us to sign up for a billing account. Last thing we wanted was to wake up with charges.

So we found out about Leaflet and React-Leaflet, which builds off of Open Street Map. So, in this blog, I’ll show you how we implemented it.

Our finished product at the time of writing this blog

So, the first thing you need to do is add Leaflet’s CSS and JS files to your index.html page. You can find them on Leaflet’s Quick Start Tutorial.

Our index.html file with the CSS and JS file highlighted

In our App.js’s ComponentDidMount() function we did a fetch to our Rails backend to get a list of stores and saved them to the state. Each store has a longitude and latitude (important!). We passed these stores as a prop to our new component StoreMap.js, which the code for is listed below

import React from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
export default class StoreMap extends React.Component {
  state = {
    lat: 38.904722,
    lng: -77.016389,
    zoom: 13,
  }
  setLocationState = () => {
    if (this.props.mapLocation === 'Washington, DC') {
      return [38.904772, -77.016389]
    } else if (this.props.mapLocation === 'Baltimore, MD') {
      return [39.283333, -76.616667]
    } else {
      return [38.904772, -77.016389]
    }
  }
  render() {
    let position = this.setLocationState();
    
    return (
      <Map 
        center={position} 
        zoom={this.state.zoom} 
        style={{height: '300px'}} // You NEED to specify a height
      >
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {this.props.stores.map(
        (store) => { return (
          <Marker position={[store.latitude, store.longitude]}
            <Popup>
              <a href={`/store/${store.id}`}>{store.name}</a
            </Popup>
          </Marker>
        )}
      )}
    </Map>
    )
  }
}

Lets break this down

We have to set state to where ever we want (lat, long) the map to be centered and the zoom part indicates how close or far away you want the default map to be. 13 was in the tutorial, and it looked good for us, so it stayed.

The <Map></Map> actually creates the map and take two props: position which is where the center of the map is, and zoom. In addition, you have to specify the height of the map.

The <TileLayer /> adds the attribution. You can add whatever you want here, but I kept what was in the tutorial for proper attribution.

Next we do a .map on all of our stores and return a <Marker></Marker> where the position is the lat/long of the store in array format.

Lastly, the <Popup></Popup> is what is displayed when it is clicked. In this case we added a link to that particular store.

I hope this helps. If it doesn’t the Leaflet tutorials go a bit more in depth. I hope you all get your maps up and running!