extension in single-component files about vue-mapbox-gl

[phegman]

Hi,

It is pretty much the same you just extract the code to a single file component. Take a look at this example...

Map.vue

<template>
	<mapbox 
	    access-token="your access token"
	    :map-options="{
	        style: 'mapbox://styles/mapbox/light-v9',
	        center: [-96, 37.8],
	        zoom: 3
	    }"
	    :geolocate-control="{
	        show: true, 
	        position: 'top-left'
	    }"
	    :scale-control="{
	        show: true,
	        position: 'top-left'
	    }"
	    :fullscreen-control="{
	        show: true,
	        position: 'top-left'
	    }"
	    @map-load="mapLoaded"
	    @map-click="mapClicked"
	    @map-mousemove="mapMouseMoved"
	    >
    </mapbox>
</template>

<script>
	import Mapbox from 'mapbox-gl-vue';
	import popupComponent from './Popup.vue';
	export default {
		data() {
			return {

			}
		},
		components: {
	        'mapbox': Mapbox
	    },
		methods: {
			mapLoaded(map) {
				map.addLayer({
					'id': 'points',
					'type': 'symbol',
					'source': {
						'type': 'geojson',
						'data': {
							'type': 'FeatureCollection',
							'features': [{
								'type': 'Feature',
								'geometry': {
									'type': 'Point',
									'coordinates': [-77.03238901390978, 38.913188059745586]
								},
								'properties': {
									'title': 'Mapbox DC',
									'icon': 'monument'
								}
							}, {
								'type': 'Feature',
								'geometry': {
									'type': 'Point',
									'coordinates': [-122.414, 37.776]
								},
								'properties': {
									'title': 'Mapbox SF',
									'icon': 'harbor'
								}
							}]
						}
					},
					'layout': {
						'icon-image': '{icon}-15',
						'text-field': '{title}',
						'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
						'text-offset': [0, 0.6],
						'text-anchor': 'top'
					}
				});
			},
			mapClicked(map, e) {
				this.addPopUp(map, e);
			},
			mapMouseMoved(map, e) {
				const features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
				map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
			},
			addPopUp(map, e) {
				const features = map.queryRenderedFeatures(e.point, { layers: ['points'] });
				if (!features.length) {
					return;
				}

				const feature = features[0];

				// Populate the popup and set its coordinates
				// based on the feature found.
				const popup = new mapboxgl.Popup()
					.setLngLat(feature.geometry.coordinates)
					.setHTML('<div id="vue-popup-content"></div>')
					.addTo(map);
				
				const popupContent = Vue.extend(popupComponent);
				new popupContent().$mount('#vue-popup-content');
			}
		}
	}
</script>

Popup.vue

<template>
	<button @click="popupClicked">Click Me!</button>
</template>

<script>
	export default {
		methods: {
			popupClicked() {
				alert('Popup Clicked!');
			},
		}
	}
</script>

Then you would require this Map.vue component in your main js file with something like this: Vue.component('map-component', require('./components/Map.vue')); and use it in your html like this: <map-component></map-component> The above option requires Vueify, but would be the same idea if you aren't using Vueify. I also extracted the Popup to its own file in the above example, but you can keep it in the Map Component like the example in the Readme if you prefer.

Best,
Pete

[yipcma]

Thank you Pete for the extensive answer. I see Vue.extend in Map.vue, however, the Vue is not available there? I also have Vue only in the main.js, I wonder how to resolve that, especially am curious if something using extends like https://vuejs.org/v2/api/#extends would be possible, and that it would render in run-time build.

[phegman]

No problem. Depends on how you are pulling Vue in. If you are importing it from the NPM package you most likely need to do load it onto the window object like this window.Vue = require('vue');. Then it will be available in your components.