SDK Reference

Class: ShareMap

Class ShareMap

The ShareMap class is the core component of the sharemap-maplib-js library. It represents a map on the page and provides a comprehensive API to control the map's view, style, layers, and interactivity. Behind the scenes, it utilizes WebGL to render high-performance, interactive maps from vector tiles.

Initialization

Initialize or use the ShareMap via the snippet below.

javascript

// Initialize a new high-performance map instance
import { Map, NavigationControl } from 'sharemap-maplib-js';

const map = new Map({
  container: 'map-container',
  style: 'https://api.sharemap.live/maps/basic/style.json',
  center: [106.660172, 10.762622],
  zoom: 12,
  pitch: 45,
  bearing: -17.6
});

// Add zoom and rotation controls to the map.
map.addControl(new NavigationControl(), 'top-right');

Key Instance Methods

addControl(control: IControl, position?: string): this

this

Adds an IControl instance (like NavigationControl, ScaleControl, etc.) to the map at the specified position.

addLayer(layer: AnyLayer, beforeId?: string): this

this

Adds a new Mapbox style layer to the map. If beforeId is provided, the layer is inserted before the specified layer.

addSource(id: string, source: AnySourceData): this

this

Adds a new data source to the map. Layers can then reference this source to render data.

on(type: string, listener: Function): this

this

Subscribes a listener function to events emitted by the map (e.g., click, zoom, moveend, render).

flyTo(options: AnimationOptions, eventData?: Object): this

this

Animates the map view to a new center, zoom, pitch, and bearing with a smooth flight animation.

setCenter(center: LngLatLike, eventData?: Object): this

this

Instantly sets the map's geographical centerpoint without animation.

setZoom(zoom: number, eventData?: Object): this

this

Instantly sets the map's zoom level.

Parameters

container

string | HTMLElement

Required

The HTML element, or its string ID, where the map will be rendered. If this is omitted, the map will not be attached to the DOM automatically.

style

string | Object

Required

The map style URL or a JSON object conforming to the Mapbox Style Specification. ShareMap provides several default styles via api.sharemap.live.

center

LngLatLike

The initial geographical centerpoint of the map in [lng, lat] format.

zoom

number

The initial zoom level of the map, ranging from 0 (entire world) to 22 (street level).

pitch

number

The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85).

bearing

number

The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north.

Live Demo

Performance Tip

For high-traffic applications, ensure you call map.remove() when unmounting components to prevent memory leaks in Single Page Applications (SPAs).