Menu
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:
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="&copy <a href="http://osm.org/copyright">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
205
asked Aug 01 '18 18:08
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/
79
answered Dec 15 '22 15:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With