Seguindo as orientações da documentação do Leaflet: https://leafletjs.com/examples/quick-start/ Da mesma forma, seguindo as orientações do React-leaflet para instalação: https://react-leaflet.js.org/docs/en/installation e o exemplo básico para um mapa com um ponto de localização: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js cheguei ao seguindo código para exibição de um mapa no app web que estou implementando:
import React, { useEffect, useCallback } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { RootState } from '../../store/ducks/combineReducers';
import { createCallLoadStorage } from '../../store/ducks/callLoadStorage/actions';
import { CallLoadStorageModel } from '../../models/CallLoadStorageModel';
import Button from '../../components/Button';
import { Container, Logo, Title, DetailText, Footer } from './styles';
import logo from '../../assets/order-food.png';
import { createRequest } from '../../store/ducks/request/actions';
import { RequestModel } from '../../models/RequestModel';
const Login: React.FC = () => {
const dispatch = useDispatch();
const coords = useSelector((state: RootState) => state.coords.data);
useEffect(() => {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
dispatch(createCoords({ lat: latitude, lng: longitude, zoom: 15 }));
});
}, []);
return (
<Container>
<Logo src={logo} alt="Logo" />
<Title>Seja bem vindo!</Title>
<Map
center={[coords.lat, coords.lng]}
zoom={coords.zoom}
style={{ width: '100%', height: '50%' }}
>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Marker position={[coords.lat, coords.lng]} />
</Map>
<Footer>
<DetailText>Acesse nosso cardápio e agilize seu pedido!</DetailText>
<Button className="button" type="button">
Vamos ao cardápio
</Button>
</Footer>
</Container>
);
};
export default Login;
um mapa com o marcador da localização capturada, porém, o resultado que tenho obtido é este:
e notei também o seguinte erro checando o browser:
trata-se de aplicação ReacJS, estou usando typescript. Se alguém puder me ajudar.