WAIT: Leaflet Map: markers are ignored when “Map center” is empty (no auto-fit to markers)

Feature Requests / Improvements
1

Hi Bricks team,

I originally posted this as a “How To” question, but after further testing this seems more like unexpected behavior, so I’m moving it to the Bugs category for clarification.

I’m using the Map (Leaflet) element with one or multiple markers (e.g. different office locations).

Observed behavior

  • When markers are present
  • and “Map center” is left empty

the map still falls back to a default location (e.g. Berlin), instead of centering on the marker(s).

This happens even if:

  • only a single marker is set
  • or multiple markers with valid coordinates are defined

Why this feels unexpected

From a user perspective, this is confusing:

  • All required coordinates are already available via the markers
  • Yet they are not used for the initial map view
  • Instead, a hardcoded fallback location is applied silently
    I understand that Leaflet technically requires an initial center and zoom, but in most Leaflet implementations this is just a temporary value and then replaced by a fitBounds based on the marker coordinates.

Missing functionality / expected behavior

What also seems to be missing is a way to automatically center and zoom the map so that all markers are visible (Leaflet’s fitBounds behavior).

  • Map center
  • Initial zoom level

This makes working with multiple (or changing) markers quite impractical, especially on mobile.

Questions

  1. Is this behavior intended for the Leaflet map element?
  2. If so, what is the reasoning behind ignoring marker coordinates when no map center is set?
  3. If not, would it make sense to automatically center the map on the marker bounds when markers exist?
  4. Alternatively, could an option like
  • “Auto-fit map to markers”
  • “Fit bounds to markers on load”
    be added?

This might be more of a UX / design issue than a technical bug, but the current behavior is hard to reason about when using markers.

Thanks a lot for taking a look :slightly_smiling_face:

2

Hi @Soluna,

thank you for getting in touch with us. However, I’ll move it to Feature Requests / Improvements , because I don’t think this is a bug, but just the way it works.

Now to your questions:

Yes. Because there is no fitBounds control, you have to set a “center”, otherwise will default to Berlin.

We don’t ignore marker coordinates. I think markers are still in correct place - just the map center is not adjuted to markers - but the answer is same as above, because centering like this is not implemtned.

As a feature request, yes, it would make sense to add it. But let’s see how many users request it.

I don’t understand the differences between those two?

Anyway, here is the function to auto-fit the map to markers. You can try copy-pasting it to the developer tools to see if it’s working (make sure to change the leaflet map instance ID. If it works for you, then you just need to adjust it and run it on the page.

(() => {
	const map = bricksData.leafletMapInstances['isqeyf']
	if (!map) return

	const bounds = L.latLngBounds()

	map.eachLayer(layer => {
		if (layer instanceof L.Marker || layer instanceof L.CircleMarker) {
			bounds.extend(layer.getLatLng())
		}
	})

	if (bounds.isValid()) {
		map.fitBounds(bounds, {
			padding: [40, 40],
			maxZoom: 16,
		})
	}
})()

Best regards,
Matej

1 Like
3

Thanks for the clarification, that makes sense.

To clarify the wording:
Both “Auto-fit map to markers” and “Fit bounds to markers on load” mean the same thing technically.
The intention was simply an option that uses marker coordinates for the initial map view instead of a hardcoded fallback.

I agree this fits better as a feature request.
Thanks also for sharing the JS snippet – that helps a lot.