Learn to render Maps by building a wildfire tracker app - Part 1
Tags: react, leaflet, reacthooks, reactleaflet
Published: 2021-01-01 07:07:59

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](https://dev.to/devnrj07/learn-to-render-maps-by-building-a-wildfire-tracker-app-part-1-24j5)
* [Part two : use Nasa Api to display wildfires on the map](https://dev.to/devnrj07/learn-to-render-maps-by-building-a-wildfire-tracker-app-part-2-go0) 

![Google map dev mode issue](https://dev-to-uploads.s3.amazonaws.com/i/3upb7dltujmyas4zwjgt.png)

#### 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](https://leafletjs.com/)
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](https://create-react-app.dev/) 
* [leaflet] (https://www.npmjs.com/package/leaflet) 
* [react-leaflet] (https://www.npmjs.com/package/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`

![Plain Map](https://dev-to-uploads.s3.amazonaws.com/i/6p19du9lkljgofdkdq24.png)

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].
![Map with marker](https://dev-to-uploads.s3.amazonaws.com/i/mora5q9xg7d7wcqfjm57.png)

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;
```

![marker with popup](https://dev-to-uploads.s3.amazonaws.com/i/sklbzuxur1t612eevy0y.png)

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