React: Basic Leaflet Map Example

In this tutorial I will walk you through incorporating leaflet map in your application. This is just a basic setup walkthrough. We do not deal with overlays or extending controls.

Documentation:

Leaflet
Leaflet Providers

Before We Begin:

If you have not done so already refer to how to Build a React/Python Site to get your basic site up and running.

Node Package Installs:

npm install leaflet-providers --save
npm install leaflet --save

Create Needed Folders/Files:

• app
  • folder: leaflet
    • folder: css
      • file: map.css
    • folder: js
      • file: map.jsx

Webpack:

Add the following loader for handling images to your webpack.config.js file.

{ test: /.*\.(gif|png|jpe?g|svg)$/i, loader: "file-loader?hash=sha512&digest=hex&name=[name].[ext]" }

Edit app/leaflet/js/map.jsx:

We are going to create the map control. Refer to comments below for explanations.

window.jQuery = window.$ = require("jquery");
//React packages
var React = require("react");
var createReactClass = require("create-react-class");

//Leaflet packages
import L from "leaflet";
import "leaflet/dist/leaflet.css";

//LeafLet providers
require("leaflet-providers");

//map css you will create
import "../css/map.css";

var LeafLetMap = createReactClass({
    getInitialState: function() {
        return {};
    },
    displayMap: function() {
        //Setup/initialize the map control
        window.map = this.map = L.map("map", {
            attributionControl: false, //http://leafletjs.com/reference-1.2.0.html#control-attribution
        }).setView([0,0], 1);
        
        //A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) 
        L.control.scale({ //http://leafletjs.com/reference-1.2.0.html#control-scale
            metric: false,
            imperial: true
        }).addTo(this.map);
        
        //You can check out all the free providers here https://github.com/leaflet-extras/leaflet-providers
        //Below are just examples
        this.layers = {
                OpenMapSurferRoads: L.tileLayer.provider('OpenMapSurfer.Roads'),
                HyddaFull: L.tileLayer.provider('Hydda.Full'),
                StamenTerrain: L.tileLayer.provider('Stamen.Terrain'),
                EsriWorldStreetMap: L.tileLayer.provider('Esri.WorldStreetMap'),
                EsriWorldTopoMap: L.tileLayer.provider('Esri.WorldTopoMap'),
                EsriWorldTerrain: L.tileLayer.provider('Esri.WorldTerrain'),
                OpenTopoMap: L.tileLayer.provider('OpenTopoMap'),
                OpenStreetMapBlackAndWhite: L.tileLayer.provider('OpenStreetMap.BlackAndWhite'),
                OpenStreetMapHOT: L.tileLayer.provider('OpenStreetMap.HOT')
            };

        //Add the default layer you want to use
        this.layers.OpenMapSurferRoads.addTo(this.map);

        //Add the layer control to the top left corner
        this.layerControl = L.control.layers(this.layers, {}, { position: "topleft" }).addTo(map);
    },
    componentDidMount: function() {
        //Done after mounting so that it sees the div you are going to map to
        this.displayMap();
    },
    render: function() {
        return (
            <div className="div-flex">
                <div id="map" key="map" className="map"></div>
            </div>
        );
    }
});

module.exports = { LeafLetMap:LeafLetMap };

Edit app/leaflet/css/map.css:

.map {
	/*Changes the width and height of the map*/
	height: 400px;
	width: 800px;
}

div.leaflet-top {
	/*OPTIONAL: This is only needed if your controls start going behind the map.*/
	z-index: 1001;
}

.leaflet-control-layers-toggle {
	/*Changes the width and height of the layer control*/
	height: 30px !important;
	width: 30px !important;
}

Edit app/home/js/home.jsx:

//Import your leaflet map control from the page you created above
import { LeafLetMap } from "../../leaflet/js/map.jsx";

//In the render function add your control
render: function() {
		return (
			<div className="div-flex">
		        	<LeafLetMap ref="map" />
			</div>
		);
	}