- We'll Talk About:

What is react-leaflet ?
Why react-leaflet ?
How to add google maps tile ?
How to add multiple map tiles ?
Demo Link is in the end

1. What is react-leaflet ?

Leaflet is open-source JavaScript library for mobile-friendly interactive maps, lets you do whatever you want like adding markers, popups, shapes, etc.

2. Why react-leaflet ?

Easy to use, popular, free and it will save you a lot of time and effort

HOW?

In the application that I’m working on, I use Baidu for China, OSM for Syria, Google for other countries, because Google maps is blocked in China and Syria etc...
So the solution was is to use react-leaflet and change the map tile when ever I want to change the map provider.

3. How to add google maps tile ?

1-create new react app
2- Install the required dependencies

npm i leaflet @types/leaflet react-leaflet

yarn add leaflet @types/leaflet react-leaflet

3- open your app in vscode or whatever is convenient and run the project
4- in App.tsx import leaflet css file (IMPORTATNT)

import "leaflet/dist/leaflet.css";

5- import MapContainer etc... from react-leaflet.
Your App.tsx should be like this.

import {
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[31.432026740690574, 120.8439179532812]}
        zoom={8}
      >
        {/* add google map tile url  */}
        <TileLayer
          attribution="Google Maps"
          url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        />
      </MapContainer>
    </div>
  );
}

export default App;

6-And now congratulations, 🥳🥳 that's it.

I recommend that you check react-leaflet documentation, you'll find anything you want.

3. How to add multiple map tiles

All what you have to do is to import LayerGroup and LayersControl from 'react-leaflet' and use them

import {
  LayerGroup,
  LayersControl,
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>   
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[33.52355922735366, 36.317284883627735]}
        zoom={14}
      >
        <LayersControl>
          <LayersControl.BaseLayer name="Open Street Map">
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map Satellite">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer checked name="Google Map">
            <TileLayer
              attribution="Google Maps"
              url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Google Map Satellite">
            <LayerGroup>
              <TileLayer
                attribution="Google Maps Satellite"
                url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
              />
              <TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
            </LayerGroup>
          </LayersControl.BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

useful links 🔗

Demo Link

https://codesandbox.io/s/react-leaflet-google-maps-free-rwzstu?file=/src/App.tsx
Libraries that we used

https://leafletjs.com/

https://react-leaflet.js.org/
If you want to use Mapbox you'll need to get token from

https://www.mapbox.com/

Note: I'll write an article about maps that you can use in china, so if you are interested check my profile or DM me.

Blog

Free Google Maps in React

Mayar Deeb

- We'll Talk About:

1. What is react-leaflet ?

2. Why react-leaflet ?

HOW?

3. How to add google maps tile ?

3. How to add multiple map tiles

useful links 🔗

https://codesandbox.io/s/react-leaflet-google-maps-free-rwzstu?file=/src/App.tsx

https://leafletjs.com/

https://react-leaflet.js.org/

https://www.mapbox.com/

Join Our Newsletter. No Spam, Only the good stuff.

Related