Popup's [x] showing before popup is opened

[bmeredyk]

Just starting to try out vue-mapbox and generally have it working but am finding that my popups are for some reason partially showing even before I've clicked on the corresponding marker to actually trigger their display.

This happens for all markers on the map. Then when you click on a marker the actual popup appears as one would expect (and the other marker's funky [x] popups go away)

<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue-mapbox -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"></script>

<div id="mymap">
		<h2>Mapbox Map Example {[markerCoords]}</h2>
		<p>{[mapStyle]}</p>
		<div style="text-align: left;">
		<mgl-map  style="height: 250px; width: 250px;"
			:access-Token="accessToken"
			:map-Style.sync="mapStyle" 
			:center="markerCoords"
			:zoom="10">
			<mgl-navigation-control position="top-right"></mgl-navigation-control>
			<mgl-marker v-for="marker in markers" :coordinates="marker.coords" color="blue">
			  <img src="https://www.fmsc.org/images/pin.png" slot="marker" />
			  <mgl-popup :coordinates="marker.coords" :anchor="top">
				  <div><strong>{[marker.text]}</strong></div>
			  </mgl-popup>
			</mgl-marker>
		</mgl-map>
		<a class="btn btn-default" v-on:click.prevent="addMarker()">Add marker</a>
		</div>
</div>
<script type="text/javascript">
Vue.use(VueMapbox.plugin, { mapboxgl: window.mapboxgl })
new Vue({
	el: "#mymap",
	delimiters: ['{[', ']}'],
	components: {
		MglMap: VueMapbox.MglMap,
		MglNavigationControl: VueMapbox.MglNavigationControl,
		MglGeolocateControl: VueMapbox.MglGeolocateControl,
		MglMarker: VueMapbox.MglMarker,
		MglPopup: VueMapbox.MglPopup
	},
	data: {
		accessToken: 'pk.eyJ1I....', // your access token. Needed if you using Mapbox maps
      	        mapStyle: 'mapbox://styles/mapbox/streets-v9', // your map style
		markerCoords: [ -88.225114, 41.7673166 ],
		markers: [
			  {text: 'Marker 1', coords: [ -88.225114, 41.7673166 ]},
			  {text: 'Marker 2', coords: [ -89.225114, 41.7673166 ]},
			  {text: 'Marker 3', coords: [ -88.225114, 42.7673166 ]}
		  ]
	},
	methods: {
		addMarker: function(){
			var newCoord = this.markers[this.markers.length-1].coords
			newCoord[0] = newCoord[0] + 0.25;
			newCoord[1] = newCoord[1] + 0.25;
			this.markers.push({
				text: 'Marker ' + this.markers.lenght+1,
				coords: newCoord
			})
		}
	}
})
</script>

[bmeredyk]

Ok, realized I was missing the slot="popup" property of mgl-popup. So with that I'm not getting the funky [x] displaying by each of my markers. And then I realized that the docs said

You can use togglePopup Marker method to toggle visibility of bound Popup

Which I took to mean you should add v-on:click="togglePopup()" to the maker but that doesn't seem to do anything.

[bmeredyk]

OK, figured out that you need to use mgl-popup WITHOUT adding slot="popup" to it and without coordinates either. The example is rather misleading.

<mgl-marker v-for="marker in siteMarkers" 
     :key="marker.id" 
     :coordinates="marker.coords" 
     color="blue"
 >
    <img src="https://www.you.com/images/pin.png" slot="marker" />
        <mgl-popup anchor="bottom-left" >
            <div>
                <strong>{[marker.name]}</strong>
                <address>
                    {[marker.address]}<br />
                     {[marker.city]}, {[marker.state]} {[marker.zip]}
                </address>
            </div>
        </mgl-popup>
</mgl-marker>

Now if I could just figure out how to get click events on markers to trigger other actions

[s0meRandomDev]

@bmeredyk , it's more a workaround than a solution for your click event, but if you are still using popups on your marker, they emit an open and a close event, you can listen to these to fire other actions. A click event on the marker itself would be nice though.