The terrain and heightmap data is extracted using this tool: https://github.com/FrankTheBoxMonster/LoL-NGRID-converter.

League of Legends' vision/pathfinding grid uses a cell size of 50 in-game units, which leads to noticeably discrete behavior in certain actions (such as getting caught on the sharp edges of the terrain when using dashes that cannot cross terrain).

The transparent walls (and impassable grass) exist to make it harder to abuse the coarseness of the terrain map to hide around sharp corners (see image below).

The raster map image is created by programmatically capturing screenshots from a replay using League Director (https://github.com/RiotGames/leaguedirector) with an extremely low FOV (0.01) to approximate an orthographic projection (while maintaining the default 56 degree camera angle). The screenshots are then stitched together to create the final image.

The terrain grid does not appear square because of the viewing angle and the non-constant heightmap (see skillshot calculator). The terrain and heightmap grid are projected onto the raster map image such that they intersect at the heightmap height. Lower height values lead to lower visual locations.

The non-constant heightmap leads to the infamous behavior of skillshots across elevation changes (particularly the river). The skillshot indicator is linear in visual/projected space, but the skillshot hit detection follows a linear path in the terrain grid (see image below). The skillshot will cross the target location, but may take a non-linear visual path. Some skillshot effects will appear linear in visual space (e.g. Jhin W, Morgana Q) while others (mostly global abilities) will move up and down to follow the heightmap (e.g. Jinx R, Ashe R).

The interactive map itself is powered by OpenLayers: https://openlayers.org.