Vuex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css">
<div id="container">
  <div id='map' class='map'>
</div>

CSS

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
}

.map-overlay {
	display: flex;
	position: absolute;
	background-color: rgba(255,150,150,0.3);
	font: 'Abel', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	cursor: pointer;
	user-select: none;
	color: #8e3433;
}

@media screen and (orientation: landscape) {
	.map-overlay {
		flex-flow: column nowrap;
		justify-content: flex-start;
		width: 30vw;
		height: 100vh;
		top: 0;
		right: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
}

@media screen and (orientation: portrait) {
	.map-overlay {
		flex-flow: row nowrap;
		justify-content: flex-start;
		width: 100vw;
		height: 30vh;
		bottom: 0;
		margin: 0;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
}

.map-overlay .item-image {
	border-radius: 5px;
	display: flex;
}

@media screen and (orientation: landscape) {
	.map-overlay .item-image {
		flex: 1 1 auto;
		min-height: 32%;
		height: 32%;
		margin: 4px;
		flex-flow: column nowrap;
		justify-content: flex-end;
	}
}

@media screen and (orientation: portrait) {
	.map-overlay .item-image {
		flex: 1 1 auto;
		min-width: 47.5%;
		margin: 4px;
		flex-flow: column nowrap;
		justify-content: flex-end;
	}
}

.map-overlay .item-image .transparant-banner {
	background-color: rgba(255,245,245,0.8);
	color: #8e3433;
	padding: 3% 10%;
	border-radius: 0 0 5px 5px;
	display: flex;
	flex: 0 1 auto;
	flex-flow: column nowrap;
	justify-content: space-around;
	min-height: 26%;
}

.name-tag {
	flex: 0 1 auto;
	font-size: 10px;
}

.distance-tag {
	flex: 0 1 auto;
	font-size: small;
}

JavaScript

// This call state data.
const state = {
  myMap: {}
}

// This is look like events.
const mutations = {
  loadMap (state, myMap) {
    state.myMap = myMap
  }
}

const actions = {
  loadMap (context) {
    mapboxgl.accessToken = 'pk.eyJ1IjoiZWRlbnJheWdhcmRuZXIiLCJhIjoiRlZRVlhqOCJ9.tDrWaeNRbMCtXAovQLYuzA'
    var myMap = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      hash: true,
      center: [-74.0073, 40.7124],
      zoom: 16
    })
    context.commit('loadMap', myMap)
  }
}
// This is store!!!.
const store = new Vuex.Store({
  state,
  mutations,
  actions
})


// Vue 
const vm = new Vue({
	el: '#container',
  data: {
  },
  store,
  mounted () {
    this.$store.dispatch('loadMap')
  },
  computed: {
    myMapForView: {
      get: function () {
        return this.$store.state.myMap
      },
      set: function () {
        this.$store.dispatch('loadMap')
      }
    }
  }
})