สร้างแผนที่โลกบน HTML5 Canvas หรือ SVG

แนะนำใช้ SVG + Raphael.js

SVG เหมาะกับแผนที่ (Vector, Scalable, Interactive) Canvas เหมาะกับ Pixel-based

เริ่มต้นกับ Raphael.js

var paper = Raphael(10, 50, 320, 200); // สร้าง drawing area
var circle = paper.circle(50, 40, 10); // วาดวงกลม
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

สร้างแผนที่โลก

ใช้ข้อมูล GeoJSON/TopoJSON แปลงเป็น SVG Paths แล้วใช้ Raphael หรือ D3.js วาด

แหล่งข้อมูล: world.geo.json, TopoJSON World Atlas