11

I am trying to render a simple Leaflet-React map to the screen.

But the tiles are all messed up and or not rendering. Take a look at the screenshot:

demonstration

I tried using the default OpenStreetMaps URL as well as a MapBox URL but both give the same result, so I think it is not a tile server issue. Though I could be wrong.

Here is my code:

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>
        )
    }
}

Here is my HTML file:

<!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>

You can also view the whole project on my github repo. https://github.com/RustyRaptor/AgrowView

Improve this question
0

1 Answer 1

Reset to default
18

I figured out the issue. As it turns out I was missing my leaflet.css file in my HTML.

You can add it by following the "Preparing your page" section here. https://leafletjs.com/examples/quick-start/

Improve this answer
1
  • 4
    Thank you so much for saving me from a rabbit hole.
    – Snoopy
    Commented Dec 21, 2018 at 13:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.