Create beautiful, interactive maps with one line of JavaScript

Getting Started

Create a map

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

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


Data can be an array

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

Or a URL that returns JSON (same format as above)

new Mapkick.Map(id, url)

Or a function

function fetchData(callback) {
new Mapkick.Map(id, fetchData)

You can use latitude, lat, longitude, lon, and lng

You can specify an icon, label, and tooltip for each data point

  latitude: ...,
  longitude: ...,
  icon: "restaurant",
  label: "Hot Chicken Takeover",
  tooltip: "5 stars"

Maki icons are supported

Live Updates

Refresh data periodically from a remote source to create a live map

new Mapkick.Map(id, url, {refresh: 10}) // seconds

Show trails

new Mapkick.Map(id, url, {trail: true, refresh: 10})

Use the id attribute to identify objects

  {id: "bus-1", lat: ..., lon: ...},
  {id: "bus-2", lat: ..., lon: ...}

Set trail length

new Mapkick.Map(id, url, {trail: {len: 10}, refresh: 10})

Replay Data

new Mapkick.Map(id, data, {replay: true})

Use the id attribute to identify objects and the time attribute for when the data was measured

  {id: "bus-1", lat: ..., lon: ..., time: t0},
  {id: "bus-2", lat: ..., lon: ..., time: t0},
  {id: "bus-1", lat: ..., lon: ..., time: t1},
  {id: "bus-2", lat: ..., lon: ..., time: t1}

Times can be a Date, a timestamp (or sequence number), or a string (strings are parsed)

Map Options

  style: "mapbox://styles/mapbox/streets-v9",
  zoom: 15,
  defaultIcon: "default-icon",
  controls: true


Mapkick uses Mapbox GL JS. You must first create a Mapbox account to get an access token.

Download mapkick.js and add in the <head> of your HTML file:

<link href="" rel="stylesheet" />
<script src=""></script>
  mapboxgl.accessToken = "YOUR-TOKEN";
<script src="mapkick.js"></script>


View the changelog


Everyone is encouraged to help improve this project. Here are a few ways you can help:

To get started with development:

git clone
cd mapkick.js