3

I have tried to find it in:

  • this.mapRef.current.leafletElement
  • this.mapRef.current.getLeafletElement()
    • invalidating this.mapRef.current.getLeafletElement().invalidateSize
  • this.mapRef.current.leafletElement

here my react snippet:

import React, {Component, Fragment} from "react"; 

import L from "leaflet" 
import   "~/lib/leaflet/leaflet.css"
import "~/lib/leaflet/leaflet"
import styled from "styled-components"
import Head from 'next/head' 

constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

 componentDidMount(){  

    // console.log("this.map: ", this.map);
    console.log("this.refs.mapTest: ", this.mapRef.current.leafletElement 

// or other trial)

{...}
  this.map= L.map("map", {   
      center:location,
      zoom:12,
      zoomControl:true
  })
{...}

 } 



 render(){ 
    return (
      <Fragment>
          <Head>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/>

          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/> 

     <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>   
          </Head>
        <Wrapper 
          ref={this.mapRef}
          width="100%" 
          height="80vh" 
          id="map"
        /> 
      </Fragment>
    )
  }
}

I cant find the invalidateSize's property,

any hint would be great, thanks

Webwoman
  • 10,196
  • 12
  • 43
  • 87

1 Answers1

2

If you log inside componentDidMount the reference to the Map

componentDidMount() {
    const map = this.mapRef.leafletElement;
    console.log(map)
}

and expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.

Edit

I thought you were using react-leaflet.

Without the use of react leaflet you can use the following code to get a reference to the map instance.

class Map extends Component {
  componentDidMount() {
    const map = this.map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(map);

    console.log(this.map)
  }

  render() {
    return (
        <div id="map"/>
    );
  }
}

and then do as in the react-leaflet version: expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.

Demo

kboul
  • 13,836
  • 5
  • 42
  • 53
  • 1
    trying to resize the window returns me: `this.map.invalidateSize is not a function` https://stackblitz.com/edit/react-gydscs?file=Map.js – Webwoman May 18 '19 at 14:20
  • You are using an arrow function while calling `window.addEventListener("resize")` and then `setTimeout` with a regular anonymous function. That results to lose the reference to the Map class object. You need to use an arrow function while calling `setTimeout` function and you should have no problem while invoking `invalidateSize()`. I edited the demo. Just press Open in a new window to be able to see the console. – kboul May 18 '19 at 17:00