Basic Map Initialization

This tutorial demonstrates how to instantiate the MapEngine class with standard and premium styles, and clean it up on teardown.

---

Initializing MapEngine

MapEngine is the core convenience wrapper around the SDK's Map instance (mapEngine.map is a real Map). Initialize it with a container and, optionally, a center and zoom:

import { MapEngine } from '@sovereignsolutions/ss-map-gl';

// Standard Basic style, defaults to New Delhi, India
const mapEngine = new MapEngine({
  container: 'map',
  center: [78.9629, 20.5937],
  zoom: 5,
});

The 'BASIC' default style needs no apiKey. To use one of the predefined premium styles (or an SS tile server URL), see Basemap Styles.

---

MapEngine Options Reference

MapEngine (and Map, which it wraps) accept every standard map option, plus these SDK-specific additions:

Option	Type	Required	Default	Description
container	HTMLElement | string	Yes	-	HTML DOM element or element ID for the map canvas.
center	[number, number]	No	[77.2090, 28.6139] (New Delhi, India)	Initial center coordinates formatted as [longitude, latitude].
zoom	number	No	10	Initial zoom level.
style	string | object	No	'BASIC'	A predefined SS style name, an SS tile server URL, a full style specification object, or any other style URL.
apiKey	string	Conditional	-	Required when style is one of the predefined SS styles or an SS tile server URL.

Attribution

Every map shows "© Sovereign Solutions" attribution by default (alongside any style-source attribution). Pass attributionControl: false to remove it, or your own customAttribution to extend it.

---

Resource Cleanup

Always invoke .destroy() when your component unmounts or before re-instantiating the map to prevent WebGL context memory leaks. Source: Cleanup & Unmount Behavior in the SDK README.

mapEngine.destroy();

---

See also: Get Started, Basemap Styles.