Skip to content

map.invalidateSize() breaks leaflet-hash initial load + workaround #56

Description

@tordans

I am using map.invalidateSize() to tell my map container that a panel in my layout was removed and to use the full size again.

However, calling invalidateSize during the first render of the page breaks leaflet-hash in the sense, that the provided hash location (provided by a deep link / external link with hash), does not position the map on the hash's position but the default position instead.

To me, it looks like the resize code from invalidateSize prevents leaflet-hash from receiving the hash location.
(Somewhere here https://github.com/Leaflet/Leaflet/blob/0f904a515879fcd08f69b7f51799ee7f18f23fd8/src/map/Map.js#L596-L599)

Workaround

As a workaround, I now set the default map position to the hash's position before initializing the map:

osmberlin/strassenraumkarte-neukoelln@1324d35#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R11-R19

	const optionsFromHash = L.Hash.parseHash(window.location.hash)

	const options = {
		center: optionsFromHash.center || [52.48150, 13.43571],
		zoom: optionsFromHash.zoom || 18,
		minZoom: 15,
		zoomControl: true,
		maxBounds: [[52.4557, 13.3985], [52.5005, 13.4863]]
	}

Live example: https://supaplexosm.github.io/strassenraumkarte-neukoelln/?map=parkingmap#18/52.47773/13.43523

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions