Mapkick.py

使用一行Python创建美丽的JavaScript地图。不再需要与映射库斗争！

看看它的实际效果

对于图表，请查看 Chartkick.py

安装

运行

pip install mapkick

Mapkick使用 Mapbox GL JS v1。要使用来自Mapbox的瓦片，请创建一个Mapbox账户 以获取访问令牌 并在您的环境中设置MAPBOX_ACCESS_TOKEN。

然后按照您Web框架的说明进行操作

• Django
• Flask

Django

将以下内容添加到settings.py中的INSTALLED_APPS

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

加载JavaScript

{% load static %}

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

在视图中创建一个地图

from mapkick.django import Map

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

并将其添加到模板中

{{ map }}

Flask

注册蓝图

from mapkick.flask import mapkick_blueprint

app.register_blueprint(mapkick_blueprint)

加载JavaScript

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

在路由中创建一个地图

from mapkick.flask import Map

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

并将其添加到模板中

{{ map }}

地图

点地图

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

区域地图

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

数据

数据可以是一个列表

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

或一个返回JSON（与上面相同的格式）的URL

Map('/restaurants')

点地图

使用latitude或lat表示纬度，使用longitude、lon或lng表示经度

您可以指定每个数据点的标签、提示信息和颜色

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

区域地图

使用GeoJSON的Polygon或MultiPolygon的geometry

您可以指定每个数据点的标签、提示信息和颜色

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

选项

宽度和高度

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

标记颜色

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

在点击时显示提示信息而不是悬停时显示

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

在提示信息中允许HTML（必须手动清理）

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

地图样式

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

缩放和控制

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

每n秒从远程源刷新数据

Map(url, refresh=60)

直接将选项传递给映射库

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

有关更多信息，请参阅Mapbox GL JS文档

历史

查看变更日志

贡献

鼓励每个人帮助改进这个项目。以下是一些您可以提供帮助的方式

• 报告错误
• 修复错误并提交拉取请求
• 编写、澄清或修复文档
• 建议或添加新功能

开始开发

git clone https://github.com/ankane/mapkick.py.git
cd mapkick.py
pip install -r requirements.txt
pytest