API reference

Mapplic map data is stored as JSON, or optionally, location data can be stored as CSV.

Therefore, it's possible to dynamically generate and serve JSON or CSV data, establishing a connection between Mapplic and third-party applications.

Interaction

Interacting with a map instance can extend the basic functionality and allow customizations. You can communicate with a rendered map component using JavaScript.

Targeting the element

Begin by assigning an id (or class) attribute for effective targeting of the <mapplic-map> element in the embed code. In the below example, the assigned id is my-map.

Embed code

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

mapReady event

Attach a mapReady event listener to this map element, which will trigger once the map has been successfully initialized. To prevent errors, ensure that all API operations occur after the mapReady event has fired.

mapReady event listener

const map = document.getElementById('my-map');
 
map.addEventListener('mapReady', e => {
	// map initialized
});

Using the store

The store is an object that allows you to access properties, invoke methods, or subscribe to changes.

mapReady event listener

const map = document.getElementById('my-map');
 
map.addEventListener('mapReady', e => {
	const store = map.store;
 
	// do something when layer is switched
	store.subscribe(state => state.layer, (layer, prev) => {
		console.log(`Layer switched from ${prev} to ${layer}.`);
	});
 
	// access the state (button1 clicked)
	document.getElementById('button1').addEventListener('click', () => {
		console.log(`Focused location: ${store.getState().location}`);
	});
 
	// call method (button2 clicked)
	document.getElementById('button2').addEventListener('click', () => {
		store.getState().openLocation('s125');
	});
});

Methods

Listed below are the most common methods:

openLocation([id]) - Directs focus to the location identified by its unique location ID.
closeLocation() - Unfocus location.
switchLayer(id) - Switches to a layer using its unique layer ID.
getLocationById([id]) - Retrieve a location object using its unique ID. If no parameter is set, it returns the object of the focused location. |
toggleSidebar([true/false]) - Toggle or open/close sidebar (based on parameter).
toggleFilters([true/false]) - Toggle or open/close filters (based on parameter).

Demo

SVG map Tutorials