Skip to content

Storing markers in array messes up map layout #57

Closed
@Jones-S

Description

@Jones-S

Hi there

I have a map with about 5 markers, of which 1 is the active one.
Now on route change I would like to update the markers to change the active one.

First I thought of creating the marker as a vue instance to bind some store data to it. But referring to this other issue this was not really successful – at least as far as I understood.

My alternative solution was to remove all markers and add them again (I only have 5 and I just need to update the active one).
Unfortunately If I store all markers in an array, I have a weird looking map:

data() {
    return {
      markers: []
    }
  },

...

const marker = new mapboxgl.Marker(el)
          .setLngLat(point.geometry.coordinates)
          .addTo(map)

this.markers.push(marker)

Adding this.markers.push(marker) will cause the map to look like this:
image

Instead of
image

Did anyone experience something like this before?

I would need an array of all markers to loop over them and remove them after a change if the binding does not work.

Like:

    removeMarkers() {
      this.markers.forEach(m => {
        m.remove()
      })
    },

Preferably I would like to see a solution with the binding, but if not, I would be definitely interested in knowing what is happening with the map layout.

Thank you in advance.
Cheers

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