given the following implementation:
getCurrentMap() {
const {currentlyActiveMap: {task, type, layout}} = this.mapStore
if (this.currentMap) this.currentMap.eachLayer(layer => {
this.currentMap.removeLayer(layer)
})
let centerX = 0
let centerY = 0
if (layout.image_width > layout.image_height) {
centerX = layout.tile_size / 2
centerY = (layout.tile_size * layout.image_height / layout.image_width) / 2
} else {
centerX = (layout.tile_size * layout.image_width / layout.image_height) / 2
centerY = layout.tile_size / 2
}
this.currentMap = this.currentMap || Leaflet.map(this.map, {
center: [-centerY, centerX],
crs: Leaflet.CRS.Simple,
minZoom: 0,
maxZoom: layout.max_zoom_level + 1,
maxBounds: [[layout.tile_size, -layout.tile_size], [-2 * layout.tile_size, 2 * layout.tile_size]],
doubleClickZoom: false,
attributionControl: false,
zoom: 2
})
let currentLayer = Leaflet.tileLayer(`${layout.tiling_url}`)
this.currentMap.addLayer(currentLayer)
return (
<Fragment>
<button type='button' className={styles.mapPanelCreateButton} onClick={this.handleCreateTask}>
<FaPlus/>
</button>
</Fragment>
)
}
render() {
const mapLayout = !!this.taskStore.loading || !this.mapStore.currentlyActiveMap
? <LoadingContainer transparent={true}/>
: this.getCurrentMap()
return (
<Fragment>
<div id='map' className={styles.mapPanelContainer} ref={map => this.map = map}></div>
{mapLayout}
</Fragment>
)
}
I am unable to render the map, and I am also unable to update/swap or otherwise change the data within the map (need to switch between custom tiled image and global map). Ids there something inherently wrong with this implementation or is there a better case to achieve this?
As always any and all direction is appreciated, so thanks in advance!
also another implementation with the same result:
Leaflet.tileLayer(`${layout.tiling_url}`).addTo(this.currentMap)
EDIT: Im also receiving the infamous: Uncaught Error: Map container is already initialized.
react
in combination withleaflet
I would highly recommend using thereact-leaflet
package. github.com/PaulLeCam/react-leaflet Also if you have a fiddle or codepen with a minimal example of what you want to do I can help you convert over to usingreact-leaflet