Hacker News Reader

Comment by kh_hk | Hacker News Reader

In my experience the best thing about Leaflet is the possibility of using CSS to style, transform and animate markers.

Shameless plug, see for instance this map using css 'explosions': https://citybik.es

I'm not so sure this is a great reference. On a brand new iPhone 6S with pretty much nothing else open, the performance of scrolling that map is terrible.

My bad, the site does not degrade correctly to mobile devices. There's a nasty hack for hijacking focus on the map in order to keep it as a hero and being able to scroll down that has not been tested enough. Also note this is keeping a websocket connection open and receives streaming data for changes.

Maybe a direct map works better https://citybik.es/map/citi-bike-nyc

In any case, I just wanted to show how markers with 'DivIcon' [1] as they are called in leaflet can be used to create cool looking marker styling without resorting to images / svg / canvas.

[1]: http://leafletjs.com/reference.html#divicon

On an iPhone 7 Plus, the maps on citybik.es looks terribly pixilated. I am getting a feel that either openstreetmaps does not properly support retina tiles, or no one actually bothers to use them. Not sure which is worse.

OpenStreetMap.org's tileservers don't supply retina tiles. But OSM's tileservers are effectively a tech demo and a resource for mappers, not a user-facing service. If you're building a consumer-grade product, you're expected either to use OSM data to render your own tiles, or use a third-party provider which provides tiles based on OSM data (such as Thunderforest, Geofabrik or Mapbox). Leaflet, as the client-side JS part of your mapping solution, can happily show retina tiles from such a provider or your own tileserver.

As a note, these are not OSM tiles but mapbox. Last I checked I couldn't use vector tiles from mapbox using upstream leaflet, so decided against it for now until I find a better solution.

Pretty neat - are your numbers for bikes taken/bikes left live or just estimations based on averages?

Hey, thanks!

The numbers are real, although the timing might not be. There's an endpoint diffing our data by the minute and distributing the changes over that minute to give it the real-ish impression. A green explosion means somebody took a bike from an station, and a red one means somebody left one.

From experience working with these endpoints, data is reliable at around a window of 5 minutes.

Really cool, love it!

Is there an open data feed for this stuff then? I love open data, there is so much available now.

We do offer an API through https://api.citybik.es with as many feeds as we can gather. Note though that no more than 10% of the feeds on citybikes are what one would consider 'open data'.

If you are interested in the actual sources, these are available on the data files that compose pybikes[1]

[1]: https://github.com/eskerda/pybikes/tree/master/pybikes/data

Oh that's good to hear. No, I'm not doing anything with cycling right now, and looks like you pretty much have it covered, but always nice to know good data-sets. Thanks!

Reply on news.ycombinator.com