JavaScript API

Mapplic map data is stored as JSON, or optionally, location data can be stored as CSV. It’s therefore possible to dynamically generate and serve JSON or CSV data, establishing a connection between Mapplic and third-party applications.

Once embedded, a map can be controlled and observed at runtime through its store — the object that holds the map’s data and state and exposes the methods below.

Embedding the map

A map is embedded with the <mapplic-map> web component plus the Mapplic script. Assign an id (or class) so the element can be targeted from JavaScript — here the id is my-map.

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

The element is configured through data-* attributes:

Using the store

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

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}.`);
	});
});

Store properties

The most useful state fields:

Methods

Locations

Layers

Language and theme

Wayfinding

Filters

Interface

Position

Demo