VueJS UI components for 3dwayfinder floor plan SDK. Uses Vuex to make the SDK data bindable. Read more.
Include 3dwayfinder SDK into your HTML head.
npm install @3dwayfinder/wayfinder-vue-components
import Vuex from 'vuex'
import WayfinderVueComponents from '@3dwayfinder/wayfinder-vue-components';
const store = new Vuex.Store({
state: {
appName: "Wayfinder Vue Components",
currentPOI: null,
},
mutations: {
setPOI (state, poi) {
state.currentPOI = poi;
},
},
actions: {
setPOI : (context, poi) => {
context.commit('setPOI', Object.freeze(poi));
},
}
})
const WF_MAP_TYPE = "2d"; // "3d"
Load wayfinder and the vuex store. Notice that wayfinder is passed a little differently than usual. This is because of wayfinder needs Vuex as a dependcy.
Vue.prototype.$WF_MAP_TYPE = WF_MAP_TYPE;
new Vue({
store,
render: h => h(App),
created () {
Vue.use(WayfinderVueComponents, this.$store) // Create it by passing in the store you want to use
}
}).$mount('#app')
You need to change the project argument from demo to your project ID (a long hash found in the admin area in Projects page)
<script>
import { WFMap } from '@3dwayfinder/wayfinder-vue-components'
export default {
name: 'app',
components: {
WFMap,
},
methods: {
mapLoaded () {
console.log('mapLoaded')
},
onMapPOIClick (poi) {
console.log('onMapPOIClick', poi)
}
}
}
</script>
<template>
<div id="app">
<div class="map-area-container">
<WFMap project="demo" @poiClicked="onMapPOIClick" @loaded="mapLoaded" ref="map"/>
</div>
</div>
</template>