Leaflet Storymaps with Google Sheets 使用教程

Leaflet Storymaps with Google Sheets 使用教程

leaflet-storymaps-with-google-sheetsScroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery项目地址:https://gitcode.com/gh_mirrors/le/leaflet-storymaps-with-google-sheets

1、项目介绍

Leaflet Storymaps with Google Sheets 是一个开源项目，旨在通过 Google Sheets 创建交互式的故事地图。该项目结合了 Leaflet 地图库和 Google Sheets，使用户能够轻松地创建带有滚动叙事、图像、音频、视频和地理数据叠加的故事地图。通过简单的 Google Sheets 模板，用户可以自定义地图内容，并将其嵌入到网页中。

2、项目快速启动

2.1 克隆项目

首先，克隆项目到本地：

git clone https://github.com/HandsOnDataViz/leaflet-storymaps-with-google-sheets.git

2.2 配置 Google Sheets

1. 打开 Google Sheets 模板链接：Google Sheets 模板。
2. 复制该模板到你的 Google Drive。
3. 在 Google Sheets 中，安装免费的 Geocoding by SmartMonkey 插件，用于地理编码（获取地址的经纬度坐标）。

2.3 获取 Google Sheets API 密钥

1. 访问 Google Cloud Console。
2. 创建一个新的项目，并启用 Google Sheets API。
3. 生成 API 密钥，并将其复制到项目的 google-doc-url.js 文件中。

2.4 运行项目

在项目目录中，使用以下命令启动本地服务器：

python -m http.server 8000

打开浏览器，访问 http://localhost:8000，即可查看你的故事地图。

3、应用案例和最佳实践

3.1 应用案例

• 旅游指南：创建一个交互式的旅游指南，展示不同景点的详细信息和路线。
• 历史事件：通过地图展示历史事件的发生地点和相关信息。
• 教育资源：为学生提供地理相关的教育资源，帮助他们更好地理解地理知识。

3.2 最佳实践

• 数据整理：确保 Google Sheets 中的数据格式正确，特别是地址信息，以便正确进行地理编码。
• 内容丰富：在地图中添加丰富的多媒体内容，如图像、音频和视频，以增强用户体验。
• 响应式设计：利用项目的响应式设计功能，确保地图在不同设备上都能良好显示。

4、典型生态项目

• Leaflet：一个轻量级的 JavaScript 地图库，用于创建交互式地图。
• Google Sheets：一个在线电子表格工具，用于数据管理和共享。
• Geocoding by SmartMonkey：一个 Google Sheets 插件，用于将地址转换为地理坐标。
• GitHub：用于版本控制和项目协作的平台。

通过这些工具和项目的结合，Leaflet Storymaps with Google Sheets 提供了一个强大的平台，帮助用户轻松创建和分享交互式故事地图。

leaflet-storymaps-with-google-sheetsScroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery项目地址:https://gitcode.com/gh_mirrors/le/leaflet-storymaps-with-google-sheets