Mapplic

https://docs.mapplic.com/
Admin
Mapplic is a dynamic, interactive map software used to build fully-customized vector or image-based...
Tokens:11,153
Snippets:210
Trust Score:8.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Example URL with Deeplinking

Source: https://docs.mapplic.com/concepts/deeplinking

A sample URL demonstrating how location and group parameters are appended to the map page.

```text
https://your-site.com/map?location=cafeteria&group=food
```

--------------------------------

### Interface

Source: https://docs.mapplic.com/reference/api-reference

Methods to control UI elements like the directory and media popups.

```APIDOC
## toggleDirectory(turn)
Show or hide the directory (toggles when `turn` is omitted).

## setEnlargedMedia(index)
Open the popup media at `index` full-size, or `false` to close.

## setHovered(id)
Set the hovered location (`false` to clear).
```

--------------------------------

### Enable Wayfinding Deeplinking

Source: https://docs.mapplic.com/concepts/deeplinking

Configuration setting to include wayfinding parameters in the URL synchronization.

```javascript
deeplinking: ['location', 'group', 'wayfinding']
```

--------------------------------

### Wayfinding

Source: https://docs.mapplic.com/reference/api-reference

Methods to manage route origin, destination, and panel visibility.

```APIDOC
## setFrom(id)
Set the route origin (or `null` to clear).

## setTo(id)
Set the route destination (or `null` to clear).

## setAny(id)
Set the destination if empty, otherwise the origin; opens the wayfinding panel.

## setFixedFrom(id)
Lock a fixed route origin (or `null` to clear).

## setRoutesOpened(value)
Show or hide the wayfinding panel.
```

--------------------------------

### Language and Theme

Source: https://docs.mapplic.com/reference/api-reference

Methods to configure language and visual theme.

```APIDOC
## setLang(code)
Switch language. The code must exist in `data.languages`.

## setTheme(theme)
Set the color theme: `'light'` or `'dark'`.
```

--------------------------------

### Wait for the map to be ready

Source: https://docs.mapplic.com/tutorials/google-analytics

Attach a listener to the map element to access the store once the map is initialized.

```javascript
const map = document.getElementById('my-map');
 
map.addEventListener('mapReady', () => {
	const store = map.store;
	// event registration goes here
});
```

--------------------------------

### Pin a specific library version

Source: https://docs.mapplic.com/account/publishing

Point the script source to a versioned path to prevent automatic updates.

```html
<script type="text/javascript" id="mapplic-script" src="https://mapplic.com/v/8.8.1/mapplic.js"></script>
```

--------------------------------

### Define dropdown and toggle group options

Source: https://docs.mapplic.com/editor/filters

Format filter options using semicolons to separate items and colons to separate values from display text.

```text
:(Select floor);first:First floor;ground:Ground floor;underground:Underground
```

--------------------------------

### Layers

Source: https://docs.mapplic.com/reference/api-reference

Method to switch map layers.

```APIDOC
## switchLayer(id)
Switch to the layer with the given id.
```

--------------------------------

### Filters

Source: https://docs.mapplic.com/reference/api-reference

Methods to manage search, group, and instance filters.

```APIDOC
## setSearchFilter(text)
Set the search query.

## setAlphabeticFilter(letter)
Filter locations by their initial letter.

## setGroupFilter(group, enable, single)
Toggle a group/tag filter. `single` keeps only one group active.

## setInstanceFilter(id, value)
Set the value of a custom filter by id.

## clearFilters()
Reset all filters.

## toggleFilters(turn)
Show or hide the filters panel (toggles when `turn` is omitted).
```

--------------------------------

### Render location properties in descriptions

Source: https://docs.mapplic.com/editor/locations

Use double curly brackets to inject location attributes like title, phone, or email into the description field.

```text
Welcome to our office in {{title}}.
Feel free to reach out.
Phone: {{phone}} 
Email: {{email}}
```

--------------------------------

### Listen for mapReady event

Source: https://docs.mapplic.com/reference/api-reference

Attach an event listener to the map element to ensure API operations occur only after initialization.

```javascript
const map = document.getElementById('my-map');
 
map.addEventListener('mapReady', e => {
	const store = map.store; // also available as e.detail.store
});
```

--------------------------------

### Access and interact with the map store

Source: https://docs.mapplic.com/reference/api-reference

Read state, invoke methods, and subscribe to state changes using the map store object.

```javascript
map.addEventListener('mapReady', e => {
	const store = map.store;
 
	// read state
	console.log(store.getState().location);
 
	// call a method
	store.getState().openLocation('s125');
 
	// react to layer changes
	store.subscribe(state => state.layer, (layer, prev) => {
		console.log(`Layer switched from ${prev} to ${layer}.`);
	});
});
```

--------------------------------

### Define location hours syntax

Source: https://docs.mapplic.com/editor/opening-hours

Use this format in the location's Hours field to define weekly operating times.

```text
Mo-Fr 09:00-17:30; Sa 10:00-14:00; off Su
```

--------------------------------

### registerEventListener(callback)

Source: https://docs.mapplic.com/reference/api-reference

Registers a callback function to receive event notifications from the map store. The callback receives the event name and a payload object.

```APIDOC
## registerEventListener(callback)

### Description
Registers a callback function to listen for map interaction events. This method should be called after the 'mapReady' event.

### Parameters
- **callback** (function) - Required - A function that receives two arguments: `name` (string) and `data` (object).

### Usage Example
```javascript
const listener = (name, data) => {
	console.log(`Event: ${name}`, data);
};
store.getState().registerEventListener(listener);
```
```

--------------------------------

### Registering map event listeners

Source: https://docs.mapplic.com/reference/api-reference

Use registerEventListener to capture map interactions. Ensure the listener is registered after the mapReady event fires.

```javascript
map.addEventListener('mapReady', () => {
	const store = map.store;
 
	const listener = (name, data) => {
		console.log(`Event: ${name}`, data);
	};
 
	store.getState().registerEventListener(listener);
	// later, to stop listening:
	// store.getState().unregisterEventListener(listener);
});
```

--------------------------------

### HTML representation of dropdown options

Source: https://docs.mapplic.com/editor/filters

The rendered HTML structure resulting from the defined filter options.

```html
<select>
  <option value="">(Select floor)</option>
  <option value="first">First floor</option>
  <option value="ground">Ground floor</option>
  <option value="underground">Underground</option>
</select>
```

--------------------------------

### Locations

Source: https://docs.mapplic.com/reference/api-reference

Methods to manage location focus and updates.

```APIDOC
## openLocation(id, duration)
Focus a location and animate to it. Omit `id` to reuse the focused one; `duration` sets the animation length in seconds.

## closeLocation(reset)
Close the focused location. Pass `true` to also reset the view.

## updateLocation(id, changes)
Merge `changes` into the location with the given id.
```

--------------------------------

### Custom CSS for Mapplic Elements

Source: https://docs.mapplic.com/editor/appearance

Apply these styles to modify the container background, tooltip borders, and tooltip typography.

```css
/* changing container background color */
.mapplic-container { background-color: #f0ede7; }
 
/* removing border radius from tooltip */
.mapplic-tooltip { border-radius: 0; }
 
/* increasing font size of title in tooltips */
.mapplic-tooltip h4 { font-size: 24px; }
```

--------------------------------

### Position

Source: https://docs.mapplic.com/reference/api-reference

Methods to manipulate the viewport position and zoom.

```APIDOC
## setPos({ x, y, scale })
Set the viewport position directly.

## setTarget({ x, y, scale })
Animate the viewport toward a target position.
```

--------------------------------

### Forward map events to Google Analytics

Source: https://docs.mapplic.com/tutorials/google-analytics

Register an event listener on the store to forward map events to GA4 using the gtag function.

```javascript
map.addEventListener('mapReady', () => {
	map.store.getState().registerEventListener((name, data) => {
		gtag('event', `mapplic_${name}`, data);
	});
});
```

--------------------------------

### subscribe(selector, callback)

Source: https://docs.mapplic.com/reference/api-reference

Subscribes to changes in specific parts of the map state.

```APIDOC
## store.subscribe(selector, callback)

### Description
Registers a listener that triggers when a specific piece of the state changes.

### Parameters
- **selector** (function) - Required - A function that selects the state property to watch.
- **callback** (function) - Required - A function executed when the selected state changes, receiving (currentValue, previousValue).

### Usage
```javascript
store.subscribe(state => state.layer, (layer, prev) => {
	console.log(`Layer switched from ${prev} to ${layer}.`);
});
```
```

--------------------------------

### openLocation(id)

Source: https://docs.mapplic.com/reference/api-reference

Programmatically opens a specific location on the map by its ID.

```APIDOC
## store.openLocation(id)

### Description
Opens a location on the map based on the provided location ID.

### Parameters
- **id** (string) - Required - The unique identifier of the location to open.

### Usage
```javascript
store.openLocation('s125');
```
```

--------------------------------

### getState()

Source: https://docs.mapplic.com/reference/api-reference

Retrieves the current state object of the map, containing properties such as the active location.

```APIDOC
## store.getState()

### Description
Returns the current state of the map, including properties like the active location.

### Usage
```javascript
const state = store.getState();
console.log(state.location);
```
```

--------------------------------

### Style a breakpoint via CSS class

Source: https://docs.mapplic.com/reference/data-schema

Use the breakpoint name as a CSS class to apply custom styles, such as hiding elements on specific screen sizes.

```css
.mobile .mapplic-layer-switcher {
    display: none;
}
```

--------------------------------

### Embed Mapplic Map via Shortcode

Source: https://docs.mapplic.com/get-started/wordpress-plugin

Use this shortcode in the WordPress editor to display a specific map. Replace MAP_ID with the actual post ID found in the map builder.

```text
[mapplic-map id="MAP_ID"]
```

--------------------------------

### Embed a Mapplic map

Source: https://docs.mapplic.com/account/publishing

Use this custom element and script tag to render a map on your website.

```html
<mapplic-map data-json="https://mapplic.com/getMapData?id=YOUR_MAP_ID"><script type="text/javascript" id="mapplic-script" src="https://mapplic.com/mapplic.js"></script></mapplic-map>
```

--------------------------------

### Define filter conditions with JavaScript

Source: https://docs.mapplic.com/editor/filters

Use JavaScript expressions to filter locations. The variable 'l' represents the location object, and 'value' represents the selected filter value.

```javascript
// locations with a 'phone' field defined
l.phone
 
// locations with a non-hidden 'type'
l.type !== 'hidden'
 
// locations with a 'title' longer than 10 characters
l.title.length > 10
 
// locations whose 'country' custom field matches the selected value
l.country === value
```

--------------------------------

### Embed Mapplic map in website

Source: https://docs.mapplic.com/get-started/cloud-hosting

Use this HTML snippet to embed a configured Mapplic map into your website after subscribing to a map slot.

```html
<mapplic-map data-json="https://mapplic.com/getMapData?id=3eF14m9kDyeBqYI2MRF3">
  <script type="text/javascript" id="mapplic-script" src="https://mapplic.com/mapplic.js">
  </script>
</mapplic-map>
```

--------------------------------

### Apply Custom CSS to Active State

Source: https://docs.mapplic.com/editor/locations

Use the style class as a CSS hook to modify the appearance of elements in the active state.

```css
.my-style-class.mapplic-active {
    stroke-dasharray: 2 2;
}
```

--------------------------------

### Embed the map with an ID

Source: https://docs.mapplic.com/tutorials/google-analytics

Embed the Mapplic map component with a specific ID to allow JavaScript targeting.

```html
<mapplic-map
	id="my-map"
	data-json="https://mapplic.com/getMapData?id=6AAA3HVY6u05TYjJvG42"
><script type="text/javascript" id="mapplic-script" src="https://mapplic.com/mapplic.js"></script></mapplic-map>
```

--------------------------------

### unregisterEventListener(callback)

Source: https://docs.mapplic.com/reference/api-reference

Removes a previously registered event listener from the map store.

```APIDOC
## unregisterEventListener(callback)

### Description
Stops listening for map interaction events by removing the specified callback function.

### Parameters
- **callback** (function) - Required - The reference to the function previously passed to `registerEventListener`.
```
Tokens:
Raw