Popup withou marker not work

[morfair]

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.

[eladcandroid]

It's already fixed.. @soal changed it to "!value" but didn't build it again yet... Look here: https://github.com/soal/vue-mapbox/blob/development/src/components/UI/Popup.vue#L123

@aweinmacher - FYI

[schellenbergk]

I'm trying to do the same, show popup when I hover over one of MglGeojsonLayer polygons. Is there a way to do that?

[aweinmacher]

@schellenbergk not sure about using this particular library but surely yes with vanilla Mapbox GL JS API (via listeners to mousemove and mouseleave for your polygons layer).

[vinayakkulkarni]

I'm trying to do the same, show popup when I hover over one of MglGeojsonLayer polygons. Is there a way to do that?

Even I am trying to achieve this.

[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.

[tanc]

This will only work once this a new release is built as the fix has been merged to develop but not released. See #126

[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.

[tanc]

Strange! The only way I could get popups to work without patching is by wrapping the MglPopup in an MglMarker. Is this maybe what you have on your working site?

[tanc]

Ah sorry, just saw your edit. That explains it!

[SvenWesterlaken]

For people with npm: npm i -S https://github.com/soal/vue-mapbox.git. Comment by @gorbypark indeed helped me fix the issue 😃

[emacgillavry]

In my methods, I have a function that fires on mousemove to update popup.content for each feature, so the title of the popup will match the location. Simply adding {{ popup.content }} in the <MglPopup> returns the placeholder text. How do I create the template to update the popup?

[osvcha]

This doesn't work yet. A layer without a marker doesn't show a popup.

[johassl]

For me popup without marker works! I just had to add :close-on-click="false" to prevent the popup beeing closed by clicking the map.

<MglPopup :close-on-click="false" :showed="isPopupShown" anchor="top"> <VCard> <div>Hello, I'm popup!</div> </VCard> </MglPopup>