This is a simple HTML-based hexmapping library that makes use of stuQuery. Being created from simple HTML elements, it is easy to style the hexes with CSS. Each hex is accessible via the keyboard too.
As HTML is based on rectangles, we've had to create hexagons using CSS's clip-path. We've simulated a border on each hexagon by nesting two elements and setting the border-color by using background-color on the outer element and border-width by using margin on the inner element.
Make sure to include the relevant CSS and Javascript files in your HTML page:
Let's create a simple hex map. We define the hex map by embedding some HexJSON (that way the raw data is visible if Javascript fails).
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
Let's create a simple hex map but add a visible label to each hex.
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
Now we'll add labels to each hex which have elements that are always visible and elements that only appear when the hex is selected or hovered.
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
Sometimes you might want to make your hex map into a heat map. To do that we send a callback function that returns an object of the form { 'background-color': '#ff0000', 'color': 'black' }
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
As the hexes are created as DOM elements, we can style them with CSS
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
You may want to make your hexes interactive. You can attach callback functions to events such as click, mouseover, mouseout, and focus.
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
You may want to update the content of your hexes.
{
"layout":"odd-r",
"hexes": {
"A":{"n":"Hex a","q":0,"r":0},
"B":{"n":"Hex b","q":0,"r":1},
"C":{"n":"Hex c","q":1,"r":0},
"D":{"n":"Hex d","q":1,"r":1},
"E":{"n":"Hex e","q":2,"r":0},
"F":{"n":"Hex f","q":2,"r":1},
"G":{"n":"Hex g","q":0,"r":2},
"H":{"n":"Hex h","q":1,"r":2},
"I":{"n":"Hex i","q":2,"r":2}
}
}
Some hexes styled like the starting map of a famous board game.
{
"layout":"odd-r",
"hexes": {
"A":{"n":"A","q":0,"r":0,"dice":5,"type":"mountains"},
"B":{"n":"B","q":1,"r":0,"dice":2,"type":"fields"},
"C":{"n":"C","q":2,"r":0,"dice":6,"type":"forest"},
"D":{"n":"D","q":2,"r":1,"dice":3,"type":"mountains"},
"E":{"n":"E","q":3,"r":2,"dice":8,"type":"fields"},
"F":{"n":"F","q":2,"r":3,"dice":10,"type":"pasture"},
"G":{"n":"G","q":2,"r":4,"dice":9,"type":"fields"},
"H":{"n":"H","q":1,"r":4,"dice":12,"type":"pasture"},
"I":{"n":"I","q":0,"r":4,"dice":11,"type":"forest"},
"J":{"n":"J","q":-1,"r":3,"dice":4,"type":"hills"},
"Robber":{"n":"Robber","q":-1,"r":2,"dice":7,"type":"desert"},
"K":{"n":"K","q":-1,"r":1,"dice":8,"type":"hills"},
"L":{"n":"L","q":0,"r":1,"dice":10,"type":"pasture"},
"M":{"n":"M","q":1,"r":1,"dice":9,"type":"pasture"},
"N":{"n":"N","q":2,"r":2,"dice":4,"type":"forest"},
"O":{"n":"O","q":1,"r":3,"dice":5,"type":"hills"},
"P":{"n":"P","q":0,"r":3,"dice":6,"type":"mountains"},
"Q":{"n":"Q","q":0,"r":2,"dice":3,"type":"forest"},
"R":{"n":"R","q":1,"r":2,"dice":11,"type":"fields"}
}
}
Re-creating "The Unification of London: The Need and the Remedy", John Leighton, page 14, 1895 released by the British Library to the Public Domain.
{
"layout":"odd-q",
"hexes": {
"A":{"n":"1a","q":0,"r":2,"label":"Horn
sey","type":"horizontal"},
"B":{"n":"2a","q":1,"r":2,"label":"Hack
ney","type":"horizontal"},
"C":{"n":"3a","q":2,"r":1,"label":"Old
Ford","type":"horizontal"},
"D":{"n":"4a","q":2,"r":0,"label":"Poplar","type":"horizontal"},
"E":{"n":"5a","q":2,"r":-1,"label":"Dept
ford","type":"horizontal"},
"F":{"n":"6a","q":1,"r":-1,"label":"Peck
ham","type":"horizontal"},
"G":{"n":"7a","q":0,"r":-2,"label":"Brix
ton","type":"horizontal"},
"H":{"n":"8a","q":-1,"r":-1,"label":"Batter
sea","type":"horizontal"},
"I":{"n":"9a","q":-2,"r":-1,"label":"Chel
sea","type":"horizontal"},
"J":{"n":"10a","q":-2,"r":0,"label":"Mary Le Bone","type":"horizontal"},
"K":{"n":"11a","q":-2,"r":1,"label":"St John's Wood","type":"horizontal"},
"L":{"n":"12a","q":-1,"r":2,"label":"Kentish Town","type":"horizontal"},
"M":{"n":"1","q":0,"r":1,"label":"Isling·
ton","type":"vertical"},
"N":{"n":"2","q":1,"r":1,"label":"Bethnal Green","type":"vertical"},
"O":{"n":"3","q":1,"r":0,"label":"South·
wark","type":"vertical"},
"P":{"n":"4","q":0,"r":-1,"label":"Kenning·
ton","type":"vertical"},
"Q":{"n":"5","q":-1,"r":0,"label":"Westmin-
ster","type":"vertical"},
"R":{"n":"6","q":-1,"r":1,"label":"St Pan·
cras","type":"vertical"},
"S":{"n":"","q":0,"r":0,"label":"The
City"}
}
}
Sometimes you'd rather have a pre-generated hex map in the page as raw HTML rather than a JSON blob that gets converted. You can do that and attach a hexmap object to the element.