Mapwize UI

Fully featured and ready to use Widget to add Mapwize Indoor Maps and Navigation in your Web app.

And it's open-source !

MapwizeUI version 1.0.9 uses Mapwize SDK version 3.4.5
For documentation about Mapwize SDK objects like Venue, Place, MapOptions... Please refer to the Mapwize SDK documentation on docs.mapwize.io.

Description

The Mapwize UI widget comes with the following components:

Browser support

The SDK is tested against the following browsers:

Installation

Npm

Add the following npm package to your project :

npm install mapwize-ui --save

CDN

You use the CDN url directly in your HTML page

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mapwize-ui@1.0.9"></script>

Manual

Initialization

Mapwize UI can be instantiated with the constructor:

MapwizeUI.map(container?, options)

The map method return a Promise that is resolved when the map and the UI are ready

Map parameters

container

The HTML element in which Mapbox GL JS will render the map, or the element's string id . The specified element must have no children. This parameter is optionnal, default point to the id: mapwize

options

The following parameters are available for map initialization:

Parameters usage

Without options Without container parameter With container parameter With container option
html <div id="mapwize"></div> <div id="mapwize"></div> <div id="myMap"></div> <div id="myMap"></div>
js MapwizeUI.map(apiKey) MapwizeUI.map(options) MapwizeUI.map('myMap', options) MapwizeUI.map({ container: 'myMap'})

Simplest example (open in jsfiddle)

<div id="mapwize"></div>
MapwizeUI.map('YOUR_MAPWIZE_API_KEY_HERE')

Center on venue

To have the map centered on a venue at start up:

<div id="mapwize"></div>
var options = {
  apiKey: 'YOUR_MAPWIZE_API_KEY_HERE',
  centerOnVenue: 'YOUR_VENUE_ID'
}
MapwizeUI.map(options).then(map => {
  console.log('Mapwize map and ui are ready to be used')
})

Center on place

To have the map centered on a place with the place selected at start up:

<div id="mapwize"></div>
var options = {
  apiKey: 'YOUR_MAPWIZE_API_KEY_HERE',
  centerOnPlace: 'YOUR_PLACE_ID'
}
MapwizeUI.map(options).then(map => {
  console.log('Mapwize map and ui are ready to be used')
})

Demo application

The src/index.html file shows how to quickly add Mapwize UI to an HTML page.

The only thing you need to get started is a Mapwize api key.
You can get your key by signing up for a free account at mapwize.io.

Once you have your API key, copy it to index.html in the map options and run the app using

npm run start

Please note that if you are using this index.html outside of a the Webpack environment, you will need to manually import Mapwize UI by adding

<script type="text/javascript" src="./dist/mapwizeui.js"></script>

or using the CDN as explained in the installation section.