mechanic-map 0.15.4 → 0.16.0

package/README.md

@@ -1,10 +1,4 @@
-# Mechanic Map SDK
-
-## Setup
-
-```sh
-node -v # v12.x.x
-```
+# Mechanic Map SDK v2 (package version v0.16.0)
 
 ```js
 // Initialize MechanicMap
@@ -12,33 +6,76 @@ node -v # v12.x.x
 const svgMapParams = {
   id: "x-map", // map id - required
   developer: false, // developer mode | default = false
-  rotate: 0, // map rotation
   height: 800, // viewport height
   maxScale: 2,
   textOnRect: { // location text configs
     enabled: true,
-    maxFontSize: 96,
-    minFontSize: 12,
+    maxFontSize: 48,
+    minFontSize: 8,
     fontFamily: "sans-serif",
     mode: "dynamic",
   },
-  animation: {
-    mode: "line",
+  tooltip: {
+    navigation: {
+      text: 'Go to Here '
+    },
+    detail: {
+      text: 'Go to Details'
+    },
+    enterBuilding: {
+      text: 'ENTER'
+    }
   },
   stackMode: false,
+  servicesEnabled: true,
   data: { // map data - required
-    mapWidth: 4000,// map (svg) width - required
-    mapHeight: 3000,// map (svg) height - required
-    levels: [], // required - required
+    buildings: content.buildings,  // for multiple building
+    levels: [
+      {
+        // ...floor,
+        id: floor._id,
+        no: floor.no,
+        title: floor.name,
+        isInitial: floor.no === content.mall.mall_initial_floor,
+        isOutdoor: floor.is_outdoor, // for multiple building
+        building: floor.building, // for multiple building
+        map: {
+          initialScaleFactor: floor.scale,
+          svg: floor.svg,
+          width: floor.dimension.width,
+          height: floor.dimension.height
+        },
+        locations: [
+          {
+            id: location.s,
+            type: 'store',
+            title: store.name.en,
+            image_url: store.logo,
+            // just tests
+            ...(store.pin && { pin: true }),
+            ...(store.label && { label: true }),
+            rawData: store
+          },
+          // ... other stores
+          {
+            id: location.s,
+            type: 'service',
+            title: service.name.en,
+            image_url: service.image,
+            rawData: service
+          },
+          // ... other services
+        ]
+      },
+    ],
     nodes: [], // required for SP
     paths: [], // required for SP 
-  }
+  },
 }
 
 (MechanicMap && MechanicMap.default)($);
 const $svgMap = $("#svg-map"); // map container
 const map = $svgMap.svgMap(svgMapParams).data("svg-map");
-
 ```
 
 
@@ -114,6 +151,15 @@ const svgMapParams = {
   },
 }
 
+// add enter building text
+const svgMapParams = {
+  tooltip: {
+    enabled: true,
+    enterBuilding: {
+      text: 'ENTER'
+    },
+  },
+}
 ```
 
 ### Location Pin
@@ -131,6 +177,7 @@ const svgMapParams = {
 }
 ```
 
+
 ### Animation Modes
 ```js
 const svgMapParams = {
@@ -156,39 +203,73 @@ const svgMapParams = {
 }
 ```
 
-### Stack Mode
+## Listeners
+
+### Map Ready
 ```js
-const svgMapParams = {
-  // ... others
-  cssAnimation: true, // If this value is false, it will cause tooltip errors.
-  stackMode: {
-    enabled: true,
-    offset: 10, // distance between floors 
-    switchFloorTime: 5 * SECOND
-  },
-}
+$svgMap.on('mapReady', function() {
+  console.log('on:mapReady');
+});
 ```
 
-## Listeners
-
-### Selected Location (store)
+### Levels Ready
 ```js
-$svgMap.on("locationOpened", function (event, location) {
-  console.log("on:locationOpened", location);
+$svgMap.on('levelsReady', function(event, levels, levelId, isOutdoor) {
+  console.log('on:levelsReady', levels, levelId, isOutdoor);
+  
+  // example level buttons...
+  // predefined - const $levels = $('#levels');
+  $levels.html(''); // clear levels
+  if (!isOutdoor) {
+    $('<a/>')
+      .addClass('btn-floor')
+      .data('floor-number', false)
+      .text('<- Go Back')
+      .appendTo($levels);
+  }
+
+  for (const level of levels) {
+    const $a = $('<a/>')
+      .addClass('btn-floor')
+      .data('floor-number', level.no)
+      .text(level.title.en);
+
+    if (levelId === level.id) {
+      $a.addClass('active');
+    }
+
+    $a.appendTo($levels);
+  }
 });
 ```
 
-### Selected Location (service)
+### Level Ready
 ```js
-$svgMap.on("serviceLocationOpened", function (event, location) {
-  console.log("on:serviceLocationOpened", location);
+$svgMap.on('levelReady', function(event, levelId, levelNo, isOutdoor) {
+  console.log('on:levelReady', levelId, levelNo, isOutdoor);
+
 });
 ```
 
 ### Level Switched
 ```js
-$svgMap.on("switchLevel", function (event, selectedLevelId, selectedLevelNo) {
-  console.log("on:switchLevel", selectedLevelId, selectedLevelNo);
+$svgMap.on("levelSwitched", function (event, selectedLevelId, selectedLevelNo) {
+  console.log("on:levelSwitched", selectedLevelId, selectedLevelNo);
+});
+```
+
+### Selected Location (store, service, building)
+```js
+$svgMap.on("locationOpened", function (event, location) {
+  // id, title, type, rawData
+  console.log("on:locationOpened", location);
+});
+```
+
+### Unselected Location (store, service, building)
+```js
+$svgMap.on("locationClosed", function (event) {
+  console.log("on:locationClosed");
 });
 ```
 
@@ -199,6 +280,7 @@ $svgMap.on("navigationClicked", function (event, locationId) {
 });
 ```
 
+
 ### Detail Clicked (tooltip detail button)
 ```js
 $svgMap.on("detailClicked", function (event, locationId) {
@@ -206,6 +288,14 @@ $svgMap.on("detailClicked", function (event, locationId) {
 });
 ```
 
+### Enter building Clicked (tooltip enter building button)
+```js
+$svgMap.on("enterBuildingClicked", function (event, $btn, buildingId, locationId) {
+  console.log('on:enterBuildingClicked -> buildingId', buildingId);
+  map.enterBuilding(buildingId);
+});
+```
+
 ### Close Clicked (tooltip close button)
 ```js
 $svgMap.on("closeClicked", function (event, locationId) {
@@ -213,24 +303,93 @@ $svgMap.on("closeClicked", function (event, locationId) {
 });
 ```
 
-### Navigation
+### Started a navigation
 With this listener, you can: What floor am I on? Am I on the floor where navigation begins? Am I on the last floor? Is there a next floor?
 ```js
-$svgMap.on('navigation', function(event, { isStartFloor, isEndFloor, currentFloorNo, nextFloorNo, levelChanger }) {
+$svgMap.on('navigation', function(event, { isStartFloor, isEndFloor, currentFloorNo, nextFloorNo, levelChanger, hasPrevNavigate, hasNextNavigate, hasPrevBuildingNavigate, hasNextBuildingNavigate }) {
   console.log('on:navigation', isStartFloor, isEndFloor, currentFloorNo, nextFloorNo, levelChanger);
+
+  // is multiple building?
+  console.log('on:navigation', hasPrevBuildingNavigate, hasPrevBuildingNavigate);
+
+  // If there is more than one building and isEndFloor is true, then next can navigate.
+  // hasPrevNavigate, hasNextNavigate
+  console.log('on:navigation', hasPrevNavigate, hasNextNavigate);
 });
 ```
 
-### Navigation Cancelled
+### Canceled a navigation
 ```js
-$svgMap.on('navigationCancelled', function() {
-  // maybe hide popup...
+$svgMap.on('navigationCancelled', function(event) {
+  console.log('on:navigationCancelled');
 });
 ```
+
 ## Functions
 
+### Update Localized Texts
+```js
+map.updateLocalized({
+  floorText: '',
+  navigationText: '',
+  detailText: '',
+  enterBuildingText: '',
+  closeText: ''
+});
+```
+
+### Enter The building
+```js
+map.enterBuilding(buildingId);
+```
+
+### Exit The building
+```js
+map.exitBuilding();
+```
+
+### Switch Level (current building)
+```js
+map.switchLevelToNumber(levelNo);
+```
+
+### Switch Level (all building)
+```js
+map.switchLevelToId(levelNo);
+```
+
+### Show Location
+```js
+map.showLocation("K0_store_14");
+```
+
+### Highlight Location
+```js
+map.map.highlightLocation("K0_store_14");
+```
+
+### Hide Location (trigger locationClosed event)
+```js
+map.hideLocation();
+```
+
+### Is multiple building?
+```js
+map.isMultiBuilding();
+```
+
+### Get levels
+```js
+map.getLevels();
+```
+
+### Get nodes and paths (for kiosks)
+```js
+map.getNodes();
+map.getPaths();
+```
 
-### Calculate SP Navigation (v1)
+### Calculate SP Navigation (v1, for kiosk - not supported multiple building)
 This function can be used with kiosk data
 ```js
 /*
@@ -250,14 +409,17 @@ const svgMapParameters = {
 // p = pedestrian, d = disabled
 const sp = map.calculateSP('K0_kiosk_01', 'K1_store_50', 'p');
 
+// same function
+// const sp = map.calculateSP_v1('K0_kiosk_01', 'K1_store_50', 'p');
+
 if (sp.length) {
-  map.showNavigation(sp, true, true, true);
+  map.startNavigation(sp, true, true, true);
 } else {
   // No suitable directions found
 }
 ```
 
-### Calculate SP Navigation (v2)
+### Calculate SP Navigation (v2, for kiosk - not supported multiple building)
 This function can be used with kiosk data
 ```js
 /*
@@ -280,53 +442,77 @@ const sp = map.calculateSP_v2('KE1_kiosk_09', 'KE7_parkingspot_01', 'auto');
 // sp.alternative -> alternative fastest route
 
 if (sp.route) {
-  map.showNavigation(sp.route, true, true, true);
+  map.startNavigation(sp.route, true, true, true);
 }
 
 // or
 
 if (sp.alternative) {
-  map.showNavigation(sp.route, true, true, true);
+  map.startNavigation(sp.route, true, true, true);
 }
 ```
 
-
 ### Start Navigation
+Decides whether to use showNavigation or showNavigationWithMultiple.
 ```js
-// navigationDetails, autoMode = true, zoomEnabled = true, showPins = true
-// navigationDetails = sp function data
-map.showNavigation(sp, true, true, true);
+map.startNavigation(sp, autoMode = true, zoomEnabled = true, showPins = true)
+// map.showNavigation(sp, autoMode = true, zoomEnabled = true, showPins = true)
+// map.showNavigationWithMultiple(sp, autoMode = true, zoomEnabled = true, showPins = true)
+
 ```
 
+### Can we switch to the previous step?
+```js
+map.hasPrevNavigate()
+```
 
-### Stop Navigation
+### Start navigation from the previous step
 ```js
-// ?reset map zoom = default true
-map.closeNavigation(true);
+map.prevNavigate(autoMode = false, zoomEnabled = true, showPins = true)
 ```
 
+### Can we switch to the previous building? (for multiple building)
+```js
+map.hasPrevBuildingNavigate()
+```
 
-### Restart Navigation (run with last startNavigation function parameters)
+### Start navigation from the previous building (for multiple building)
 ```js
-map.restartNavigation();
+map.prevBuildingNavigate(autoMode = false, zoomEnabled = true, showPins = true)
 ```
 
-### Update Localized Texts
+### Can we switch to the next step?
 ```js
-map.updateLocalized({
-  floorText: '',
-  navigationText: '',
-  detailText: '',
-  closeText: ''
-});
+map.hasNextNavigate()
+```
+
+### Start navigation from the next step
+```js
+map.nextNavigate(autoMode = false, zoomEnabled = true, showPins = true)
+```
+
+### Can we switch to the next building? (for multiple building)
+```js
+map.hasNextBuildingNavigate()
 ```
 
-### Show All Floors on Stack Mode 
+### Start navigation from the next building (for multiple building)
 ```js
-map.stackMode();
+map.nextBuildingNavigate(autoMode = false, zoomEnabled = true, showPins = true)
 ```
 
-## styles
+### Restart Navigation by started navigation params
+```js
+map.restartNavigation()
+```
+
+### Close Navigation
+```js
+map.closeNavigation()
+```
+
+
+## Custom Styles
 ```css
 text {
   fill: #fff;