Mapkick

Create beautiful JavaScript maps with one line of Ruby. No more fighting with mapping libraries!

See it in action

🔥 For charts, check out Chartkick

Installation

Add this line to your application’s Gemfile:

gem "mapkick-rb"

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.

Then follow the instructions for your JavaScript setup:

• Importmap (Rails 7 default)
• esbuild, rollup.js, or Webpack
• Webpacker (Rails 6 default)
• Sprockets

Importmap

In config/importmap.rb, add:

pin "mapkick/bundle", to: "mapkick.bundle.js"

And in app/javascript/application.js, add:

import "mapkick/bundle"

esbuild, rollup.js, or Webpack

Run:

yarn add mapkick

And in app/javascript/application.js, add:

import "mapkick/bundle"

Note: For rollup.js, this requires format: "iife" in rollup.config.js.

Webpacker

Run:

yarn add mapkick

And in app/javascript/packs/application.js, add:

import "mapkick/bundle"

Sprockets

In app/assets/javascripts/application.js, add:

//= require mapkick.bundle

Maps

Create a map

<%= js_map [{latitude: 1.23, longitude: 4.56}] %>

Data

Data can be an array

<%= js_map [{latitude: 1.23, longitude: 4.56}] %>

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

<%= js_map cities_path %>

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

You can specify a label and tooltip for each data point

{
  latitude: ...,
  longitude: ...,
  label: "Hot Chicken Takeover",
  tooltip: "5 stars"
}

Options

Id, width, and height

<%= js_map data, id: "cities-map", width: "800px", height: "500px" %>

Markers

<%= js_map data, markers: {color: "#f84d4d"} %>

Tooltips

<%= js_map data, tooltips: {hover: false, html: true} %>

Map style

<%= js_map data, style: "mapbox://styles/mapbox/outdoors-v12" %>

Zoom and controls

<%= js_map data, zoom: 15, controls: true %>

Refresh data from a remote source every n seconds

<%= js_map url, refresh: 60 %>

Global Options

To set options for all of your maps, create an initializer config/initializers/mapkick.rb with:

Mapkick.options[:height] = "400px"

Sinatra and Padrino

Download mapkick.bundle.js and include it manually.

<script src="mapkick.bundle.js"></script>

No Ruby? No Problem

Check out mapkick.js

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:

git clone https://github.com/ankane/mapkick.git
cd mapkick
bundle install
bundle exec rake test