Widget HTML Atas

The Kobe Bryant Leaflet Map


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

The regal dots on the map dot his successful shots as well as the yellowish dots present his misses. You tin mouse-over whatsoever of the dots on the map to discovery out which game it was made in, the distance as well as the engagement of the game.

I tell the map is rattling clever, as well as it is, nonetheless creating your ain simplified version of the map would survive relatively simple. The LA Times map was made amongst CartoDB as well as Leaflet.js. To practise this sort of map inwards Leaflet you lot only bespeak to gear upwardly an empty map sail (with no base of operations map). You tin hence practise your court, pitch. playing champaign (or whatever) yesteryear drawing polylines on your empty map canvas. You tin hence purpose map markers to dot the put where shots, champaign goals etc were made from. Marker pop-ups tin hence survive used to furnish information on private shots or goals.

If you lot accept to a greater extent than or less sports information that you lot desire to map the major business would survive inwards transferring the co-ordinate organization to operate amongst an interactive Leaflet map.

To present how tardily this sort of map is I spent xxx minutes creating this soccer example. I speedily sketched out 1 cease of a soccer pitch using polylines as well as added markers to present the put of a dyad of free-kick goals scored yesteryear Dimitri Payet of West Ham United.

I haven't quite added equally many points equally the 30,699 shots inwards the Kobe Bryant map. However I mean value you lot tin run across from my map how you lot could purpose Leaflet.js inwards this rather uncomplicated means to practise a rattling cracking visualization of sport data.