The Kobe Bryant Leaflet Map

The Los Angeles Times has created a very clever interactive map visualizing Every Shot Kobe Bryant Ever Took. The map allows you to explore all 30,699 shots made by Kobe Brynt in his long career.

The purple dots on the map indicate his successful shots and the yellow dots show his misses. You can mouse-over any of the dots on the map to find out which game it was made in, the distance and the date of the game.

I say the map is very clever, and it is, however creating your own simplified version of the map would be relatively simple. The LA Times map was made with CartoDB and Leaflet.js. To create this kind of map in Leaflet you just need to set up an empty map canvas (with no base map). You can then create your court, pitch. playing field (or whatever) by drawing polylines on your empty map canvas. You can then use map markers to indicate the position where shots, field goals etc were made from. Marker pop-ups can then be used to provide information on individual shots or goals.

If you have some sports data that you want to map the major task would be in transferring the co-ordinate system to work with an interactive Leaflet map.

To show how easy this kind of map is I spent 30 minutes creating this soccer example. I quickly sketched out one end of a soccer pitch using polylines and added markers to show the position of a couple of free-kick goals scored by Dimitri Payet of West Ham United.

I haven't quite added as many points as the 30,699 shots in the Kobe Bryant map. However I think you can see from my map how you could use Leaflet.js in this rather simple way to create a very neat visualization of sport data.