React typescript + leaflet + openstreetmap Integration

💡

The main content of this article: A general introduction to how to integrate openstreetmap through leaflet under the conditions of typescript+react.

Why openstreetmap

Instead of asking why choose openstreetmap, better to ask why not choose well-known maps such as Baidu Maps and Google Maps?
Because openstreetmap is open source and free, you can refer to their about page for details.
Taking Google Map as an example, if you integrate with Google Map, you will need to register for GCP, and you will be charged after a certain amount of usage is exceeded. For details, please refer to this document.
Other maps, such as ***du, are even less reliable than Google. In fact, I also want to avoid the use of services from commercial companies as much as possible.

Another problem is the consideration of reliability. There are two main aspects: 1. How many people use it? 2. is the stability reliable or not.
From this page, we can see that, in fact, this map is still used by some European and American governments, and Wikipedia and so on. So it is used by many people. In addition, the Nextcloud (I'm using) is actually integrated with this map also. So I think that although the number of users of openstreetmap is not as good as Google, it still have some users.
As for stability, first of all, I believe that European and American government departments must have also considered this issue. Secondly, my own Nextcloud also can be considered a deep usage. From the experience of about 4-5 years, I have never seen it broken.

Therefore, from the perspective of reducing commercial dependence, from the perspective of reliability, and after comprehensive consideration, I choose openstreetmap.

Why leaflet

Because google search "react openstreetmap", the first result is React Leaflet

How to integrate

Leaflet actually integrated openstreetmap by default, so it is easier to integrate. However, Leaflet's documentation is still a little tricky.

Working Demo

First, a demo implemented by someone else that can work.

It not implemented by me. And this demo is very good

Install dependencies

For installation, the official documentation is very clear. In fact, it just install three libraries leaflet, react-leaflet, @types/leaflet.
So just yarn add.

Import css

After installing the dependencies, if you implemented directly according to the "Setup" code in the official documentation, you will probably get the following picture:

The root cause is that the css of leaflet is not imported. There are two ways to import it. One option is: importing it in the index.html (referring the demo above). So just download it directly from the leaflet (external).

The other option is to directly import the css in the package to tsx file:

import 'leaflet/dist/leaflet.css';

After the import of css, the entire map can be displayed.

Similar problems like Maker icons missing, etc. it can be solved by similar solutions.

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
});
L.Marker.prototype.options.icon = DefaultIcon;

Code

Have to say that the code on the official website is very nice.

Setup | React Leaflet

1. Follow all the steps from the installation page

React Leaflet

Copy the code from the official website:

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>

In short, it is a simple and easy-to-use map tool, but the documentation is a little missing.