1

I would like to replace the url 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' for:

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

I'm new with react and I don't know how to pass this structure to the TileLayer component, whether using Ref or URL props.

The attempt was something like this:

import React from 'react';
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMapEvents,
} from 'react-leaflet';

   
function LocationMarker({ coord }) {
  const [position, setPosition] = React.useState(coord);
  const map = useMapEvents({
    drag() {
      setPosition(map.getCenter());
    },
  });
  return (
    <Marker position={position}>
      <Popup>Here!</Popup>
    </Marker>
  );
}

function StyleMap() {
  //const styleRef = React.useRef();

  const googleStreets = L.tileLayer(
    'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
    {
      maxZoom: 20,
      subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    }
  );
  return <TileLayer ref={styleRef} />;
}

function Map({ coord }) {
  return (
    <MapContainer center={coord} zoom={18} scrollWheelZoom={false}>
      <StyleMap />
      <LocationMarker coordenadas={coord} />
    </MapContainer>
  );
}

export default Map;
TMo
  • 11
  • 2

1 Answers1

-3

It's not possible to directly use Google Maps tiles in Leaflet. Checkout https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant.

Justin Poehnelt
  • 2,992
  • 1
  • 19
  • 23
  • 3
    It *is* possible, but it's against the terms of service. Wording matters. Since @jpoehnelt works at Google, I'd appreciate if you used a more appropriate wording such as "we at Google won't let you use tiles that way" and actually own this, instead of dismissing the issue as an "it's not possible" uncontrollable externality. – IvanSanchez Feb 15 '22 at 22:55