Tag: ESTA

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 &copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors, <a href=&quot;https://creativecommons.org/licenses/by-sa/2.0/&quot;>CC-BY-SA</a>, Imagery &copy; <a href=&quot;https://www.mapbox.com/&quot;>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