JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Map image url</td>
        <td>
            <Input type='text' id='url' value="http://upload.wikimedia.org/wikipedia/commons/b/bd/Karte_Pomponius_Mela.jpg" />
        </td>
    </tr>
    <tr>
        <td>Result size</td>
        <td>
            <Input type='text' value='600' id='width' />
        </td>
        <td>x
            <Input type='text' value='600' id='height' />
        </td>
    </tr>
    <tr>
        <td>Spacing</td>
        <td>
            <Input type='text' value='30' id='spacing' />
        </td>
    </tr>
    <tr>
        <td>Start numbering at</td>
        <td>
            <Input type='text' value='1' id='start' />
        </td>
    </tr>
    <tr>
        <td>Text colour</td>
        <td>
            <Input type='text' value='black' id='color' />
        </td>
    </tr>
</table>
<a href='javascript:hexer();'>Click me!</a>

<div id='paper' />

JavaScript

// This is the size in pixels
function hexer() {
    document.getElementById('paper').innerHTML = '';
    var width = document.getElementById('width').value,
        height = document.getElementById('height').value;
    var paper = Raphael('paper', width, height);

    // Add an image
    var url = document.getElementById('url').value;
    paper.image(url, 0, 0, width, height);

    // This is the width of a hex in pixels
    var spacing = document.getElementById('spacing').value;
    var counter = document.getElementById('start').value;
    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 + 10, jj * spacing + 10, label)
                .attr({
                fill: document.getElementById('color').value
            });
            counter++;
        }
    }
}