Mapkick supports Mapbox and MapLibre.
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/v2.12.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<script src="mapkick.js"></script>
<script>
mapboxgl.accessToken = "YOUR-TOKEN"
</script>
Download mapkick.js and add in the <head> of your HTML file:
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="mapkick.js"></script>
<script>
Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
</script>
Create a map
<div id="map" style="height: 400px;"></div>
<script>
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>
Point map
<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
Area map
<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>
Data can be an array
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
Or a URL that returns JSON (same format as above)
new Mapkick.Map("map", "/restaurants")
Or a callback
function fetchData(success, fail) {
success([{latitude: 37.7829, longitude: -122.4190}])
// or fail("Data not available")
}
new Mapkick.Map("map", fetchData)
Use latitude or lat for latitude and longitude, lon, or lng for longitude
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 (depending on the map style, only some icons may be available)
Use geometry with a GeoJSON Polygon or MultiPolygon
You can specify a label and tooltip for each data point
{
geometry: {type: "Polygon", coordinates: ...},
label: "Hot Chicken Takeover",
tooltip: "5 stars"
}
Marker color
new Mapkick.Map("map", data, {markers: {color: "#f84d4d"}}
Show tooltips on click instead of hover
new Mapkick.Map("map", data, {tooltips: {hover: false}})
Allow HTML in tooltips (must sanitize manually)
new Mapkick.Map("map", data, {tooltips: {html: true}})
Map style
new Mapkick.Map("map", data, {style: "mapbox://styles/mapbox/outdoors-v12"})
Zoom and controls
new Mapkick.Map("map", data, {zoom: 15, controls: true})
To set options for all of your maps, use:
Mapkick.options = {
style: "mapbox://styles/mapbox/outdoors-v12"
}
Refresh data periodically from a remote source to create a live map
new Mapkick.Map("map", url, {refresh: 10}) // seconds
Show trails
new Mapkick.Map("map", 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("map", url, {trail: {len: 10}, refresh: 10})
new Mapkick.Map("map", 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)
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 https://github.com/ankane/mapkick.js.git
cd mapkick.js
npm install
npm run build