I am following the Laravel 12 documentation for rendering JSON but the provided example is not working. If I replace {{ Js::from($map) }} with the copy-and-pasted output of console.log(hexes), it works perfectly. So the correct information is being passed from the backend, but it is not encoded(?) in the way Blade(?) expects it to be.

<script>
const hexes = {{ Js::from($map) }};
console.log(hexes);
var hex = new OI.hexmap(document.getElementById('hexmap'),
{
    'grid': {'show':true},
    'label': {
        'show': true, 
        'clip': true, 
        'format': function(txt,attr) {
            return attr.hex.q + ", " + attr.hex.r;
        }
    },
    'hexjson':{
        "layout":"odd-r",
        "hexes": hexes,
    }
}
);
</script>

I am trying to build a HexJSON object for use by Open Innovations' Hexmap Library. When I run the code in the example the library throws errors like Unexpected value translate(NaN NaN) parsing transform attribute. and Unexpected value NaN NaN NaN NaN parsing viewBox attribute. However, when I hardcode the HexJSON, the library works as advertised.

This is the PHP backend. Adding a value with the key "origin" forces json_encode to treat the array as a dictionary, as expected by HexJSON.

$hexes = Hexagon::orderBy('id', 'asc')->get()->toArray();
$hexes["origin"] = array("q"=>0, "r"=>0);
return view('game', ["map" => json_encode($hexes)]);