Geolocation Data Visualization with React Using Leaflet Interactive Maps Library (pt.2)

If you are stumbled upon this article while trying to find how to get started with React-Leaflet, you might need the first part of this series. In this part, we’re gonna make our map which has been successfully rendered to be more interactive using several layers which leaflet provided.

Geolocation Data Visualization with React Using Leaflet Interactive Maps Library (pt.1)

Marker

Based on the leaflet documentation, Marker is used to displaying clickable/draggable icons on the map. To show the Marker on our map, we need to import the Marker component from the ‘react-leaflet’. Then we need an Icon class from ‘leaflet’ as well as the default icon provided by the leaflet which we can be imported from its leaflet’s dist file. Our import lines will look like this:

import React from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';
import { Icon } from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';

After we imported the files we needed, we need to create the icon using Icon class from the leaflet.

const IconMarker = new Icon({
  iconUrl: icon
});

Implementation:

<Marker position={[-6.134506, 106.813408]} icon={IconMarker} />

The position prop is the exact coordinate like the center we set in the previous part. So when the map renders for the first time, the Jakarta History Museum (Museum Fatahillah) location will be marked by the icon we’ve set above.

Popup

Popup used to open a popup in certain places and usually used simultaneously with Marker. We can simply import Popup from react-leaflet and put it inside the Marker tag. Then the code will look like this:

<Marker position={[-6.134506, 106.813408]} icon={IconMarker}>
  <Popup>
    This is the Popup
  </Popup>
</Marker>

Now we can show the popup by just clicking it on the Marker icon.

Polygon

We can also draw a polygon on our map using Polygon from react-leaflet. Now we will draw a polygon around Taman Fatahillah. Here are the steps we should do to make it work:

Set a series of coordinates in an array.

const fatahillahPoly = [
  [-6.134522, 106.812639],
  [-6.135258, 106.812861],
  [-6.134955, 106.813910],
  [-6.134201, 106.813669]
];

Implementation

<Polygon color="blue" positions={fatahillahPoly} />

Circle

If we want to visualize the range of radius we can draw Circle marker in our map. This could be the radius of your agent/sales could handle or even the spreading radius of a virus. I will set a circle marker at Bank Indonesia Museum near Taman Fatahillah so we can see two different layers just in one look.

We can just import CircleMarker from ‘react-leaflet’ and run the code below. Remember that the center/coordinate should be wrapped in an array.

<CircleMarker
  center={[-6.137101, 106.813015]}
  radius={150}
  color="orange"
/>

Then the map will look like this. You can indeed set the radius and color as you need. If we want to show the information about the Circle, we can wrap a Popup in the CircleMarker layer.

Summary

That was just a glimpse of tutorials that I can write in this series. Of course, you can not understand the whole library by just following someone’s article on the internet. Yet we can always read the documentation they have provided on their sites.

I just like to share my experience using these 2 libraries and the problems I have faced so you can save your time finding the answers of your confusion and the errors you experience.