Плитки рендеринга карты Leaflet-React не на месте и пустые плитки

Я пытаюсь отобразить на экране простую карту Leaflet-React.

Но плитки все испорчены или не отображаются. Взгляните на скриншот:

демонстрация

Я попытался использовать URL-адрес OpenStreetMaps по умолчанию, а также URL-адрес MapBox, но оба дают одинаковый результат, поэтому я думаю, что это не проблема сервера тайлов. Хотя могу ошибаться.

Вот мой код:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Map, TileLayer, Marker, Popup} from 'react-leaflet'

class FieldMap extends Component {
    state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 1,
        zoomOffset: 1
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <div style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"
            }}>
                <Map style={{
                paddingBottom: "5%",
                height: "200px",
                width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}>
                    <TileLayer
                        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                        url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/>
                    <Marker position={position}>
                        <Popup>
                            A pretty CSS3 popup.
                            <br/>
                            Easily customizable.
                        </Popup>
                    </Marker>
                </Map>
            </div>
        )
    }
}

Вот мой HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>AgrowView</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

</head>
<body>
    <div id="app"></div>

    <script src="bundle.js"></script>
</body>
</html>

Вы также можете просмотреть весь проект в моем репозитории на github. https://github.com/RustyRaptor/AgrowView


leaflet react-leaflet
person RustyRaptor    schedule 01.08.2018    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Я понял проблему. Как оказалось, в моем HTML отсутствовал файл leaflet.css.

Вы можете добавить его, следуя разделу «Подготовка страницы» здесь. https://leafletjs.com/examples/quick-start/

person RustyRaptor    schedule 01.08.2018
comment
Большое спасибо, что спасли меня от кроличьей норы. - person Snoopy; 21.12.2018