javascriptcssreactjsleafletleaflet-draw

React-Leaflet : Adding L.TileLayer breaks map

My goal is to add leaflet-draw to my Map. To do this, I've been using L to add control and drawnItem layers to the map upon component mount. The problem seems to be with the TileLayer. If I add it in the rendered div, it only fills 80% of the map leaving the new toolbar looking awful. If I add it in with L.TileLayer, it fills the entire map but leaves the majority of the map un-draggable. I will demonstrate with pictures.

With adding TileLayer in rendered div:

enter image description here

When added upon component mount: enter image description here

NOTE: The blue area is the area which cannot be interacted with. The only way to manipulate the map is by dragging under the draw toolbar. I will include the div of this in-operable layer: enter image description here

Finally, it is important to note that if I manually delete this element in the browser dev tools the map works fine. To make this issue more concise, I will remove all leaflet-draw code so that the issue can hopefully be more obvious. I'll now show the code along with the index.html.

import React, {Component, useEffect, useState} from "react";
import {Map, Marker, Popup, TileLayer} from "react-leaflet";
import Style from './Map.css'
import * as L from 'leaflet'
import 'leaflet-draw'
import 'leaflet/dist/leaflet.css';


class MapSearch extends Component {
constructor(props) {
    super(props);
    this.state = {
        map: {}
    }
}


componentDidMount() {

    console.log('mounted');

    let map = L.map('mapsearch',).setView([51.505, -0.09], 6);

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);


    
    this.setState({map: map});

}


render() {
    return (

        <div id='mapsearch'>
            <Map center={[51.505, -0.09]} zoom={6} ref={this.state.map}>
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />


            </Map>
        </div>


    );
}

}



export default MapSearch;

index.html:

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
  name="description"
  content="Media Search UI"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

<title>React App</title>

To conclude, I'll mention that I've had multiple issues with leaflet so far. First, having TileLayer declared with L AND in the render does not cause the issue. I have tried with/without in all scenarios. Additionally, The the id's of L.map and have to match in order to reference properly, so my ref={this.state.map} serves no purpose. Without this, I get map-container missing. If you look at the + & - symbols in the top left, you'll be able to see that extra layer poking in. If I delete the componentDidMount method, the map returns to normal. The issue must be with how I am creating the map with L.map, because if I just

let map=L.map('mapsearch').setView([51.505,-0.09],6);
this.setState({map: map});

I still get the overlaying issue, however the map is now draggable. If I then add L.TileLayer, that's when it again becomes in-operable.

Solution

  • The issue was that I was rendering a map on top of the one I had created in componentDidMount().

    I instead used <map /> from let map = L.map('mapsearch',).setView([51.505, -0.09], 6); to reference my own. Silly mistake, but really threw me off.