https://github.com/3dtech/wayfinder-vue-components

VueJS components for 3D Wayfinder Front End application
https://github.com/3dtech/wayfinder-vue-components

floor floorplan javascript map vue vuejs wayfinding

Last synced: 8 days ago
JSON representation

VueJS components for 3D Wayfinder Front End application

• Host: GitHub
• URL: https://github.com/3dtech/wayfinder-vue-components
• Owner: 3dtech
• Created: 2021-08-03T08:14:51.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-04T13:22:39.000Z (15 days ago)
• Last Synced: 2024-11-04T13:28:31.291Z (15 days ago)
• Topics: floor, floorplan, javascript, map, vue, vuejs, wayfinding
• Language: JavaScript
• Homepage: https://3dwayfinder.com/documentation/javascript-api/
• Size: 1.5 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# wayfinder-vue-components

VueJS UI components for 3dwayfinder floor plan SDK.

Uses Vuex to make the SDK data bindable.

[Read more](https://3dwayfinder.com).

# Installation

Include 3dwayfinder SDK into your HTML head.

### Install with npm

    npm install @3dwayfinder/wayfinder-vue-components

### Add into main.js

    import Vuex from 'vuex'

    import WayfinderVueComponents from '@3dwayfinder/wayfinder-vue-components';

### Create a store or use a existing one. 3DWayfinder creates namespaced ('wf') store itself.

    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));

                },

        }

    })

### Set which map type is used

    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')

# Usage

You need to change the project argument from **demo** to your **project ID** (a long hash found in the admin area in Projects page)

    

        import { WFMap } from '@3dwayfinder/wayfinder-vue-components'

        export default {

            name: 'app',

            components: {

                WFMap,

            },

            methods: {

                mapLoaded () {

                    console.log('mapLoaded')

                },

		        onMapPOIClick (poi) {

                    console.log('onMapPOIClick', poi)

                }

            }

        }

    

    

	    


		    


                

            

        

    


# Components

[Components](./COMPONENTS.md)