Mapkick.py

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

See it in action

For static maps, check out Mapkick Static.py, and for charts, check out Chartkick.py

Installation

Run:

pip install mapkick

Mapkick uses Mapbox GL JS v1. To use tiles from Mapbox, create a Mapbox account to get an access token and set MAPBOX_ACCESS_TOKEN in your environment.

Then follow the instructions for your web framework:

• Django
• Flask

Django

Add to INSTALLED_APPS in settings.py

INSTALLED_APPS = [
    'mapkick.django',
    # ...
]

Load the JavaScript

{% load static %}

<script src="{% static 'mapkick.bundle.js' %}"></script>

Create a map in a view

from mapkick.django import Map

def index(request):
    map = Map([{'latitude': 37.7829, 'longitude': -122.4190}])
    return render(request, 'home/index.html', {'map': map})

And add it to the template

{{ map }}

Flask

Register the blueprint

from mapkick.flask import mapkick_blueprint

app.register_blueprint(mapkick_blueprint)

Load the JavaScript

<script src="{{ url_for('mapkick.static', filename='mapkick.bundle.js') }}"></script>

Create a map in a route

from mapkick.flask import Map

def index():
    map = Map([{'latitude': 37.7829, 'longitude': -122.4190}])
    return render_template('home/index.html', map=map)

And add it to the template

{{ map }}

Maps

Point map

Map([{'latitude': 37.7829, 'longitude': -122.4190}])

Area map

AreaMap([{'geometry': {'type': 'Polygon', 'coordinates': ...}}])

Data

Data can be a list

Map([{'latitude': 37.7829, 'longitude': -122.4190}])

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

Map('/restaurants')

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

Width and height

Map(data, width='800px', height='500px')

Marker color

Map(data, markers={'color': '#f84d4d'})

Show tooltips on click instead of hover

Map(data, tooltips={'hover': False})

Allow HTML in tooltips (must sanitize manually)

Map(data, tooltips={'html': True})

Map style

Map(data, style='mapbox://styles/mapbox/outdoors-v12')

Zoom and controls

Map(data, zoom=15, controls=True)

Refresh data from a remote source every n seconds

Map(url, refresh=60)

Pass options directly to the mapping library

Map(data, library={'hash': True})

See the documentation for Mapbox GL JS for more info

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.py.git
cd mapkick.py
pip install --group dev
pytest