Introduction
Mapkick - Create beautiful JavaScript maps with one line of Ruby
Mapkick uses Mapbox GL JS v1. To use tiles from Mapbox, create a Mapbox account to get an access token and set `ENV["MAPBOX_ACCESS_TOKEN"]` in your environment.
## Installation
Add this line to your application’s Gemfile:
```ruby
gem "mapkick-rb"
```
Then follow the instructions for your JavaScript setup: Importmap (Rails default), Bun, esbuild, rollup.js, or Webpack, or Sprockets.
## Maps
Point map:
```erb
<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
```
Area map:
```erb
<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>
```
## Data
Data can be an array:
```erb
<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
```
Or a URL that returns JSON (same format as above):
```erb
<%= js_map cities_path %>
```
## Point Map
Use `latitude` or `lat` for latitude and `longitude`, `lon`, or `lng` for longitude.
You can specify a label and tooltip for each data point:
```js
{
latitude: ...,
longitude: ...,
label: "Hot Chicken Takeover",
tooltip: "5 stars"
}
```
## Area Map
Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`.
You can specify a label and tooltip for each data point:
```js
{
geometry: {type: "Polygon", coordinates: ...},
label: "Hot Chicken Takeover",
tooltip: "5 stars"
}
```
## Options
- Id, width, and height
- Marker color
- Show tooltips on click instead of hover
- Allow HTML in tooltips (must sanitize manually)
- Map style
- Zoom and controls
- Refresh data from a remote source every n seconds
To set options for all of your maps, create an initializer `config/initializers/mapkick.rb`.
JavaScript mapsRuby gemMapbox GL JSPoint mapsArea mapsGeoJSONTooltipsRemote data
Screenshots
Deployment
Rails + Importmap
适用于使用 Rails 默认 Importmap 管理前端资源的应用，在 Gemfile 添加 mapkick-rb 后通过 importmap 引入 mapkick/bundle。
Rails + Bun/esbuild/rollup.js/Webpack
适用于使用现代 JavaScript 打包器的 Rails 应用，通过 bun 或 yarn 安装 mapkick 并在 application.js 中导入 bundle。
Rails + Sprockets
适用于仍使用 Sprockets 资产管线的 Rails 应用，在 application.js 中 require mapkick.bundle。
Sinatra/Padrino 手动引入
适用于 Sinatra 或 Padrino 应用，下载 mapkick.bundle.js 后以 script 标签手动加载。
Details
Type Open-source software
License MIT
Last verified 2026-07-18
Ad slot 300 × 250 Ad
About the data
Stars / commit times sync automatically from the GitHub API; pricing and features are human-verified.