LogoLogo
CMSGitHubSupportBook a demo
  • Documentation
  • Academy
  • Help Center
  • Welcome
  • SDKS & Frameworks
    • Web
      • Getting Started
        • Prerequisites
          • MapsIndoors
          • Map Engine Provider
            • Option 1: Get your Mapbox Access Token
            • Option 2: Get your Google Maps API Keys​
          • Map Engine Setup
        • Getting Started: MapsIndoors
      • Map Visualization
        • Highlight, Hover and Select
        • Remove Labels from Buildings and Venues
        • Change Building Outline
        • Managing Collisions Based on Zoom Level
        • 3D Maps
          • Managing your 3D Maps
        • Base Map Styling - Google Maps
        • Managing feature visibility for Mapbox
      • Wayfinding
        • Directions
        • Directions Service
          • Tailoring the directions to your specific needs
        • Directions Renderer
          • Customizing the Route Animation
        • Multi-stop navigation
          • Custom Icons
        • User's Location as Point of Origin
      • Search
        • Search Operations
        • Searching
        • Using External ID, Geospatial Joins
        • Utilizing MapsIndoors Web Components and Other Searches
      • Map Management
      • Data Visualization
        • Display Heatmap Overlay
      • Other guides
        • Authentication
          • Single Sign-On
            • SSO Configuration
            • SSO Authorisation
          • 2-Factor Authentication
          • Password Reset
        • Application User Roles
        • Custom Properties
        • Display Language
        • Language
        • User Positioning
          • Show User's Location aka. Blue Dot
          • Using Cisco DNA Spaces
        • Working with Events
        • Turn Off Collisions Based on Zoom Level
        • Remove Labels from Buildings and Venues for Web
        • Synchronizing data for a subset of venues
        • Custom Floor Selector
      • Display Rules in Practice
      • Offline Data
      • Managing map visibility
    • Android
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
        • Enable Live Data
        • Integrating MapsIndoors into your own App
        • Migrating from V3 to V4
          • Migrating to Mapbox V11
      • Directions
        • Directions Service
        • Directions Renderer
          • User's Location as Point of Origin
        • Wayfinding Instructions
          • See Route Element Details
        • Using multi-stop navigation
      • Searching
        • Searching on a Map
        • Creating a Search Experience
      • Switching Solutions
      • Caching & Offline Data
      • Display Language
      • Displaying Objects
        • Application User Roles
        • Getting a Polygon from a Location
        • Location Clustering
        • Location Data Sources
        • Location Details
        • Turn Off Collisions Based on Zoom Level
        • Enabling and Disabling features on the map
      • Change Building Outline Color
      • Event Logging
      • Configuring a menu with AppConfig
      • Display Heatmap Overlay
      • Custom Properties
      • Custom Floor Selector
      • External IDs
      • User Positioning
        • Show User's Location aka. Blue Dot
        • Using Cisco DNA Spaces
        • Using Google Fused Location Provider
        • Using Indoor Atlas
      • Authentication
        • Single Sign-On
          • SSO Configuration
          • SSO Authorisation
        • 2-Factor Authentication
        • Password Reset
      • Display Rules in Practice
        • Label styling through Display Rules
      • Highlight and Select
    • iOS
      • Getting Started
        • Prerequisites
        • Set Up Your Environment
        • Display a Map
        • Search
        • Getting Directions
        • Migrating from v3 to v4
      • Directions
        • Directions Renderer
          • User's Location as Point of Origin
        • Wayfinding Instructions
          • See Route Element Details
        • Directions Service
        • Using multi-stop navigation
      • Searching
        • Searching on a Map
        • Creating a Search Experience
      • Caching & Offline Data
      • Displaying Objects
        • Application User Roles
        • Getting a Polygon from a Location
        • Location Details
        • Turn Off Collisions Based on Zoom Level
        • Enabling and Disabling features on the map
      • Custom Floor Selector
      • Change Building Outline Color
      • Custom Map Padding
      • Custom Properties
      • Display Rules in Practice
        • Label styling through Display Rules
      • Switching Solutions
      • Show User's Location aka. Blue Dot
        • Using Indoor Atlas
        • Using Cisco DNA Spaces
      • Highlight and Select
      • Display Language
    • React Native
      • Getting Started
        • Prerequisites
        • Project Setup
        • Displaying a Map
        • Creating a Search Experience
        • Getting Directions
        • Enabling Live Data
      • Showing Blue Dot
    • Flutter
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
      • Migration Guide
    • Integration API
      • Integration API Access
        • Access with Swagger
        • Access with Postman
        • Access with Python
        • Client credentials flow
      • Data Description
      • Reverse Geocoding
      • Route Access
      • OpenAPI Specification
    • Built-In Map Edits
      • Getting started
      • Authentication
      • Release notes
      • Reference docs
  • Products
    • Product Overview
    • CMS
      • Interface Overview
      • Display Rules
      • Location Types
      • Categories
      • Media Library
        • 2D Models and Icons
        • 3D Models
      • Editing Data
      • Solution Settings
      • Settings
      • Data Concepts
      • User Roles
      • Route Network
        • Barrier Route Element
        • Door Route Element
      • Additional Location Details
    • Map Template
      • Getting Started
        • Web Component
        • React Component
      • Configuration
        • Query Parameters
      • Customization
      • Deploying Map Template to a cloud storage provider
      • 2D/3D Visibility Switch
      • External customization of the Map Template
      • Location Details configuration
      • Kiosk
        • QR code configuration
  • Other
    • Map Design
      • Map Design System
      • Using a Custom Mapbox MapStyle
      • 2D Models
    • Changelog
      • Web SDK
        • V4
        • V3
      • Android SDK
        • V4
        • V3
      • iOS SDK
        • V4
        • V3
      • React Native SDK
      • Flutter SDK
      • MI Components
      • Map Template
    • Glossary
  • Legacy Docs
    • Android SDK V3
      • Getting Started
        • Prerequisites
        • Create a New Project
        • Show a Map
        • Create a Search Experience
        • Getting Directions
        • Enable Live Data
        • Integrating MapsIndoors into your own App
    • iOS SDK V3
      • Getting Started
        • Prerequisites
        • Set Up Your Environment
        • Display a Map
        • Search
        • Directions
        • Live Data
        • Integrating MapsIndoors into your own App
      • Inspect Route Element for iOS v3
      • Using Cisco DNA Spaces
      • Using Indoor Atlas
      • Switching Solutions
      • Show User's Location aka. Blue Dot
      • Application User Roles
      • Getting a Polygon from a Location
      • Location Details
  • MapsIndoors SDK Firewall
  • Google Analytics & Logging
  • Reference Docs
    • Web SDK
    • Android SDK
    • iOS SDK
    • React Native SDK
    • Flutter SDK
Powered by GitBook
On this page
  • ✅ Prerequisites
  • ⚙️ Install
  • 🚀 Usage

Was this helpful?

Export as PDF
  1. SDKS & Frameworks
  2. Built-In Map Edits

Getting started

Last updated 1 month ago

Was this helpful?

✅ Prerequisites

Make sure you have the following before using the @mapsindoors/built-in-map-edits package:

  • A MapsIndoors Client ID: A client_id is required for . Please contact MapsPeople support to obtain your client_id. For development purposes, you can alternatively authenticate using a MapsIndoors CMS user account.

  • MapsIndoors Data: Familiarity with the is recommended.

  • Authentication Knowledge: Familiarity with OAuth and OpenID Connect (OIDC) is necessary.

  • Programming Skills: Basic understanding of TypeScript or JavaScript is necessary.

  • Development Environment: Set up Node.js with npm or Yarn.


⚙️ Install

You can add the @mapsindoors/built-in-map-edits package to your project using npm or yarn:

NPM :

npm install @mapsindoors/built-in-map-edits

Yarn :

yarn add @mapsindoors/built-in-map-edits

🚀 Usage

Obtaining an Access Token

To interact with the MapsIndoors API, you need an access token. This example demonstrates how to obtain an access token using the OAuth Resource Owner Password Credentials Grant flow. This should only be used for development or testing purposes.

Warning: Do not use this method in production! Never hardcode your MapsIndoors username and password directly into your client-side code because it exposes your credentials to anyone who views the source code. This example is for development/testing purposes only. Use a secure backend service to handle authentication.

const response = await fetch('https://auth.mapsindoors.com/connect/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
        'grant_type': 'password',
        'client_id': 'client',
        'username': 'YOUR_USERNAME', // Replace with your MapsIndoors username.
        'password': 'YOUR_PASSWORD' // Replace with your MapsIndoors password.
    })
});

if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();
const accessToken = data.access_token;

List Available Solutions

You can retrieve a list of available MapsIndoors solutions that the access token grants access to using the getAvailableSolutions() method:

import { MapsIndoorsEditor } from '@mapsindoors/built-in-map-edits';

MapsIndoorsEditor.accessToken = accessToken;

const availableSolutions = await MapsIndoorsEditor.getAvailableSolutions();

for (const { name, id } of availableSolutions) {
    console.log(`Solution: ${name} - (${id})`);
}

Obtaining a SolutionManager

To interact with the data (like Locations and Types) within a specific MapsIndoors Solution, you first need a SolutionManager instance. This object provides the methods for accessing and modifying data.

There are two primary ways to obtain a SolutionManager:

  1. Open by Solution ID: Use this method if you know the ID of the MapsIndoors Solution you want to edit.

  2. Connect to an SDK Instance: Use this method if you are integrating the editor with an existing MapsIndoors Web SDK map display.

Choose one of the following methods based on your use case:

Note: Both examples are a continuation of the example found in Obtaining an Access Token

Method 1: Opening a Solution by ID (open)

If you have the ID of the specific MapsIndoors solution you want to manage (perhaps obtained using getAvailableSolutions() above), you can use the `MapsIndoorsEditor.open() method.

import { MapsIndoorsEditor } from '@mapsindoors/built-in-map-edits';

MapsIndoorsEditor.accessToken = accessToken;

const solutionIdToOpen = 'YOUR_SOLUTION_ID';

try {
    const solutionManager = await MapsIndoorsEditor.open(solutionIdToOpen);
    console.log(`Successfully opened solution: ${solutionManager.solutionId}`);
    // Now you can use solutionManager to interact with the solution's data.
} catch (error) {
    // Handle errors (e.g., invalid token, invalid ID, network issues)
    console.error(`Failed to open solution ${solutionIdToOpen}:`, error);
}

Replace 'YOUR_SOLUTION_ID' with your desired solution ID.

This method returns a SolutionManager promise, which resolves once the necessary solution configuration is loaded.

Method 2: Connecting to an Existing SDK Instance (connect)

If you are integrating these editing capabilities into an application that already uses the MapsIndoors Web SDK (v4.39.1 or later), you can use the MapsIndoorsEditor.connect() method. This approach leverages the existing SDK instance, automatically determining the correct solutionId.

This is particularly useful for building interactive editing tools where changes can be visualized directly on the map provided by the SDK.

Note: In this example, it is assumed that mapsIndoorsInstance is a reference to an existing MapsIndoors SDK instance.

import { MapsIndoorsEditor } from '@mapsindoors/built-in-map-edits';

MapsIndoorsEditor.accessToken = accessToken;

try {
    // Pass your existing MapsIndoors SDK instance to connect
    const solutionManager = await MapsIndoorsEditor.connect(mapsIndoorsInstance);
    console.log(`Successfully connected to SDK solution: ${solutionManager.solutionId}`);
    // Now you can use solutionManager to interact with the solution's data.
} catch (error) {
    // Handle errors (e.g., invalid token, invalid ID, network issues)
    console.error('Failed to connect to MapsIndoors SDK instance:', error);
}

Like open(), this method also returns a SolutionManager promise.

Important: You only need to use either open() or connect() to get your SolutionManager. The subsequent examples in this README assume you have obtained a solutionManager variable using one of these two methods.

List Available Location Types

const locationTypes = solutionManager.locationTypes;

for(const [key, type] of locationTypes) {
    // Find the translation object that matches the solution's default language
    const translation = type.translations.find(translation => translation.language === solutionManager.defaultLanguage);

    console.log(`Location Type: ${key} - ${translation?.name}`);
}

Update a Location's Type

const locationEditor = await solutionManager.getLocation('LOCATION_ID');

await locationEditor
    .setType('LOCATION_TYPE_KEY')
    .save();

Remember to replace 'LOCATION_ID' and 'LOCATION_TYPE_KEY' with your actual values.

Update a Location's Name and Description

Set localized names and descriptions for a specific location across all available languages.

const availableLanguages = solutionManager.availableLanguages;
const locationEditor = await solutionManager.getLocation('LOCATION_ID');

for(const language of availableLanguages) {
    locationEditor
        .setName(language, 'LANGUAGE_SPECIFIC_NAME')
        .setDescription(language, 'LANGUAGE_SPECIFIC_DESCRIPTION');
}

await locationEditor.save();

Remember to replace 'LOCATION_ID', 'LANGUAGE_SPECIFIC_NAME', and 'LANGUAGE_SPECIFIC_DESCRIPTION' with your actual values.

Retrieving a LocationEditor on Click

Set up a click event listener to retrieve a LocationEditor instance for the clicked location. This allows you to interact with the location programmatically.

Note: This example is a continuation of the example found in Method 2: Connecting to an Existing SDK Instance (connect)

let locationEditor = null;

// Get LocationEditor when a MapsIndoors location is clicked
mapsIndoorsInstance.on('click', async (e) => {
    if (!e?.id) {
        locationEditor = null;
        return;
    }

    try {
        locationEditor = await solutionManager.getLocation(e.id);
        console.log(`LocationEditor retrieved for ID: ${e.id}`);
    } catch (error) {
        console.error(`Failed to get LocationEditor for ID ${e.id}:`, error);
        locationEditor = null;
    }
});

Move a Location to Specific Coordinates

Move a location to a new latitude and longitude.

const locationEditor = await solutionManager.getLocation('LOCATION_ID');

locationEditor.moveTo({ lat: 55.6761, lng: 12.5683 });

await locationEditor.save();

Remember to replace 'LOCATION_ID' with your actual value.

Example: Interacting with a Single Location through the SDK

This example demonstrates how to interact with a single location using the SolutionManager obtained from an existing SDK connection. It enables you to make a location draggable on the map, allowing for interactive movement.

Note: This example is a continuation of the example found in Method 2: Connecting to an Existing SDK Instance (connect)

let locationEditor = null;

mapsIndoorsInstance.on('click', async (e) => {
    if (!e?.id) {
        locationEditor = null;
        return;
    }

    try {
        locationEditor = await solutionManager.getLocation(e.id);
    } catch (error) {
        locationEditor = null;
    }
});

window.addEventListener('keydown', handleKeyDown);
window.addEventListener('keyup', handleKeyUp);

function handleKeyDown(e) {
    if(e.key !== 'd') {
        return;
    }
    
    if(!locationEditor) {
        return;
    }

    locationEditor.draggable = true;
}

function handleKeyUp(e) {
    if(e.key !== 'd') {
        return;
    }
    
    if(!locationEditor) {
        return;
    }
    
    locationEditor.draggable = false;
}

Remember to call await locationEditor.save(); to persist the changes.

Move a Location by Distance and Direction

Move a location a given distance (meters) in a specific direction (degrees), where the direction is measured clockwise from true north.

const locationEditor = await solutionManager.getLocation('LOCATION_ID');

// Move 10 meters in 45 degrees
locationEditor.move(10, 45); 

await locationEditor.save();

Remember to replace 'LOCATION_ID' with your actual value.

Rotate a Location

Rotate a location by a specified angle in degrees, measured clockwise from true north.

const locationEditor = await solutionManager.getLocation('LOCATION_ID');

locationEditor.rotate(90); // Rotate 90 degrees

await locationEditor.save();

Remember to replace 'LOCATION_ID' with your actual value.

Resetting Location Changes

The reset method in the LocationEditor class allows you to revert any changes made to a location back to its original state or the last saved state. This is useful when you want to discard any modifications and restore the location to its previous state, including its position and rotation.

To reset the changes made to a location, simply call the reset method on the LocationEditor instance. This will revert the location data to its original state and dispatch a change event to notify any listeners about the reset.

const locationEditor = await solutionManager.getLocation('LOCATION_ID');

// Set the name, description, position, and rotation for the location
locationEditor
    .setName('en', 'New Name')
    .setDescription('en', 'New Description')
    .moveTo({ lat: 55.6761, lng: 12.5683 })
    .rotate(90);

// Save the changes
await locationEditor.save();

// Make further changes
locationEditor
    .setName('en', 'Another Name')
    .setDescription('en', 'Another Description')
    .moveTo({ lat: 55.6762, lng: 12.5684 })
    .rotate(180);

// Reset the changes to the last saved state
locationEditor.reset();

Remember to replace 'LOCATION_ID' with your actual value.

In MapsIndoors, a is the starting point for working with your organization's MapsIndoors data. Before opening a specific solution by its ID, you might need to find out which solutions are available.

The minimum supported MapsIndoors SDK version is v4.39.1. For more information about the MapsIndoors SDK, see the .

The SolutionManager.locationTypes property provides a list of configured within the current solution. This list can be used to populate a select list or dropdown menu in your application's user interface, allowing users to easily select valid location types when modifying locations. The names are displayed in the solution's default language.

Change the type of an existing using a location type key obtained from the SolutionManager.locationTypes list.

This example assumes you have a working MapsIndoors Web SDK integration. If you're new to the SDK, please refer to the for setup and basic usage instructions.

This example assumes you have a working MapsIndoors Web SDK integration. If you're new to the SDK, please refer to the for setup and basic usage instructions.

Application authentication
MapsIndoors data model
https://npmjs.org/
https://yarnpkg.com/
Solution
MapsIndoors SDK documentation
Location Types
Location
MapsIndoors Web SDK Tutorial
MapsIndoors Web SDK Tutorial