Myujth

Am using vue and have installed the vue-mapbox component located here: https://soal.github.io/vue-mapbox/#/quickstart

I have updated the js and css to the latest versions also that gets added to the index.html:

<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>

I am trying to utilize this component to set the default view of the map bounds using either center or bounds or fitBounds to a list of Lng,Lat coordinates. So, basically, how to plug in lng,lat coordinates and have the map default to centering these coordinates inside of the container?

Here's a Component I created, called Map in vue to output the mapbox using the component vue-mapbox listed above:

<template>
 <b-row id="map" class="d-flex justify-content-center align-items-center my-2">
 <b-col cols="24" id="map-holder" v-bind:class="getMapType">
 <mgl-map
 id="map-obj"
 :accessToken="accessToken"
 :mapStyle.sync="mapStyle"
 :zoom="zoom"
 :center="center"
 container="map-holder"
 :interactive="interactive"
 @load="loadMap" 
 ref="mapbox" />
 </b-col>
 </b-row>
</template>

<script>
import MglMap from 'vue-mapbox'
export default 
 components: 
 MglMap
 ,
 data () 
 return 
 accessToken: 'pk.eyJ1Ijoic29sb2dob3N0IiwiYSI6ImNqb2htbmpwNjA0aG8zcWxjc3IzOGI1ejcifQ.nGL4NwbJYffJpjOiBL-Zpg',
 mapStyle: 'mapbox://styles/mapbox/streets-v9', // options: basic-v9, streets-v9, bright-v9, light-v9, dark-v9, satellite-v9
 zoom: 9,
 map: , // Holds the Map...
 fitBounds: [[-79, 43], [-73, 45]]
 
 ,
 props: 
 interactive: 
 default: true
 ,
 resizeMap: 
 default: false
 ,
 mapType: 
 default: ''
 ,
 center: 
 type: Array,
 default: function () return [4.899, 52.372] 
 
 ,
 computed: 
 getMapType () 
 let classes = 'inner-map'
 if (this.mapType !== '') 
 classes += ' map-' + this.mapType
 
 return classes
 
 ,
 watch: 
 resizeMap (val) 
 if (val) 
 this.$nextTick(() => this.$refs.mapbox.resize())
 
 ,
 fitBounds (val) 
 if (this.fitBounds.length) 
 this.MoveMapCoords()
 
 
 ,
 methods: 
 loadMap () 
 if (this.map === null) 
 this.map = event.map // store the map object in here...
 
 ,
 MoveMapCoords () 
 this.$refs.mapbox.fitBounds(this.fitBounds)
 
 

</script>

<style lang="scss" scoped>
 @import '../../styles/custom.scss';

 #map 
 #map-obj 
 text-align: justify;
 width: 100%;
 
 #map-holder 
 &.map-modal 
 #map-obj 
 height: 340px;
 
 
 &.map-large 
 #map-obj 
 height: 500px;
 
 
 
 .mapboxgl-map 
 border: 2px solid lightgray;
 
 
</style>

So, I'm trying to use fitBounds method here to get the map to initialize centered over 2 Lng,Lat coordinates here: [[-79, 43], [-73, 45]]

How to do this exactly? Ok, I think I might have an error in my code a bit, so I think the fitBounds should look something like this instead:

fitBounds: () => 
 return bounds: [[-79, 43], [-73, 45]] 

In any case, having the most difficult time setting the initial location of the mapbox to be centered over 2 or more coordinates. Anyone do this successfully yet?

Ok, so I wound up creating a filter to add space to the bbox like so:

Vue.filter('addSpaceToBBoxBounds', function (value) 
 if (value && value.length) 
 var boxArea = 
 for (var b = 0, len = value.length; b < len; b++) 
 boxArea.push(b > 1 ? value[b] + 2 : value[b] - 2)
 
 return boxArea
 
 return value
)

This looks to be good enough for now. Than just use it like so:

let line = turf.lineString(this.markers)
mapOptions['bounds'] = this.$options.filters.addSpaceToBBoxBounds(turf.bbox(line))
return mapOptions

setting the initial location of the map to be centered over 2 or
more coordinates

You could use Turf.js to calculate the bounding box of all point features and initialize the map with this bbox using the bounds map option:

http://turfjs.org/docs#bbox

https://www.mapbox.com/mapbox-gl-js/api/#map