DEV Community

Cover image for Learn to render Maps by building a wildfire tracker app - Part 1
Neeraj Mukta
Neeraj Mukta

Posted on • Updated on

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 :

Google map dev mode issue

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 :

  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

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;
Enter fullscreen mode Exit fullscreen mode

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**;
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

marker with popup

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

Top comments (3)

Collapse
 
lahnoukiaicha profile image
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

Collapse
 
fullstacknrj profile image
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.

Collapse
 
lahnoukiaicha profile image
Aicha Lahnouki

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