I want to use the leaflet map on my react project and I would like to add a layer control where the user can switch between street view and satellite view. I am trying to use google satellite view, but it doesn't seem to work.

Here is my code

function App() {
  
  return (
    <div className="App">
      <MapContainer center={[40.44695, -345.23437]} zoom={2}>
        <LayersControl>
          <BaseLayer checked name="OpenStreetMap">
            <TileLayer
              url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
              attribution='&copy; <a href=";>OpenStreetMap</a> contributors'
            />
          </BaseLayer>

          <BaseLayer name="Satellite View">
            <TileLayer
                url='https://{s}.google/vt/lyrs=s&x={x}&y={y}&z={z}'
                maxZoom= {20}
              />
            
          </BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

Satellite View

Thank you very much

I want to use the leaflet map on my react project and I would like to add a layer control where the user can switch between street view and satellite view. I am trying to use google satellite view, but it doesn't seem to work.

Here is my code

function App() {
  
  return (
    <div className="App">
      <MapContainer center={[40.44695, -345.23437]} zoom={2}>
        <LayersControl>
          <BaseLayer checked name="OpenStreetMap">
            <TileLayer
              url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
              attribution='&copy; <a href="https://www.openstreetmap/copyright">OpenStreetMap</a> contributors'
            />
          </BaseLayer>

          <BaseLayer name="Satellite View">
            <TileLayer
                url='https://{s}.google./vt/lyrs=s&x={x}&y={y}&z={z}'
                maxZoom= {20}
              />
            
          </BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

Satellite View

Thank you very much

• javascript
• reactjs
• dictionary
• leaflet
• react-leaflet

Share Improve this question Follow edited Oct 14, 2021 at 8:54 Diana Sk asked Oct 13, 2021 at 15:47 Diana SkDiana Sk 10533 silver badges99 bronze badges 3

• What's not working? – Seth Lutske Commented Oct 13, 2021 at 15:52
• I can't see anything on the satellite view. I do not have any errors. I don't why. is it the browsers fault? I am using Firefox. I am going to add a screenshot to show what i am seeing. – Diana Sk Commented Oct 14, 2021 at 8:49
• In the network tab of developer tools do you see requests going out to the google tile server and returning successfully or are there no requests? – teddybeard Commented Oct 14, 2021 at 17:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The tile url you are using for Google maps does not exist:

https://{s}.google./vt/lyrs=s&x={x}&y={y}&z={z}

From the Leaflet docs:

{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates. {r} can be used to add "@2x" to the URL to load retina tiles.

The urls you are requesting are using the default subdomains a, b and c which all appear broken:

• https://a.google./vt/lyrs=s&x=1&y=1&z=1
• https://b.google./vt/lyrs=s&x=1&y=1&z=1
• https://c.google./vt/lyrs=s&x=1&y=1&z=1

It looks like the correct subdomains are mt1, mt2 and mt3. You can specify them using the subdomains prop:

<TileLayer
   url='https://{s}.google./vt/lyrs=s&x={x}&y={y}&z={z}'
   maxZoom= {20}
   subdomains={['mt1','mt2','mt3']}
/>

https://mt1.google./vt/lyrs=s&x=1&y=1&z=1