JSFiddle - React, Tailwind, and code Playground

by tmcw

HTML

<canvas id='map'></canvas>

CSS

body {
    overflow:hidden;
}

JavaScript

function draw() {
    var canvas = document.getElementById('map');
    canvas.width = 640;
    canvas.height = 360;
    var ctx = canvas.getContext('2d');
    places.forEach(function(place) {
        ctx.rect(
            // turn a longitude value into a screen
            // pixel: the left side of the page is 0, not
            // 180, so add 180 to the value and then
            // scale up by 2 to make the drawing 640px
            // wide
            (~~place[0] + 180) * 2,
            // turn a latitude value into a screen
            // pixel. unlike pixels, latitude ranges
            // from high values on the top to low on the bottom
            // doing 90 - lat flips them.
            (90 - ~~place[1]) * 2, 4, 4);
    });
    ctx.fill();
}

// Big cities in the world, as longitude, latitude pairs
// These are from Natural Earth data.
var places =...