World Map on HTML5 Canvas or SVG

Creating interactive world maps in web browsers can be accomplished using SVG with libraries like Raphael.js or using HTML5 Canvas. This tutorial demonstrates both approaches for rendering world maps.

Using SVG with Raphael.js

Raphael.js is a JavaScript library that simplifies working with vector graphics in web browsers. Here's how to get started:

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="world-map"></div>

<script>
// Create Raphael paper (canvas)
var paper = Raphael("world-map", 800, 400);

// Drawing basic shapes for map elements
var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

// Create a simple country shape using path
var country = paper.path("M100,100 L200,100 L200,150 L100,150 Z");
country.attr({
    "fill": "#4CAF50",
    "stroke": "#333",
    "stroke-width": 2
});

// Add interactivity
country.hover(
    function() {
        this.attr("fill", "#FF9800");
    },
    function() {
        this.attr("fill", "#4CAF50");
    }
);
</script>

HTML5 Canvas Approach

Canvas provides pixel-based rendering which can be more efficient for complex maps:

<canvas id="mapCanvas" width="800" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
var canvas = document.getElementById('mapCanvas');
var ctx = canvas.getContext('2d');

// Draw a simple country shape
ctx.fillStyle = '#4CAF50';
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 150);
ctx.lineTo(100, 150);
ctx.closePath();
ctx.fill();
ctx.stroke();

// Add country label
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
ctx.fillText('Country Name', 110, 130);
</script>

Creating a World Map with GeoJSON

For accurate world maps, use GeoJSON data with SVG paths:

// Load world map data (simplified example)
var worldData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {"name": "Country"},
            "geometry": {
                "type": "Polygon",
                "coordinates": [/* coordinate array */]
            }
        }
    ]
};

// Convert GeoJSON to SVG paths
function createWorldMap(data) {
    var paper = Raphael("map-container", 900, 500);
    
    data.features.forEach(function(feature) {
        var path = convertToSVGPath(feature.geometry.coordinates);
        var country = paper.path(path);
        
        country.attr({
            "fill": "#e0e0e0",
            "stroke": "#fff",
            "stroke-width": 1
        });
        
        // Add country name tooltip
        country.hover(function() {
            console.log(feature.properties.name);
        });
    });
}

Comparison of Approaches

Key Features to Implement

• Zoom and Pan: Allow users to navigate the map
• Hover Effects: Highlight countries on mouse over
• Click Events: Show country information on click
• Color Coding: Visualize data using different colors
• Tooltips: Display country names and statistics

Conclusion

Choose SVG with Raphael.js for interactive, scalable world maps with easy event handling. Use Canvas for performance-critical applications with complex visualizations. Both approaches can create engaging world map experiences.