GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ankane → Mapkick.js

ankane / Mapkick.js

Licence: mit
Create beautiful, interactive maps with one line of JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language

Mapkick.js

Create beautiful, interactive maps with one line of JavaScript

View the demo

Getting Started

Create a map

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

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

Data

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) {
  callback(someData);
}
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
}

Installation

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="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<script>
  mapboxgl.accessToken = "YOUR-TOKEN";
</script>
<script src="mapkick.js"></script>

History

View the changelog

Contributing

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

To get started with development:

git clone https://github.com/ankane/mapkick.js.git
cd mapkick.js
yarn install
yarn build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].