ch-0013 Chapter 12: Leaflet Map Templates
- 原书章节: Chapter 12 Leaflet Map Templates（pp. 311–356）
- 输入来源: 本地 pdf（HandsOnDataViz.pdf）
摘要
Leaflet 是强大的开源 JavaScript 地图库（桌面/移动端皆可）。本章提供 6 个模板， 覆盖拖拽平台做不出的定制地图（自定义图标/颜色、滚动叙述、热力、可搜索、实时数据）：
- Leaflet Maps with Google Sheets（新手友好）：数据挂在 Google Sheets 上，支持 点/折线/多边形任意组合 + 自定义图标颜色，地图下方可显示数据摘要表
- Leaflet Storymaps with Google Sheets：滚动式逐点导览，配合文本/图片/音视频/ 扫描地图背景，做"故事地图"（ch-0008 提过的 story map）
- Leaflet Point Map with CSV Data：从 CSV 读点数据，是练代码基本功的起点
- Leaflet Heatmap Points with CSV Data：把点密度渲染成热力（hotspot）
- Leaflet Searchable Point Map：多地点搜索/筛选
- 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 凶案、侦探与母亲的信（第 2–163 章）"]
n1["ch-0002 坦白、出逃与和解（第 163–233 章）"]
n2["The Curious Incident of the Dog in the Night-Time 人物"]
n3["The Curious Incident of the Dog in the Night-Time（整理完成）"]
n4["The Curious Incident of the Dog in the Night-Time 笔记"]
n5["The Curious Incident of the Dog in the Night-Time 故事线"]
n6["E-Commerce Bench（整理完成）"]
n7["E-Commerce Bench 笔记"]
n8["part-0001 摘要与引言：一年期电商运营基准（Abstract + §1）"]
n9["part-0002 相关工作与定位：continuing 任务谱系（Table 1 + §2）"]
n10["part-0003 基准设计：四层架构与确定性经济（§3 主体）"]
n11["part-0004 实验结果：18 模型的多维画像（Table 2 + §4）"]
n12["part-0005 结论与参考文献（§5 + References）"]
n13["part-0006 工具集与 agent harness：18 工具与上下文管理（Table 3 + Appendix A）"]
n14["part-0007 数据层：类目、店型、日历与供应商（Appendix B）"]
n15["part-0008 经济引擎：13 步结算与需求/退货/成本公式（Table 7 + Appendix C）"]
n16["part-0009 确定性谈判内核：决策函数与骗局目录（Appendix D）"]
n17["part-0010 评测指标定义：六个维度与统计口径（Appendix E）"]
n18["part-0011 每维度结果导览与模型/实验设置（Table 10 + Appendix F）"]
n19["part-0012 失败案例研究：骗局实录与一次破产（Appendix G）"]
n20["part-0013 失败模式规则表与提示词设计（Table 18 + Appendix H）"]
n21["The End of Software Engineering（整理完成）"]
n22["The End of Software Engineering 笔记"]
n23["part-0001 摘要与引言：范式重构的宣告（Abstract + §1 前段）"]
n24["part-0002 第一性原理：传统软件与 Agent 系统的形式化模型（§1 后段 + §2）"]
n25["part-0003 三代交付史与 AI→Software→Result 的失败（§3.1–3.2）"]
n26["part-0004 Agent→Result 与 Agentic Engineering 学科（§3.3 + §4）"]
n27["part-0005 实证证据与 EvoClaw 落差（§5）"]
n28["part-0006 四阶段演进路线图（前段：表 3 + Stage I–III）"]
n29["part-0007 路线图后段与建议：实践者与研究者（§6.3 后段 + §6.4 + §7.1–7.2）"]
n30["ch-0001 Introduction（为什么做数据可视化）"]
n31["ch-0002 选工具讲你的数据故事（Ch 1）"]
n32["ch-0003 强化电子表格技能（Ch 2）"]
n33["ch-0004 找到并质询你的数据（Ch 3）"]
n34["ch-0005 清洗脏数据（Ch 4）"]
n35["ch-0006 做有意义的比较（Ch 5）"]
n36["ch-0007 图表化你的数据（Ch 6）"]
n37["ch-0008 地图化你的数据（Ch 7）"]
n38["ch-0009 表格化你的数据（Ch 8）"]
n39["ch-0010 嵌入网页（Ch 9）"]
n40["ch-0011 用 GitHub 编辑与托管代码（Ch 10）"]
n41["ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"]
n42["ch-0013 Leaflet 地图模板（Ch 12）"]
n43["ch-0014 转换你的地图数据（Ch 13）"]
n44["ch-0015 识别谎言、减少偏差（Ch 14）"]
n45["ch-0016 讲述并展示你的数据故事（Ch 15）"]
n46["ch-0017 附录 A 排查常见问题"]
n47["Hands-On Data Visualization（整理完成）"]
n48["Hands-On Data Visualization 笔记"]
n49["Reading"]
n0 --> n4
n3 --> n0
n3 --> n1
n3 --> n2
n3 --> n4
n3 --> n5
n5 --> n3
n6 --> n7
n6 --> n8
n6 --> n9
n6 --> n10
n6 --> n11
n6 --> n12
n6 --> n13
n6 --> n14
n6 --> n15
n6 --> n16
n6 --> n17
n6 --> n18
n6 --> n19
n6 --> n20
n21 --> n22
n21 --> n23
n21 --> n24
n21 --> n25
n21 --> n26
n21 --> n27
n21 --> n28
n21 --> n29
n22 --> n21
n47 --> n30
n47 --> n31
n47 --> n32
n47 --> n33
n47 --> n34
n47 --> n35
n47 --> n36
n47 --> n37
n47 --> n38
n47 --> n39
n47 --> n40
n47 --> n41
n47 --> n42
n47 --> n43
n47 --> n44
n47 --> n45
n47 --> n46
n47 --> n48
n49 --> n3
n49 --> n6
n49 --> n21
n49 --> n47
click n0 "../../curious-incident/ch-0001/" "ch-0001 凶案、侦探与母亲的信（第 2–163 章）"
click n1 "../../curious-incident/ch-0002/" "ch-0002 坦白、出逃与和解（第 163–233 章）"
click n2 "../../curious-incident/characters/" "The Curious Incident of the Dog in the Night-Time 人物"
click n3 "../../curious-incident/" "The Curious Incident of the Dog in the Night-Time（整理完成）"
click n4 "../../curious-incident/notes/" "The Curious Incident of the Dog in the Night-Time 笔记"
click n5 "../../curious-incident/storyline/" "The Curious Incident of the Dog in the Night-Time 故事线"
click n6 "../../e-commerce-bench/" "E-Commerce Bench（整理完成）"
click n7 "../../e-commerce-bench/notes/" "E-Commerce Bench 笔记"
click n8 "../../e-commerce-bench/part-0001/" "part-0001 摘要与引言：一年期电商运营基准（Abstract + §1）"
click n9 "../../e-commerce-bench/part-0002/" "part-0002 相关工作与定位：continuing 任务谱系（Table 1 + §2）"
click n10 "../../e-commerce-bench/part-0003/" "part-0003 基准设计：四层架构与确定性经济（§3 主体）"
click n11 "../../e-commerce-bench/part-0004/" "part-0004 实验结果：18 模型的多维画像（Table 2 + §4）"
click n12 "../../e-commerce-bench/part-0005/" "part-0005 结论与参考文献（§5 + References）"
click n13 "../../e-commerce-bench/part-0006/" "part-0006 工具集与 agent harness：18 工具与上下文管理（Table 3 + Appendix A）"
click n14 "../../e-commerce-bench/part-0007/" "part-0007 数据层：类目、店型、日历与供应商（Appendix B）"
click n15 "../../e-commerce-bench/part-0008/" "part-0008 经济引擎：13 步结算与需求/退货/成本公式（Table 7 + Appendix C）"
click n16 "../../e-commerce-bench/part-0009/" "part-0009 确定性谈判内核：决策函数与骗局目录（Appendix D）"
click n17 "../../e-commerce-bench/part-0010/" "part-0010 评测指标定义：六个维度与统计口径（Appendix E）"
click n18 "../../e-commerce-bench/part-0011/" "part-0011 每维度结果导览与模型/实验设置（Table 10 + Appendix F）"
click n19 "../../e-commerce-bench/part-0012/" "part-0012 失败案例研究：骗局实录与一次破产（Appendix G）"
click n20 "../../e-commerce-bench/part-0013/" "part-0013 失败模式规则表与提示词设计（Table 18 + Appendix H）"
click n21 "../../end-of-software-engineering/" "The End of Software Engineering（整理完成）"
click n22 "../../end-of-software-engineering/notes/" "The End of Software Engineering 笔记"
click n23 "../../end-of-software-engineering/part-0001/" "part-0001 摘要与引言：范式重构的宣告（Abstract + §1 前段）"
click n24 "../../end-of-software-engineering/part-0002/" "part-0002 第一性原理：传统软件与 Agent 系统的形式化模型（§1 后段 + §2）"
click n25 "../../end-of-software-engineering/part-0003/" "part-0003 三代交付史与 AI→Software→Result 的失败（§3.1–3.2）"
click n26 "../../end-of-software-engineering/part-0004/" "part-0004 Agent→Result 与 Agentic Engineering 学科（§3.3 + §4）"
click n27 "../../end-of-software-engineering/part-0005/" "part-0005 实证证据与 EvoClaw 落差（§5）"
click n28 "../../end-of-software-engineering/part-0006/" "part-0006 四阶段演进路线图（前段：表 3 + Stage I–III）"
click n29 "../../end-of-software-engineering/part-0007/" "part-0007 路线图后段与建议：实践者与研究者（§6.3 后段 + §6.4 + §7.1–7.2）"
click n30 "../ch-0001/" "ch-0001 Introduction（为什么做数据可视化）"
click n31 "../ch-0002/" "ch-0002 选工具讲你的数据故事（Ch 1）"
click n32 "../ch-0003/" "ch-0003 强化电子表格技能（Ch 2）"
click n33 "../ch-0004/" "ch-0004 找到并质询你的数据（Ch 3）"
click n34 "../ch-0005/" "ch-0005 清洗脏数据（Ch 4）"
click n35 "../ch-0006/" "ch-0006 做有意义的比较（Ch 5）"
click n36 "../ch-0007/" "ch-0007 图表化你的数据（Ch 6）"
click n37 "../ch-0008/" "ch-0008 地图化你的数据（Ch 7）"
click n38 "../ch-0009/" "ch-0009 表格化你的数据（Ch 8）"
click n39 "../ch-0010/" "ch-0010 嵌入网页（Ch 9）"
click n40 "../ch-0011/" "ch-0011 用 GitHub 编辑与托管代码（Ch 10）"
click n41 "../ch-0012/" "ch-0012 Chart.js 与 Highcharts 模板（Ch 11）"
click n42 "./" "ch-0013 Leaflet 地图模板（Ch 12）"
click n43 "../ch-0014/" "ch-0014 转换你的地图数据（Ch 13）"
click n44 "../ch-0015/" "ch-0015 识别谎言、减少偏差（Ch 14）"
click n45 "../ch-0016/" "ch-0016 讲述并展示你的数据故事（Ch 15）"
click n46 "../ch-0017/" "ch-0017 附录 A 排查常见问题"
click n47 "../" "Hands-On Data Visualization（整理完成）"
click n48 "../notes/" "Hands-On Data Visualization 笔记"
click n49 "../../" "Reading"