Eu estou aprendendo a criar mapas pelo Leaflet e quis adicionar uma TileLayer de estilo, o problema é que ele começa carregando bem no começo do carregamento e depois retorna ao estilo padrão de mapa, o meu tema de mapa que eu escolhi é o Basic Galaxy – segue print:
Antes:

Depois:

O meu código é o seguinte:
import React from 'react';
import axios from 'axios';
import {
TileLayer
} from 'react-leaflet';
import { Helmet } from 'react-helmet';
import Map from 'components/Map';
import Layout from 'components/Layout';
import Snippet from 'components/Snippet';
import Container from 'components/Container';
class Index extends React.Component {
constructor(){
super();
this.state = {
DATA: (),
LOCATION: {
lat: 0,
lng: 0
},
DEFAULT_ZOOM: 2
}
}
componentDidMount() {...
}
async mapEffect() {...
}
render() {
const {...
} = this.state;
const CENTER = (...
);
const mapSettings = {...
};
return (
<Layout pageName='home'>
<Helmet>
<title>Home Page</title>
</Helmet>
<Map {...mapSettings}>
<TileLayer
url='https://api.mapbox.com/styles/v1/felipe1234-dev/ckkyz09e500yf17pmhvpahmf7/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZmVsaXBlMTIzNC1kZXYiLCJhIjoiY2treXlsODhzMnRvZjJ3bXJmcXUwb3UxNiJ9.T2zEQro5gX8CvzmhtInNpA'
attribution="Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>"
/>
</Map>
<Container type='content' className='text-center home-start'>
<h2>Still Getting Started?</h2>
<p>Run the following in your terminal!</p>
<Snippet>gatsby new (directory) https://github.com/colbyfayock/gatsby-starter-leaflet</Snippet>
<p className='note'>Note: Gatsby CLI required globally for the above command</p>
</Container>
</Layout>
);
}
}
export default Index;
No entanto, eu vi em outros lugares enquanto pesquisava os imports assim:
...
import {
MapContainer,
TileLayer
} from 'react-leaflet';
...
Assim que eu mudo para “MapContainer” lá no render(), o meu mapa simplesmente desaparece, não renderiza nada.
Eu tentei, em seguida:
...
import {
Map,
TileLayer
} from 'react-leaflet';
...
Dá um erro em que Map não existe.
...
import Map from 'components/Map';
import TileLayer from 'components/TileLayer';
...
Dá um erro em que TileLayer não existe.
A recomendação da própria documentação do Leaflet é fazer o import de tudo de react-leaflet. Mas no meu caso não funciona.
Eu achei que meu url para o estilo pudesse estar errado – segue-se ele:
https://api.mapbox.com/styles/v1/felipe1234-dev/ckkyz09e500yf17pmhvpahmf7/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZmVsaXBlMTIzNC1kZXYiLCJhIjoiY2treXlsODhzMnRvZjJ3bXJmcXUwb3UxNiJ9.T2zEQro5gX8CvzmhtInNpA
Eu já verifiquei tudo, mas nada.
Eu pensei que minha versão possa estar desatualizada:
"dependencies": {
"gatsby": "^2.31.1",
"gatsby-plugin-manifest": "^2.11.0",
"gatsby-plugin-react-helmet": "^3.9.0",
"gatsby-plugin-react-leaflet": "3.0.0",
"gatsby-plugin-resolve-src": "^2.1.0",
"gatsby-plugin-sass": "^3.1.0",
"gatsby-source-filesystem": "^2.10.0",
"gatsby-source-graphql": "^2.13.0",
"leaflet": "^1.7.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.1.0",
"react-leaflet": "^3.1.0",
"sass": "^1.32.5"
},
Não tenho nem ideia, por via das dúvidas reinstalei mas nada:
npm install react react-dom leaflet
npm install react-leaflet