Skip to content
← 返回 hands-on-data-visualization
← 返回 hands-on-data-visualization

ch-0013 Chapter 12: Leaflet Map Templates

  • 原书章节: Chapter 12 Leaflet Map Templates（pp. 311–356）
  • 输入来源: 本地 pdf（HandsOnDataViz.pdf）

摘要

Leaflet 是强大的开源 JavaScript 地图库（桌面/移动端皆可）。本章提供 6 个模板， 覆盖拖拽平台做不出的定制地图（自定义图标/颜色、滚动叙述、热力、可搜索、实时数据）：

  1. Leaflet Maps with Google Sheets（新手友好）：数据挂在 Google Sheets 上，支持 点/折线/多边形任意组合 + 自定义图标颜色，地图下方可显示数据摘要表
  2. Leaflet Storymaps with Google Sheets：滚动式逐点导览，配合文本/图片/音视频/ 扫描地图背景，做"故事地图"（ch-0008 提过的 story map）
  3. Leaflet Point Map with CSV Data：从 CSV 读点数据，是练代码基本功的起点
  4. Leaflet Heatmap Points with CSV Data：把点密度渲染成热力（hotspot）
  5. Leaflet Searchable Point Map：多地点搜索/筛选
  6. Leaflet Maps with Open Data APIs：直接从开放数据 API 持续拉最新数据（衔接 ch-0008 的 current map 理念）

设计上强调响应式（自动适配屏幕尺寸）。模板的工作流与图表模板一致：fork → 填 Google Sheets 地址（Options tab）/换 CSV → 发布 GitHub Pages → 嵌入网站。 最后给出使用数据源（Socrata 等 API）、调试问题的指引。

要点归纳

  • Leaflet 是开源、免许可费（MIT 类）的地图库，弥补拖拽平台的定制空白
  • 6 模板按难度递进：Google Sheets 两个（免代码）→ CSV 基础 → 热力/搜索/API 进阶
  • storymap 模板把"叙事"做成滚动式导览，是地图讲故事的典型形态
  • 响应式设计是模板默认能力，移动端也能正常浏览
  • 所有模板都走同一条发布流水线：GitHub fork → 改数据 → GitHub Pages → iframe

术语 / 概念

  • Leaflet — 开源 JavaScript 交互地图库
  • storymap（故事地图） — 滚动叙述引导读者逐点游览的地图
  • heatmap（热力图） — 用色带表现点密度/事件强度
  • polyline / polygon — 折线（路线）/多边形（区域）几何类型
  • Open Data API — 可编程读取的开放数据接口（如 Socrata）
  • responsive design（响应式设计） — 页面随设备尺寸自适应

原句摘录

We specifically created both code templates [Leaflet Maps with Google Sheets and Leaflet Storymaps] for readers of this book, to fill a gap in maps offered on hosted platforms.

疑问 / 待查

  • Google Sheets 加载地图模板要求公开分享工作表，注意隐私边界（ch-0004 的敏感数据 议题相关）
  • 空行会破坏 Google Sheets 驱动的地图（ch-0017 排查项提前预警）
Backlinks (1) 
flowchart LR
  n0["ch-0001 Introduction（为什么做数据可视化）"]
  n1["ch-0002 选工具讲你的数据故事（Ch 1）"]
  n2["ch-0003 强化电子表格技能（Ch 2）"]
  n3["ch-0004 找到并质询你的数据（Ch 3）"]
  n4["ch-0005 清洗脏数据（Ch 4）"]
  n5["ch-0006 做有意义的比较（Ch 5）"]
  n6["ch-0007 图表化你的数据（Ch 6）"]
  n7["ch-0008 地图化你的数据（Ch 7）"]
  n8["ch-0009 表格化你的数据（Ch 8）"]
  n9["ch-0010 嵌入网页（Ch 9）"]
  n10["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
  n11["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
  n12["ch-0013 Leaflet 地图模板（Ch 12）"]
  n13["ch-0014 转换你的地图数据（Ch 13）"]
  n14["ch-0015 识别谎言、减少偏差（Ch 14）"]
  n15["ch-0016 讲述并展示你的数据故事（Ch 15）"]
  n16["ch-0017 附录 A 排查常见问题"]
  n17["Hands-On Data Visualization（整理完成）"]
  n18["Hands-On Data Visualization 笔记"]
  n19["Reading"]
  n17 --> n0
  n17 --> n1
  n17 --> n2
  n17 --> n3
  n17 --> n4
  n17 --> n5
  n17 --> n6
  n17 --> n7
  n17 --> n8
  n17 --> n9
  n17 --> n10
  n17 --> n11
  n17 --> n12
  n17 --> n13
  n17 --> n14
  n17 --> n15
  n17 --> n16
  n17 --> n18
  n19 --> n17
  click n0 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
  click n1 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
  click n2 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
  click n3 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
  click n4 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
  click n5 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
  click n6 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
  click n7 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
  click n8 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
  click n9 "../ch-0010/" "ch-0010 嵌入网页（Ch 9）"
  click n10 "../ch-0011/" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
  click n11 "../ch-0012/" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
  click n12 "./" "ch-0013 Leaflet 地图模板（Ch 12）"
  click n13 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
  click n14 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
  click n15 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
  click n16 "../ch-0017/" "ch-0017 附录 A 排查常见问题"
  click n17 "../" "Hands-On Data Visualization（整理完成）"
  click n18 "../notes/" "Hands-On Data Visualization 笔记"
  click n19 "../../" "Reading"