Map SDK

A simple JavaScript SDK for interactive maps with heatmap visualization.

Installation

npm install

Quick Start

const mapSDK = new MapSDK();
mapSDK.init({
    container: "map",
    accessToken: "YOUR_MAPBOX_TOKEN",
    center: [-74.006, 40.7128],
    zoom: 10,
    style: "streets",
});

// Add markers
mapSDK.addMarkers([
    {lat: 40.7128, lng: -74.006, label: "NYC", weight: 5},
    {lat: 40.7589, lng: -73.9851, label: "Times Square", weight: 4},
]);

// Toggle heatmap view
mapSDK.toggleHeatmap();

API Reference

Core Methods

init(options) - Initialize the map

• container - DOM element ID for the map
• accessToken - Mapbox access token
• center - [longitude, latitude] coordinates
• zoom - Initial zoom level (default: 2)
• style - Map style: 'streets' or 'satellite' (default: 'streets')

addMarkers(markers) - Add markers to the map

• markers - Array of marker objects: {lat, lng, label, weight}

removeMarker(id) - Remove a specific marker

clearMarkers() - Remove all markers

setStyle(style) - Change map style ('streets' or 'satellite')

flyTo(options) - Fly to location

• center - [longitude, latitude] coordinates
• zoom - Target zoom level
• duration - Animation duration in milliseconds

Creative Feature

toggleHeatmap() - Switch between markers and heatmap visualization

generateSampleData(count) - Generate sample data points for testing

Running the Demo

1. Start a local server:

   python3 -m http.server 3000

2. Open http://localhost:3000/example.html

Testing

Run tests:

node test.js