JSFiddle - React, Tailwind, and code Playground

JavaScript

// This is the size in pixels
var width = 600, height = 600;
var paper = Raphael(10, 50, width, height);

// Add an image
var url = "http://www.bigmapblog.com/maps/map03/ICEWyubhGQXLsvrr.jpg"
paper.image(url,0,0,width,height);

// This is the width of a hex in pixels
var spacing = 30;
var counter = 0;
for (var ii = 0; ii < width / spacing; ii++){
    for (var jj = 0; jj < height / spacing; jj++){
        // on every other row, offset it to make a hex
        var offset = jj % 2 ? spacing / 2 : 0;
        // this is the text to put in the hex
        var label;
        //label = ii + ":" + jj; // this is the x:y
        label = counter; // this is the number-from-zero 
        paper.text(ii * spacing + offset, jj * spacing, label)
          .attr({fill: "black"});
        counter++;
    }
}