Menu
I have tried to find it in:
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/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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
201
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 © <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
136
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
