Learn to render Maps by building a wildfire tracker app - Part 1

Recently, I was working on a project where I needed to use Maps to display and pinpoint information about goods. So, I started out to look for MAP libraries my first choice was obviously Google Maps API which is very simple, has a good documentation and a very nice react-wrapper. But, the downside is, it’s quite tricky to set it up, you need to setup billing account and some other prerequisites until you see a map.

This is going to be a two part series :

• Part one : about leaflet and rendering Map
• Part two : use Nasa Api to display wildfires on the map

This screen annoyed the heck out of me!

So, after some more research I landed on this open source library which also has react-wrapper and it's called leaflet
It's very useful easy to setup library but it still has some caveats to it. So, I'm writing this blog to help beginners move in the right direction with this library.
I'm going to show how to make it work with react project for which I will use the following libraries :

• CRA
• leaflet
• react-leaflet

1. Let's quickly generate react project using create-react-app. Open a terminal and run the following command :

   npx create-react-app map-demo-app
   This will generate a basic react app with all the necessary files.

2. Let's also add leaflet libraries to out project. Type the following command in your terminal

   cd map-demo-app && yarn add leaflet react-leaflet

3. Now, we're all set to render our map. For this let's make a Map component.
   To render the map we need to follow three simple steps :
   
   i. import leaflet css in your index.js file

   import 'leaflet/dist/leaflet.css';

   ii. create a file call Map.js inside src and add this
   piece of code. Note the change in react-leaflet api (its
   MapContainer instead of Map)
   

      import { MapContainer, TileLayer } from "react-leaflet";
      const Map = ({ center, zoom }) => {
      return (
        <MapContainer style={{ height: "100vh" }} center={center} 
           zoom={zoom}>
         <TileLayer
             attribution='&copy; <a 
             href="http://osm.org/copyright">OpenStreetMap</a> 
             contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
      </MapContainer>
      );
     };
     Map.defaultProps = {
      center: [42.3265, -122.8756],
      zoom: 6,
     };
     export default Map;
   

   iii. call this component inside your app.js file
   

   import Map from "./components/Map";
   function App() {
    return (
        <div>
         <Map/>
       </div>
      );
    }
   export default App;
   

Great! Now you should be able to see a map like this after starting the project
yarn start

Next, Let's add some markers to our map. For this we need to use Marker component from react-leaflet.
Add the following code to a new component and name it something like LocationMarker.js

  import {Marker} from  'react-leaflet';
  const LocationMarker = ({ lat, lng}) => {
     return (
        <Marker position={[lat, lng]}>
        </Marker>
     );
   };
   LocationMarker.defaultProps = {
     lat: 42.3265,
     lng: -122.8756,
   };
export default LocationMarker;

Notice, how I pass latitude and longitude as an array to the position prop of Marker component.

Wait but we're not done yet, there's still an issue which I faced after this. The default icon wasn't getting displayed on the map, it was just an empty image placeholder.

The workaround for this is however very simple, all we need to do is provide a defaultIcon ourselves.
Quickly add these lines of code to our LocationMarker component

  import L from "leaflet";
  import Icon from "leaflet/dist/images/marker-icon.png";
  import iconShadow from "leaflet/dist/images/marker-shadow.png";

  let DefaultIcon = L.icon({
     iconUrl: Icon,
     shadowUrl: iconShadow,
     iconSize: [32, 32],
     shadowSize: [28, 28],
});

**L.Marker.prototype.options.icon = DefaultIcon**;

This should solve the problem of missing icon image on the map. And now, you should be able to see the default icon on the map at co-ordinates = [42.3265,-122.8756].

We can also add a popup on the marker to display some information about that position on the map.
Quickly, update the LocationMarker component with these lines of code.

  import {Marker, Popup} from 'react-leaflet';
  const LocationMarker = ({ lat, lng, info}) => {
     return (
        <Marker position={[lat, lng]}>
         <Popup> {info} </Popup>
        </Marker>
     );
  };
  LocationMarker.defaultProps = {
   lat: 42.3265,
   lng: -122.8756,
   info : 'I love leaflet <3'
 };
export default LocationMarker;

If you face any problem related to this post than comment below.
And Stay tuned for next part of this blog series.
Thank you.

Comments

[Aicha Lahnouki]

Hello I have followed all the steps and it works as well but the problem I don't think it is real time based , if not please can you help me to modify it and Thank you

[Neeraj Mukta]

Hey @lahnoukiaicha, sorry, I didn't see your comment earlier. But, if you need the realtime data then you need an API that provides realtime data. Just replace the API Endpoint, map the API response with component state and rest of the parts remains same.

[Aicha Lahnouki]

Thank you so much , I appreciate your answer , that what we actually did .