Create beautiful, interactive maps with one line of JavaScript
npm install mapkickCreate beautiful, interactive maps with one line of JavaScript
For charts, check out Chartkick.js

Mapkick supports Mapbox and MapLibre.
First, create a Mapbox account to get an access token.
Download mapkick.js and add in the of your HTML file:
``html`
Download mapkick.js and add in the
of your HTML file:`html
`Getting Started
Create a map
`html
`Maps
Point map
`javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
`Area map
`javascript
new Mapkick.AreaMap("map", [{geometry: {type: "Polygon", coordinates: ...}}])
`Data
Data can be an array
`javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
`Or a URL that returns JSON (same format as above)
`javascript
new Mapkick.Map("map", "/restaurants")
`Or a callback
`javascript
function fetchData(success, fail) {
success([{latitude: 37.7829, longitude: -122.4190}])
// or fail("Data not available")
}new Mapkick.Map("map", fetchData)
`$3
Use
latitude or lat for latitude and longitude, lon, or lng for longitudeYou can specify an icon, label, tooltip, and color for each data point
`javascript
{
latitude: ...,
longitude: ...,
icon: "restaurant",
label: "Hot Chicken Takeover",
tooltip: "5 stars",
color: "#f84d4d"
}
`Maki icons are supported (depending on the map style, only some icons may be available)
$3
Use
geometry with a GeoJSON Polygon or MultiPolygonYou can specify a label, tooltip, and color for each data point
`javascript
{
geometry: {type: "Polygon", coordinates: ...},
label: "Hot Chicken Takeover",
tooltip: "5 stars",
color: "#0090ff"
}
`Options
Marker color
`javascript
new Mapkick.Map("map", data, {markers: {color: "#f84d4d"}}
`Show tooltips on click instead of hover
`javascript
new Mapkick.Map("map", data, {tooltips: {hover: false}})
`Allow HTML in tooltips (must sanitize manually)
`javascript
new Mapkick.Map("map", data, {tooltips: {html: true}})
`Map style
`javascript
new Mapkick.Map("map", data, {style: "mapbox://styles/mapbox/outdoors-v12"})
`Zoom and controls
`javascript
new Mapkick.Map("map", data, {zoom: 15, controls: true})
`Pass options directly to the mapping library
`javascript
new Mapkick.Map("map", data, {library: {hash: true}})
`See the documentation for Mapbox GL JS and MapLibre GL JS for more info
$3
To set options for all of your maps, use:
`javascript
Mapkick.options = {
style: "mapbox://styles/mapbox/outdoors-v12"
}
`Live Updates
Refresh data periodically from a remote source to create a live map
`javascript
new Mapkick.Map("map", url, {refresh: 10}) // seconds
`Show trails
`javascript
new Mapkick.Map("map", url, {trail: true, refresh: 10})
`Use the
id attribute to identify objects`javascript
[
{id: "bus-1", lat: ..., lon: ...},
{id: "bus-2", lat: ..., lon: ...}
]
`Set trail length
`javascript
new Mapkick.Map("map", url, {trail: {len: 10}, refresh: 10})
`Replay Data
`javascript
new Mapkick.Map("map", data, {replay: true})
`Use the
id attribute to identify objects and the time attribute for when the data was measured`javascript
[
{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)History
View the changelog
Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features
To get started with development:
`sh
git clone https://github.com/ankane/mapkick.js.git
cd mapkick.js
npm install
npm run build-dev
``