ankane / mapkick Goto Github PK

View Code? Open in Web Editor NEW

255.0 4.0 5.0 252 KB

Create beautiful JavaScript maps with one line of Ruby

Home Page: https://chartkick.com/mapkick

License: MIT License

Ruby 100.00%

mapkick's Introduction

Mapkick

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

See it in action

🔥 For static maps, check out Mapkick Static, and 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 (or set Mapkick.options[:access_token] in an initializer).

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

Point map

<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>

Area map

<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>

Data

Data can be an array

<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>

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

<%= js_map cities_path %>

Point Map

Use latitude or lat for latitude and longitude, lon, or lng for longitude

You can specify a label, tooltip, and color for each data point

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

Area Map

Use geometry with a GeoJSON Polygon or MultiPolygon

You can specify a label, tooltip, and color for each data point

{
  geometry: {type: "Polygon", coordinates: ...},
  label: "Hot Chicken Takeover",
  tooltip: "5 stars",
  color: "#0090ff"
}

Options

Id, width, and height

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

Marker color

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

Show tooltips on click instead of hover

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

Allow HTML in tooltips (must sanitize manually)

<%= js_map data, tooltips: {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 %>

Pass options directly to the mapping library

<%= js_map data, library: {hash: true} %>

See the documentation for Mapbox GL JS for more info

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>

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

mapkick's People

Contributors

Stargazers

Watchers

Forkers

cpayne624 simonneutert majaliju iq-scm loqimean

mapkick's Issues

Question: Which format is used for the area_map?

In the README and examples it only says:

<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>

So what format is expected here? I have tried it in the format used by Mapbox GL without success.

Ideas

Please create a new issue to discuss any ideas or share your own.

Add support for iRuby
Add support for heatmaps

Custom pin icons?

I'm not sure how difficult this would be to implement as I haven't dug into the codebase yet but being able to pass a link to an image as an argument for custom pin icons would be really neat!

There is no ability to pass html data attributes

There is a problem when I wanna connect to my map Stimulus.js controller and I can't! 'cause there is no such ability!

Ability to draw and highlight polygons

Great gem that's made getting a map and setting it up pretty easy. However, I was wondering if it is possible to draw a polygon outlined with coordinates and fill it with a color?

Describe, please, why `calc()` in CSS is vulnerability 🙂

HI, I was really surprised, when I got an error "Invalid height" after using height: "calc(100vh - HEADER_HEIGHT)". I went to the docs and found this..:

      [:height, :width].each do |k|
        # limit to alphanumeric and % for simplicity
        # this prevents things like calc() but safety is the priority
        # dot does not need escaped in square brackets
        raise ArgumentError, "Invalid #{k}" unless html_vars[k] =~ /\A[a-zA-Z0-9%.]*\z/
      end

What does it mean? Why I can't write CSS properly?

Can I use Mapkick to plot directions?

Hey, there!

I want to plot some directions using Mapbox's Directions API.

Is Mapkick only to plot specific dots or do you think I can use it to plot routes?

Different marker colors?

So data can be an array, but markers can't?

Is there a way to set multiple markers with different colors? I don't quite get, why the color isn't part of the data point.

Thx.

README Change for Non ENV users

The README currently notes the following:
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.

This is not entirely accurate. When I dug into the code, I found you could also just pass in your access_token to the js_map method:
= js_map([{latitude: 'lotsOnumbers', longitude: 'EvenMOREnumbers'}], access_token: Rails.application.credentials.mapbox[:access_token], style: "mapbox://styles/mapbox/outdoors-v12", zoom: 15, controls: true, width: '100%', height: '600px')

I would suggest changing the text to something like:
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. If you are using Rails.application.credentials instead of ENV variables, you can provide your token directly to the js_map method by passing in access_token: my_awesome_token.

Something like that :)

Most importantly, thanks for the gem! I needed just something like this for a friend's site and it was so awesomely easy to use and creates a lovely map. Really appreciate all the great work!!

P.S. Apologies for not creating a fork and pul request ... slammed at work this week and wanted to send this thought along before I forgot!

Static Image map support.

Thanks for the great work!
Is it possible to use the Static Image API to add a map that is just an image, or would that be beyond the scope of this gem?

Something like:


<%= img_map [{latitude: 37.7829, longitude: -122.4190}] %>

LINESTRING

area_map was a great addition of mapkick! It would be very useful to have a geojson LINESTRING so that one can show a path through an area_map.

{:type=>"LineString", :coordinates=>[[-122.42562, 37.61791], [-122.4261, 37.61818], [-122.42638, 37.61825], [-122.42657, 37.61825], [-122.42776, 37.6181]]}

thank you for creating ChartKick and now MapKick!

Inquiry about Heat Maps

Hello Andrew,

I wanted to ask if the "Heat Maps" feature is included in the map kick gem. Could you please provide some information about this?

Thank you!

Support for Draggable Markers.

Hello!
Is there a way to make the markers draggable and capture the resulting coordinates?
This example on Mapbox captures it quite well.