### Example: Tooltip Configuration

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Configure tooltips to show on click and render HTML content.

```javascript
new Mapkick.Map("map", data, {
  tooltips: {
    hover: false,  // click to show
    html: true     // allow HTML
  }
})
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

This snippet outlines the steps to set up the development environment for Mapkick.js. It includes cloning the repository, navigating to the directory, and installing npm dependencies.

```sh
git clone https://github.com/ankane/mapkick.js.git
cd mapkick.js
npm install
npm run build-dev
```

--------------------------------

### NPM Installation for Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Install Mapkick.js using npm. This command installs the package into your project's node_modules directory.

```bash
npm install mapkick
```

--------------------------------

### MapLibre Setup with Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Use MapLibre GL JS for a free, token-less map setup with Mapkick.js. Configure the map style using Mapkick.options.

```html
<link href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/mapkick"></script>

<div id="map" style="height: 400px;"></div>

<script>
  Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
  new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>
```

--------------------------------

### Example: Trail Configuration

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Set a maximum trail length and refresh rate when initializing a Mapkick map.

```javascript
new Mapkick.Map("map", data, {
  trail: {len: 20},
  refresh: 5
})
```

--------------------------------

### NPM Setup with Mapkick.js and Mapbox GL JS

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Import Mapkick and Mapbox GL JS when using NPM. Ensure you set your Mapbox access token.

```javascript
import Mapkick from "mapkick"
import mapboxgl from "mapbox-gl"

Mapkick.use(mapboxgl)
mapboxgl.accessToken = "YOUR-TOKEN"

new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
```

--------------------------------

### Mapbox Setup with Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Include Mapbox GL JS and Mapkick.js in your HTML to set up a map. Remember to replace 'YOUR-TOKEN' with your actual Mapbox access token.

```html
<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapkick"></script>

<div id="map" style="height: 400px;"></div>

<script>
  mapboxgl.accessToken = "YOUR-TOKEN"
  new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>
```

--------------------------------

### Example: Data Source Callback

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Use a callback function with `fetch` to load data from an API, handling both successful responses and errors.

```javascript
new Mapkick.Map("map", function(success, fail) {
  fetch("/api/locations")
    .then(r => r.json())
    .then(success)
    .catch(() => fail("Unable to load data"))
})
```

--------------------------------

### Mapbox Installation

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Include Mapbox GL JS CSS and JavaScript files, along with Mapkick.js, in your HTML head. Set your Mapbox access token.

```html
<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  mapboxgl.accessToken = "YOUR-TOKEN"
</script>
```

--------------------------------

### Implement Live Tracking Map

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Set up a live tracking map with auto-refresh and trail visualization. Provides an example of how to stop the refresh mechanism.

```javascript
const tracking = new Mapkick.Map("tracking-map", "/api/live", {
  refresh: 5,
  trail: {len: 50},
  controls: true
})

// Stop when done
document.getElementById("stop-btn").onclick = function() {
  tracking.stopRefresh()
}
```

--------------------------------

### ReplayFeature Example Data

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example array of ReplayFeature objects representing movement over time. Demonstrates tracking multiple IDs and their respective locations at different times.

```javascript
[
  {
    id: "bus-1",
    latitude: 37.7829,
    longitude: -122.4190,
    time: "2024-01-01T10:00:00Z"
  },
  {
    id: "bus-1",
    latitude: 37.7830,
    longitude: -122.4191,
    time: "2024-01-01T10:01:00Z"
  },
  {
    id: "bus-2",
    latitude: 40.7128,
    longitude: -74.0060,
    time: "2024-01-01T10:00:00Z"
  }
]
```

--------------------------------

### MapLibre Installation

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Include MapLibre GL JS CSS and JavaScript files, along with Mapkick.js, in your HTML head. Configure Mapkick options for MapLibre.

```html
<link href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
</script>
```

--------------------------------

### PointFeature Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example of a PointFeature object with various properties set, including coordinates, label, tooltip, color, and icon.

```javascript
{
  latitude: 37.7829,
  longitude: -122.4190,
  label: "San Francisco",
  tooltip: "Main office",
  color: "#f84d4d",
  icon: "office"
}
```

--------------------------------

### TrailFeature Example Data

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example array of TrailFeature objects representing a path. Demonstrates tracking a single trail ID across multiple points.

```javascript
[
  {id: "vehicle-1", latitude: 37.7829, longitude: -122.4190},
  {id: "vehicle-1", latitude: 37.7830, longitude: -122.4191},
  {id: "vehicle-1", latitude: 37.7831, longitude: -122.4192},
  {id: "vehicle-2", latitude: 40.7128, longitude: -74.0060}
]
```

--------------------------------

### Polygon Geometry Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example of a Polygon geometry object with an outer boundary and an inner hole, demonstrating the coordinate structure.

```javascript
{
  type: "Polygon",
  coordinates: [
    [[-122.4, 37.8], [-122.4, 37.7], [-122.3, 37.7], [-122.3, 37.8], [-122.4, 37.8]],  // outer boundary
    [[-122.35, 37.75], [-122.35, 37.72], [-122.32, 37.72], [-122.32, 37.75], [-122.35, 37.75]]  // hole
  ]
}
```

--------------------------------

### AreaFeature Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example of an AreaFeature object, including a Polygon GeoJSON geometry, label, tooltip, and color.

```javascript
{
  geometry: {
    type: "Polygon",
    coordinates: [[
      [-122.4, 37.8],
      [-122.4, 37.7],
      [-122.3, 37.7],
      [-122.3, 37.8],
      [-122.4, 37.8]
    ]]
  },
  label: "Downtown District",
  tooltip: "Central business zone",
  color: "#0090ff"
}
```

--------------------------------

### Creating a Map with Instance Overrides

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Instantiate a new Mapkick map, overriding global options with instance-specific ones. This example shows how an instance's zoom level takes precedence.

```javascript
new Mapkick.Map("map", data, {
  zoom: 15  // overrides zoom: 13 from global options
})
```

--------------------------------

### Example: Custom Marker Color

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Set a custom marker color when initializing a Mapkick map.

```javascript
new Mapkick.Map("map", data, {
  markers: {color: "#3498db"}
})
```

--------------------------------

### Configuring Trail Visualization

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Enable and configure trail visualization to display the movement history of objects on the map. This example limits the trail to the last 20 points per vehicle.

```javascript
new Mapkick.Map("map", "/api/vehicles", {
  trail: {len: 20},  // keep last 20 points per vehicle
  refresh: 5
})
```

--------------------------------

### MultiPolygon Geometry Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

An example of a MultiPolygon geometry object containing two distinct polygons, illustrating the nested coordinate structure.

```javascript
{
  type: "MultiPolygon",
  coordinates: [
    [[[-122.4, 37.8], [-122.4, 37.7], [-122.3, 37.7], [-122.3, 37.8], [-122.4, 37.8]]],  // polygon 1
    [[[-122.2, 37.8], [-122.2, 37.7], [-122.1, 37.7], [-122.1, 37.8], [-122.2, 37.8]]]   // polygon 2
  ]
}
```

--------------------------------

### Callback Error Handling with XMLHttpRequest

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

This example shows how to manage errors using the XMLHttpRequest object within a Mapkick.js callback. It covers network errors, server errors (based on status codes), and issues with JSON parsing, all of which are reported using the `fail()` function.

```javascript
new Mapkick.Map("map", function(success, fail) {
  const request = new XMLHttpRequest()
  request.open("GET", "/api/locations")
  request.onload = function() {
    if (request.status === 200) {
      try {
        success(JSON.parse(request.responseText))
      } catch (err) {
        fail("Invalid JSON response")
      }
    } else {
      fail("Server error: " + request.statusText)
    }
  }
  request.onerror = function() {
    fail("Network error")
  }
  request.send()
})
```

--------------------------------

### Open README.md

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/DELIVERY_SUMMARY.md

Use this command to open the main README.md file for the project.

```bash
Open: /workspace/home/output/README.md
```

--------------------------------

### Quick Navigation with INDEX.md

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/DELIVERY_SUMMARY.md

Utilize INDEX.md for efficient navigation through the documentation by task type, API component, data type, configuration option, or error message.

```bash
Use INDEX.md for quick navigation by:
- Task type
- API component
- Data type
- Configuration option
- Error message
```

--------------------------------

### Initialize Map for Replaying Data

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Use this snippet to create a map that can replay historical data. Set the 'replay' option to true and provide the data source.

```javascript
new Mapkick.Map("map", data, {replay: true})
```

--------------------------------

### Initialize Map with Live Updates

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Use this snippet to create a map that refreshes data from a remote source periodically. Specify the refresh interval in seconds.

```javascript
new Mapkick.Map("map", url, {refresh: 10}) // seconds
```

--------------------------------

### Initialize Map with URL Data

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Provide a URL that returns JSON data in the expected format to initialize the map.

```javascript
new Mapkick.Map("map", "/restaurants")
```

--------------------------------

### Create Map with Custom Styling

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Initialize a new map with custom Mapbox style, zoom level, controls, marker color, and tooltip behavior.

```javascript
new Mapkick.Map("map", data, {
  style: "mapbox://styles/mapbox/dark-v11",
  zoom: 13,
  controls: true,
  markers: {color: "#e74c3c"},
  tooltips: {hover: true}
})
```

--------------------------------

### Initialize Map with Callback Data

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Use a callback function to fetch and provide data to the map. The callback should accept success and fail arguments.

```javascript
function fetchData(success, fail) {
  success([{latitude: 37.7829, longitude: -122.4190}])
  // or fail("Data not available")
}

new Mapkick.Map("map", fetchData)
```

--------------------------------

### Mapkick.js Missing Latitude Error Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Illustrates data that triggers a 'missing latitude' error. Use any latitude alias (latitude, lat) for correct data.

```javascript
// Error at index 1
new Mapkick.Map("map", [
  {latitude: 37.7829, longitude: -122.4190},
  {longitude: -122.4190}  // missing latitude
])

// Correct: use any alias
[
  {latitude: 37.7829, longitude: -122.4190},
  {lat: 37.8000, longitude: -122.4200},
  {latitude: 37.9000, lng: -122.4300}
]
```

--------------------------------

### Basic Map with Points using Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Create a basic map with multiple points. Each point can have a label and a tooltip that appears on hover.

```javascript
new Mapkick.Map("map", [
  {
    latitude: 37.7829,
    longitude: -122.4190,
    label: "San Francisco",
    tooltip: "Headquarters"
  },
  {
    latitude: 40.7128,
    longitude: -74.0060,
    label: "New York",
    tooltip: "East Coast Office"
  }
])
```

--------------------------------

### Get Underlying Map Object

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-areamap.md

Retrieves the Mapbox GL or MapLibre GL map instance. Use this for advanced customization beyond Mapkick's API.

```javascript
getMapObject()
```

```javascript
const areaMap = new Mapkick.AreaMap("map", data)
const glMap = areaMap.getMapObject()
glmMap.setPaintProperty("objects", "fill-opacity", 0.5)
```

--------------------------------

### API Development Reference

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/DELIVERY_SUMMARY.md

Reference specific documentation files for API development, including class/method signatures, data structures, configuration options, and error handling.

```bash
Reference:
- api-reference-*.md for class/method signatures
- types.md for data structures
- configuration.md for all options
- errors.md for error handling
```

--------------------------------

### Mapkick.js Missing Longitude Error Example

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Illustrates data that triggers a 'missing longitude' error. Use any longitude alias (longitude, lon, lng) for correct data.

```javascript
// Error at index 0
new Mapkick.Map("map", [
  {latitude: 37.7829}  // missing longitude
])

// Correct: use any alias
[
  {latitude: 37.7829, longitude: -122.4190},
  {lat: 37.8000, lon: -122.4200},
  {latitude: 37.9000, lng: -122.4300}
]
```

--------------------------------

### Create a Simple Map

Source: https://github.com/ankane/mapkick.js/blob/master/examples/index.html

Instantiate a basic map with a single data point. Ensure the target element ID exists in your HTML.

```javascript
new Mapkick.Map("simple", [{latitude: 37.7829, longitude: -122.4190, tooltip: "<b>Hello</b>"}]);
```

--------------------------------

### Valid Color Formats in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Examples of valid color formats accepted by Mapkick.js, including 3-digit and 6-digit hex codes, and standard CSS color names.

```javascript
// Valid hex colors
{color: "#f84d4d"}         // 6-digit
{color: "#f8d"}            // 3-digit shorthand
{color: "#F84D4D"}         // uppercase OK

// Valid CSS color names
{color: "red"}
{color: "darkblue"}
{color: "transparent"}
```

--------------------------------

### Map Constructor

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-map.md

Initializes a new Mapkick.Map instance. This is the primary way to create and render a map on your webpage.

```APIDOC
## Map Constructor

### Description
Initializes a new Mapkick.Map instance.

### Signature
```javascript
new Mapkick.Map(element, data, options)
```

### Parameters
#### Path Parameters
- **element** (string | HTMLElement) - Required - DOM element ID or reference where the map will be rendered
- **data** (array | string | function) - Required - Map data: array of point objects, URL returning JSON, or callback function
- **options** (object) - Optional - Configuration object for the map instance

### Return Type
Returns a `Map` instance with methods to interact with the map.

### Throws
- **Error** "No element with id {elementId}" — if element is a string ID but no DOM element with that ID exists
- **Error** "No mapping library found" — if neither Mapbox GL JS nor MapLibre GL JS is loaded
- **Error** "Invalid color" — if marker color is not a valid hex color (#RGB or #RRGGBB) or CSS color name
- **Error** "missing latitude (index: {i})" — if latitude is missing from a point at the specified index
- **Error** "missing longitude (index: {i})" — if longitude is missing from a point at the specified index

### Examples
```javascript
// Basic point map
new Mapkick.Map("map", [
  {latitude: 37.7829, longitude: -122.4190},
  {latitude: 40.7128, longitude: -74.0060}
])

// Map with custom styling
new Mapkick.Map("map", [
  {
    latitude: 37.7829,
    longitude: -122.4190,
    label: "San Francisco",
    tooltip: "5-star restaurant",
    color: "#f84d4d",
    icon: "restaurant"
  }
], {
  style: "mapbox://styles/mapbox/dark-v11",
  zoom: 12,
  controls: true
})

// Map from URL
new Mapkick.Map("map", "/api/locations")

// Map from callback
new Mapkick.Map("map", function(success, fail) {
  fetch("/api/locations")
    .then(r => r.json())
    .then(success)
    .catch(() => fail("Unable to fetch locations"))
})

// Live-updating map with trails
new Mapkick.Map("map", "/api/vehicles", {
  refresh: 10,
  trail: {len: 20}
})

// Replay historical data
new Mapkick.Map("map", [
  {id: "bus-1", lat: 37.7829, lon: -122.4190, time: "2024-01-01T10:00:00Z"},
  {id: "bus-1", lat: 37.7830, lon: -122.4191, time: "2024-01-01T10:01:00Z"}
], {replay: true})
```
```

--------------------------------

### Map Constructor

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Initializes a new Map object. This is the primary way to create a map instance.

```APIDOC
## Map(element, data, options)

### Description
Initializes a new Map object.

### Parameters
- **element** (HTMLElement | string) - The DOM element or its ID where the map will be rendered.
- **data** (Array<Object>) - The data to be displayed on the map.
- **options** (Object) - Configuration options for the map.
```

--------------------------------

### Get Map Object

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-map.md

Retrieves the underlying Mapbox GL or MapLibre GL map instance for advanced customization. Use this to apply custom filters or interactions not directly supported by Mapkick.

```javascript
getMapObject()
```

```javascript
const mapkickMap = new Mapkick.Map("map", data)
const glMap = mapkickMap.getMapObject()
glMap.setFilter("layer-name", ["==", "type", "restaurant"])
```

--------------------------------

### Configure Zoom and Controls Option

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Adjust the initial zoom level and enable map controls.

```javascript
new Mapkick.Map("map", data, {zoom: 15, controls: true})

```

--------------------------------

### Handling Invalid Color Errors in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

A strategy for validating color formats before creating a Mapkick.js map. This example includes a helper function for validation and a try-catch block to handle the 'Invalid color' error.

```javascript
function validateColorFormat(color) {
  const hexPattern = /^#([0-9a-f]{3}){1,2}$/i
  const namedPattern = /^[a-z]+$/i
  return hexPattern.test(color) || namedPattern.test(color)
}

try {
  const data = [
    {lat: 37.7829, lon: -122.4190, color: userProvidedColor}
  ]
  new Mapkick.Map("map", data)
} catch (err) {
  if (err.message === "Invalid color") {
    console.error("Invalid color format:", userProvidedColor)
  }
}
```

--------------------------------

### Invalid Color Formats in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

These examples demonstrate color formats that will trigger the 'Invalid color' error in Mapkick.js. Ensure colors are in valid hex (#RGB or #RRGGBB) or CSS color name formats.

```javascript
{color: "f84d4d"}          // missing #
{color: "#fff"}            // only 3 digits (must be 3 or 6)
{color: "#ff00ff00"}       // 8 digits with alpha
{color: "rgb(255,0,0)"}    // rgb function format
{color: "red-ish"}         // not a valid CSS color name
```

```javascript
// Globally
Mapkick.options = {
  markers: {color: "not-a-color"}
}
```

--------------------------------

### Initialize Map with Trails

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Enable trail visualization on the map by setting the 'trail' option to true. This snippet also includes periodic data refresh.

```javascript
new Mapkick.Map("map", url, {trail: true, refresh: 10})
```

--------------------------------

### Create a Basic Map

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Initialize a new Mapkick map by providing the ID of the HTML element where the map should be rendered and an array of geographical points.

```html
<div id="map" style="height: 400px;"></div>

<script>
  new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>
```

--------------------------------

### Global Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Global default options that can be set before initializing any maps.

```APIDOC
## `Mapkick.options`

### Description
Sets global default options for all maps.

### Example
```javascript
Mapkick.options = {
  style: "mapbox://styles/mapbox/streets-v12",
  controls: true
}
```
```

--------------------------------

### Initialize Dashboard Maps

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Create multiple maps and area maps on a single page. Remember to call `.destroy()` on each map instance when it's no longer needed to prevent memory leaks.

```javascript
const locations = new Mapkick.Map("locations-map", "/api/locations")
const regions = new Mapkick.AreaMap("regions-map", "/api/regions")

// Later, cleanup
locations.destroy()
regions.destroy()
```

--------------------------------

### Create a Point-Based Map

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Instantiate a new point-based map using the Map constructor. Requires a container element ID, data, and optional configuration.

```javascript
new Mapkick.Map("map", data, options)
```

--------------------------------

### Create an Empty Map

Source: https://github.com/ankane/mapkick.js/blob/master/examples/index.html

Initialize a map with no data points. This is useful for setting up a map container that will be populated later.

```javascript
new Mapkick.Map("empty", []);
```

--------------------------------

### Replay Map Configuration

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/configuration.md

Initialize a Mapkick map instance with replay functionality enabled and a specific Mapbox style. This configuration is applied directly during map instantiation.

```javascript
new Mapkick.Map("map", historicalData, {
  replay: true,
  style: "mapbox://styles/mapbox/streets-v12"
})
```

--------------------------------

### Include Mapkick.js via CDN (Bundle)

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Use this script tag to include the full Mapkick.js bundle, which includes Mapbox GL JS, for quick integration into your HTML.

```html
<script src="https://unpkg.com/mapkick@0.2.6/dist/mapkick.bundle.js"></script>
```

--------------------------------

### Create a Point Map

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Instantiate a Mapkick point map by specifying the target HTML element ID and an array of latitude/longitude coordinates.

```javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
```

--------------------------------

### Configure Mapkick with Mapbox Global Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Set global Mapbox access token and Mapkick options for style, controls, and markers. All subsequent maps will inherit these settings.

```javascript
// Set Mapbox access token (usually done globally)
mapboxgl.accessToken = "YOUR-TOKEN"

// Configure Mapkick options
Mapkick.options = {
  style: "mapbox://styles/mapbox/streets-v12",
  controls: true,
  markers: {color: "#3498db"}
}

// All maps created after this will use these options
new Mapkick.Map("map-1", data1)
new Mapkick.Map("map-2", data2)
```

--------------------------------

### Global Configuration

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Allows for global configuration of Mapkick.js behavior and settings.

```APIDOC
## Mapkick.options

### Description
An object containing global options that affect all maps.

### Usage
```javascript
Mapkick.options.defaultColor = "#000"
```
```

```APIDOC
## Mapkick.use(library)

### Description
Registers a map library to be used by Mapkick.

### Parameters
- **library** (Object) - The map library object to register.
```

```APIDOC
## Mapkick.maps

### Description
An object containing all registered map constructors.

### Example
```javascript
console.log(Mapkick.maps.Map)
```
```

```APIDOC
## Mapkick.library

### Description
Returns the currently active map library.
```

--------------------------------

### Configure Mapkick with Mixed Global and Instance Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Set global Mapkick options for zoom, controls, and tooltips. Instance-specific options can override these global defaults.

```javascript
// Set global defaults
Mapkick.options = {
  zoom: 12,
  controls: true,
  tooltips: {hover: true}
}

// Instance-specific options override globals
new Mapkick.Map("map-1", data, {
  zoom: 15,  // overrides global zoom
  style: "mapbox://styles/mapbox/outdoors-v12"
})

new Mapkick.Map("map-2", data)  // uses all global options
```

--------------------------------

### Configure Tooltips to Show on Click

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Change the default tooltip behavior from hover to click by setting `tooltips.hover` to false.

```javascript
new Mapkick.Map("map", data, {
  tooltips: {hover: false}
})
```

--------------------------------

### Configure Mapkick with MapLibre Global Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Configure Mapkick to use MapLibre with specified style and controls. All subsequent maps will use these MapLibre settings.

```javascript
// Use MapLibre (no access token needed)
Mapkick.options = {
  style: "https://demotiles.maplibre.org/style.json",
  controls: true
}

// All maps created after this will use MapLibre
new Mapkick.Map("map-1", data1)
new Mapkick.Map("map-2", data2)
```

--------------------------------

### Browser Integration with Mapbox GL JS

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Load Mapkick.js in a browser by including Mapbox GL JS and Mapkick.js scripts. Use the 'mapkick:load' event to ensure Mapkick is ready before creating maps.

```html
<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>
<script src="mapkick.js"></script>

<script>
  // Wait for Mapkick to initialize
  window.addEventListener("mapkick:load", function() {
    mapboxgl.accessToken = "YOUR-TOKEN"
    Mapkick.options = {style: "mapbox://styles/mapbox/dark-v11"}
    
    // Now safe to create maps
    new Mapkick.Map("map", data)
  })
</script>
```

--------------------------------

### Mapbox Map with All Features

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/configuration.md

Configure a Mapbox map with all available features, including style, zoom, controls, markers, and tooltips. This sets global options before initializing a map instance with specific refresh and trail settings.

```javascript
Mapkick.options = {
  style: "mapbox://styles/mapbox/dark-v11",
  zoom: 13,
  controls: true,
  markers: {
    color: "#e74c3c"
  },
  tooltips: {
    hover: true,
    html: false
  }
}

new Mapkick.Map("map", data, {
  refresh: 30,
  trail: {len: 50}
})
```

--------------------------------

### Module Usage with ES6 and Mapbox GL JS

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Import Mapkick and Mapbox GL JS using ES6 modules. Set the access token and then instantiate a new Mapkick map.

```javascript
import Mapkick from "mapkick"
import mapboxgl from "mapbox-gl"

Mapkick.use(mapboxgl)
mapboxgl.accessToken = "YOUR-TOKEN"

new Mapkick.Map("map", data)
```

--------------------------------

### MapOptions

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Configuration object for Map and AreaMap constructors.

```APIDOC
## MapOptions

Configuration object passed to `Map` or `AreaMap` constructor.

```typescript
{
  style?: string                      // Map style URL (required for MapLibre)
  zoom?: number                       // Initial zoom level (0-24)
  center?: [number, number]           // Initial center [longitude, latitude]
  controls?: boolean                  // Show navigation controls
  accessToken?: string                // Mapbox access token
  markers?: MarkerOptions             // Point marker styling
  tooltips?: TooltipOptions           // Tooltip behavior
  refresh?: number                    // Auto-refresh interval (seconds)
  trail?: boolean | TrailOptions      // Enable trail visualization
  replay?: boolean                    // Enable replay mode
  library?: object                    // Pass-through options to mapping library
}
```
```

--------------------------------

### Map Constructor

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-map.md

Instantiates a new Mapkick Map. Requires a DOM element ID or reference, map data (array, URL, or callback), and optional configuration options.

```javascript
new Mapkick.Map("map", [
  {latitude: 37.7829, longitude: -122.4190},
  {latitude: 40.7128, longitude: -74.0060}
])
```

```javascript
new Mapkick.Map("map", [
  {
    latitude: 37.7829,
    longitude: -122.4190,
    label: "San Francisco",
    tooltip: "5-star restaurant",
    color: "#f84d4d",
    icon: "restaurant"
  }
], {
  style: "mapbox://styles/mapbox/dark-v11",
  zoom: 12,
  controls: true
})
```

```javascript
new Mapkick.Map("map", "/api/locations")
```

```javascript
new Mapkick.Map("map", function(success, fail) {
  fetch("/api/locations")
    .then(r => r.json())
    .then(success)
    .catch(() => fail("Unable to fetch locations"))
})
```

```javascript
new Mapkick.Map("map", "/api/vehicles", {
  refresh: 10,
  trail: {len: 20}
})
```

```javascript
new Mapkick.Map("map", [
  {id: "bus-1", lat: 37.7829, lon: -122.4190, time: "2024-01-01T10:00:00Z"},
  {id: "bus-1", lat: 37.7830, lon: -122.4191, time: "2024-01-01T10:01:00Z"}
], {replay: true})
```

--------------------------------

### Map Methods

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Provides methods to interact with an existing Map instance.

```APIDOC
## getMapObject()

### Description
Returns the underlying map library's object.

### Returns
- (Object) - The map object from the underlying library (e.g., Google Maps, Leaflet).
```

```APIDOC
## destroy()

### Description
Cleans up the map instance and removes it from the DOM.
```

```APIDOC
## stopRefresh()

### Description
Stops any automatic data refresh for the map.
```

--------------------------------

### Load Map Data from Callback

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Use a callback function to fetch and load map data dynamically. Handles success and failure scenarios.

```javascript
new Mapkick.Map("map", function(success, fail) {
  fetch("/api/locations")
    .then(r => r.json())
    .then(success)
    .catch(() => fail("Unable to load locations"))
})
```

--------------------------------

### Global Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

The `Mapkick.options` object allows you to set global default options that will be applied to all newly created map instances. These defaults can be overridden by instance-specific options.

```APIDOC
## Mapkick.options

### Description
Object for setting global default options for all map instances.

### Setting Options
```javascript
Mapkick.options = {
  controls: true,
  style: "mapbox://styles/mapbox/dark-v11"
}
```
```

--------------------------------

### Enable HTML in Tooltips Option

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Allow HTML content within tooltips. Ensure manual sanitization for security.

```javascript
new Mapkick.Map("map", data, {tooltips: {html: true}})

```

--------------------------------

### Include Mapkick.js via CDN (Standalone)

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Include the standalone Mapkick.js script if you are managing Mapbox GL JS separately. This version does not bundle Mapbox GL JS.

```html
<script src="https://unpkg.com/mapkick@0.2.6/dist/mapkick.js"></script>
```

--------------------------------

### Enable HTML Tooltips

Source: https://github.com/ankane/mapkick.js/blob/master/examples/index.html

Allow HTML content within tooltips by setting the 'html' option to true. Be cautious with untrusted HTML.

```javascript
new Mapkick.Map("html-tooltips", [{latitude: 37.7829, longitude: -122.4190, tooltip: "<b>Hello</b>"}], {tooltips: {html: true}});
```

--------------------------------

### Handle 'No Mapping Library Found' Error in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Implement a try-catch block to manage situations where neither Mapbox GL JS nor MapLibre GL JS is loaded, which is required for Mapkick map initialization. This ensures the application can inform the user or attempt to load the necessary library.

```javascript
try {
  new Mapkick.Map("map", data)
} catch (err) {
  if (err.message === "No mapping library found") {
    console.error("Mapbox GL or MapLibre GL not loaded")
    // Load library dynamically
  }
}
```

--------------------------------

### Map Constructor

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

The `Mapkick.Map` constructor is used to create point-based map instances. Refer to the Map Class documentation for detailed usage.

```APIDOC
## Mapkick.Map

### Description
Constructor function for creating point-based maps.

### Usage
```javascript
new Mapkick.Map(elementId, data, options)
```
```

--------------------------------

### Mapkick.use(library)

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Explicitly sets the mapping library (Mapbox GL JS or MapLibre GL JS) to be used by Mapkick.js. This is an alternative to relying on automatic detection.

```APIDOC
## Mapkick.use(library)

### Description
Explicitly set the mapping library to use. This is an alternative to relying on automatic detection from `window.mapboxgl` or `window.maplibregl`.

### Method
```javascript
Mapkick.use(library)
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **library** (object) - Required - Mapbox GL JS or MapLibre GL JS library instance

### Request Example
```javascript
import maplibregl from "maplibre-gl"

Mapkick.use(maplibregl)
Mapkick.options = {
  style: "https://demotiles.maplibre.org/style.json"
}

new Mapkick.Map("map", [{latitude: 0, longitude: 0}])
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
undefined
```

--------------------------------

### Live Map with Auto-Refresh

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Configure a map to automatically refresh its data at a specified interval. Useful for real-time tracking.

```javascript
new Mapkick.Map("map", "/api/vehicles", {
  refresh: 10
})
```

--------------------------------

### Explicitly Set Mapping Library with Mapkick.use()

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Use this method to explicitly set the mapping library (Mapbox GL JS or MapLibre GL JS) for Mapkick. It's an alternative to automatic detection.

```javascript
Mapkick.use(library)
```

```javascript
import maplibregl from "maplibre-gl"

Mapkick.use(maplibregl)
Mapkick.options = {
  style: "https://demotiles.maplibre.org/style.json"
}

new Mapkick.Map("map", [{latitude: 0, longitude: 0}])
```

--------------------------------

### Configure Tooltip Behavior Option

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Control whether tooltips appear on click instead of the default hover behavior.

```javascript
new Mapkick.Map("map", data, {tooltips: {hover: false}})

```

--------------------------------

### Handle Callback Success

Source: https://github.com/ankane/mapkick.js/blob/master/examples/index.html

Use a callback function to fetch data asynchronously. The success callback should be invoked with the data.

```javascript
function fetchData(success, fail) { success([{latitude: 37.7829, longitude: -122.4190}]) }
new Mapkick.Map("callback-success", fetchData);
```

--------------------------------

### Configure Global Map Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Set global default options for all maps created after this property is set. Instance-specific options will override these defaults.

```javascript
// Set default style for all maps
Mapkick.options = {
  style: "mapbox://styles/mapbox/dark-v11",
  controls: true
}

// This map will use the dark style
new Mapkick.Map("map", data)

// This map will use a different style (overrides global)
new Mapkick.Map("map2", data, {
  style: "mapbox://styles/mapbox/light-v11"
})
```

--------------------------------

### Create Multiple Maps for a Dashboard

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Initialize multiple Mapkick map instances on a single page for a dashboard layout. Includes a cleanup function to destroy maps when navigating away.

```javascript
const pointMap = new Mapkick.Map("points-map", pointData)
const areaMap = new Mapkick.AreaMap("areas-map", areaData)

// Cleanup on navigation
window.addEventListener("beforeunload", function() {
  pointMap.destroy()
  areaMap.destroy()
})
```

--------------------------------

### Handling Missing Latitude Errors in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Demonstrates how to use a try-catch block to identify and log rows with missing latitude data.

```javascript
const data = [...] 

try {
  new Mapkick.Map("map", data)
} catch (err) {
  const match = err.message.match(/missing latitude \(index: (\d+)\)/)
  if (match) {
    const index = parseInt(match[1])
    console.error("Row at index", index, "is missing latitude:", data[index])
  }
}
```

--------------------------------

### Set Global Default Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Define global options that will be applied to all subsequently created maps. This is useful for consistent styling and behavior across your application.

```javascript
Mapkick.options = {
  style: "mapbox://styles/mapbox/dark-v11",
  controls: true,
  markers: {color: "#3498db"}
}

// All maps created after this will use these options
new Mapkick.Map("map-1", data)
new Mapkick.Map("map-2", data)
```

--------------------------------

### Set Mapping Library

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/README.md

Allows setting the mapping library to be used by Mapkick.js.

```APIDOC
## `Mapkick.use(library)`

### Description
Sets the mapping library to be used by Mapkick.js.

### Parameters
#### Path Parameters
- `library` (object) - Required - The mapping library object.
```

--------------------------------

### Configure Mapping Library

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Manually set the mapping library (Mapbox GL JS or MapLibre GL JS) for Mapkick to use. If not set, Mapkick attempts auto-detection.

```javascript
// Auto-detection (if mapboxgl or maplibregl is loaded)
new Mapkick.Map("map", data)

// Manual configuration
import mapboxgl from "mapbox-gl"
Mapkick.library = mapboxgl
Mapkick.options = {style: "..."}
new Mapkick.Map("map", data)

// Or with MapLibre
import maplibregl from "maplibre-gl"
Mapkick.library = maplibregl
Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
new Mapkick.Map("map", data)
```

--------------------------------

### Configure Map Style Option

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Set a custom map style using a Mapbox or MapLibre style URL.

```javascript
new Mapkick.Map("map", data, {style: "mapbox://styles/mapbox/outdoors-v12"})

```

--------------------------------

### Use Custom Map Style URL

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/configuration.md

Specify a custom Mapbox GL or MapLibre GL style JSON URL for your map. Ensure the URL points to a valid style definition.

```javascript
new Mapkick.Map("map", data, {
  style: "https://your-server.com/styles/custom.json"
})
```

--------------------------------

### Trail Visualization Options

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/types.md

Configure the maximum length of trails, specifying the number of points to retain.

```typescript
{
  len?: number                        // Maximum trail length (number of points to retain)
}
```

--------------------------------

### Set Global Mapkick Options

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Configure default options for all Mapkick maps on the page using the Mapkick.options object.

```javascript
Mapkick.options = {
  style: "mapbox://styles/mapbox/outdoors-v12"
}

```

--------------------------------

### Handling Missing Longitude Errors in Mapkick.js

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/errors.md

Demonstrates how to use a try-catch block to identify and log rows with missing longitude data.

```javascript
const data = [...] 

try {
  new Mapkick.Map("map", data)
} catch (err) {
  const match = err.message.match(/missing longitude \(index: (\d+)\)/)
  if (match) {
    const index = parseInt(match[1])
    console.error("Row at index", index, "is missing longitude:", data[index])
  }
}
```

--------------------------------

### Library Reference

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

The `Mapkick.library` property holds a reference to the loaded mapping library (Mapbox GL JS or MapLibre GL JS). It is automatically detected or can be set manually.

```APIDOC
## Mapkick.library

### Description
Reference to the loaded mapping library (Mapbox GL JS or MapLibre GL JS).

### Manual Configuration
```javascript
import mapboxgl from "mapbox-gl"
Mapkick.library = mapboxgl
```
```

--------------------------------

### Map with URL Data

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/configuration.md

Initialize a Mapkick map by providing a URL that returns a JSON array of location data. This enables dynamic, deferred loading and works well with refresh mechanisms.

```javascript
new Mapkick.Map("map", "/api/locations")
```

--------------------------------

### Create an Area Map

Source: https://github.com/ankane/mapkick.js/blob/master/examples/index.html

Generate an area map by providing a JSON file path. The file should contain geographical data for the areas.

```javascript
new Mapkick.AreaMap("area", "states.json");
```

--------------------------------

### Create an Area Map with Regions

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Use this to display geographical regions with custom labels, tooltips, and colors. Requires GeoJSON-like geometry data.

```javascript
new Mapkick.AreaMap("map", [
  {
    geometry: {
      type: "Polygon",
      coordinates: [[
        [-122.4, 37.8],
        [-122.4, 37.7],
        [-122.3, 37.7],
        [-122.3, 37.8],
        [-122.4, 37.8]
      ]]
    },
    label: "Downtown",
    tooltip: "Central Business District",
    color: "#0090ff"
  }
])
```

--------------------------------

### Replay Historical Data

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/quick-start.md

Replay historical movement data on the map using timestamps. Requires data points with `id`, `lat`, `lon`, and `time`.

```javascript
new Mapkick.Map("map", [
  {id: "bus-1", lat: 37.7829, lon: -122.4190, time: "2024-01-01T10:00:00Z"},
  {id: "bus-1", lat: 37.7830, lon: -122.4191, time: "2024-01-01T10:01:00Z"},
  {id: "bus-1", lat: 37.7831, lon: -122.4192, time: "2024-01-01T10:02:00Z"}
], {
  replay: true
})
```

--------------------------------

### Access and Manage Map Instances

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/api-reference-mapkick.md

Access previously created map instances via the Mapkick.maps object, keyed by their container element IDs. This is useful for interacting with existing maps.

```javascript
const map1 = new Mapkick.Map("map-container-1", data)
const map2 = new Mapkick.Map("map-container-2", data)

// Access previously created maps by element ID
const referencedMap1 = Mapkick.maps["map-container-1"]
const referencedMap2 = Mapkick.maps["map-container-2"]
```

--------------------------------

### Mapkick.Map

Source: https://github.com/ankane/mapkick.js/blob/master/README.md

Creates a point map on the specified element. It takes the ID of the HTML element where the map will be rendered and an array of locations.

```APIDOC
## Mapkick.Map

### Description
Creates a point map on the specified element. It takes the ID of the HTML element where the map will be rendered and an array of locations.

### Method
Constructor

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Map with Array Data

Source: https://github.com/ankane/mapkick.js/blob/master/_autodocs/configuration.md

Initialize a Mapkick map with data provided as a JavaScript array of objects. This method is synchronous and has no network latency but requires all data to be loaded upfront.

```javascript
new Mapkick.Map("map", [
  {latitude: 37.7829, longitude: -122.4190},
  {latitude: 40.7128, longitude: -74.0060}
])
```