Popup withou marker not work

I want to show popup in custom place of map by click event. For this I write:

<MglMap ...>
 <MglPopup>
 </MglPopup>
 <!-- Some layers... -->
</MglMap>

and then set popups prop ‘showed’ to true, but popup don’t showing.

I try place popup in market, in it showing!!!

<MglMap ...>
 <MglMarker>
  <MglPopup>
  </MglPopup>
 </MglMarker>
 <!-- Some layers... -->
</MglMap>

Why popup don’t show without marker??

P.S.: Sorry for my English.

[gorbypark]

It’s working for me with the above code. It’s pretty weird, as I tried to create a codesandbox to prove that it’s working, and it is not working there using the exact same code! I’m pretty stumped at how I managed to do it. The only thing that would be different is that I’m using nuxt…but that still doesn’t really make sense. edit It turns out I’m using the development version since I cloned the repo and made a small unrelated change to the code already, so that explains that. For future lurkers, it’s pretty easy. Instead of doing yarn add vue-mapbox, just do yarn add https://github.com/soal/vue-mapbox.git and you’ll have the development version.

[gorbypark]

@schellenbergk @vinayakkulkarni If you add something like @mousemove="onMapMouseMoved" to <MglMap ref="mglmap"> and then in methods have something along the lines of

onMapMouseMoved(e) {
  const features = this.$refs.mglmap.map.queryRenderedFeatures(e.mapboxEvent.point)
  if (features.length && features[0].layer.id === 'vector-layer') { // vector-layer is the id of your layer
    this.popup.coordinates = [
      e.mapboxEvent.lngLat.lng,
      e.mapboxEvent.lngLat.lat
    ]
    this.popup.showed = true // show the popup
    this.$refs.mglmap.map.getCanvas().style.cursor = 'pointer' // changes the mouse to a pointer
  } else {
    this.$refs.mglmap.map.getCanvas().style.cursor = '' // changes mouse back to standard
    this.popup.showed = false // hide the popup when mouse not over layer
  }

You’ll need to add <MglPopup> as well

<MglPopup
  :coordinates="popup.coordinates"
  :showed="popup.showed"
  anchor="top"
>

your data section should look something like this

data() {
  return {
      popup: {
        coordinates: [-122.9, 50.1], // this can't be blank!  it won't be shown but pick something
        showed: false,
        content: `stuff will go here, hopefully`
      }
  }
}

It works just like the stock mapbox gl works, the only thing is you need to use e.mapboxEvent instead of just e like all the examples show! That took a while to figure out.