How to implement react-leaflet.js (open-source map in your react project 🗺️)

React-leaflet is an open-source Javascript library for creating intractable maps, small and easy-to-use, in general, an excellent alternative to react-google-maps, basically, because it won't charge into your credit card. So here is a quick and easy guide to start to use it.

1. Install the library in your project

---- for npm
npm install leaflet react-leaflet 
---- for yarn
yarn add leaflet react-leaflet 

In this step probably you will face this error

Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

To fix this :

1. Delete your node_modules folder
2. Change the path where you have your project
3. Make sure to stop your antivirus and stop the sync with dropbox
4. Run npm install

That worked for me but if you have other solution would be great that you share it in the comments !!

2. Import styles

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

You need to find your index.html file and add the link to the styles from leaflet.css, if you don't do it, the map would look disorganize, crop and with patches.

3. Add the style container

<style>
.leaflet-container {
    height: 400px;
    width: 400px;
}
</style>

This step is really important too because if you don't set the height and width your the map wouldn't show at all.

4. Create your component as you need it

import React , { Component }from 'react'
import { Map as LeafletMap, TileLayer,  Marker, Popup } from 'react-leaflet';
import './map-component.css';

class SimpleMap extends Component {
  render() {
    return (
      <LeafletMap
        center={[60, 10]}
        zoom={6}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={[60, 10]}>
          <Popup>
            Popup for any custom information.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}

export default SimpleMap

You could put as many properties as you want for the map, I leave the documentation to the examples but don't forget to call the styles from the previous step.

Finally, this is a little picture of how looks in my project, and as you can see you can put other components on the page and it will look good.

I really hope that this will be helpful for all of you guys and thank you for reading!!

Comments

[Dendi Handian]

Anyone know how to properly import the leaflet css and images/icons from node-modules into the create-react-app instead of using cdn in public/index.html?