Create beautiful JavaScript maps with one line of Python

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

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 and tooltip for each data point

{
  '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

{
  'geometry': {'type': 'Polygon', 'coordinates': ...},
  'label': 'Hot Chicken Takeover',
  'tooltip': '5 stars'
}

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)

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 -r requirements.txt
pytest