5 ms·
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 ma
by kh_hk 10y ago
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 https://citybik.es
- deanclatworthy 10y agoI'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.
- kh_hk 10y agoMy 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 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 http://leafletjs.com/reference.html#divicon
- CalRobert 10y agoPretty neat - are your numbers for bikes taken/bikes left live or just estimations based on averages?
- kh_hk 10y agoHey, 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.
- leonatan 10y agoOn 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.
- Doctor_Fegg 10y agoOpenStreetMap.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.
- kh_hk 10y agoAs 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.
- socmag 10y agoReally cool, love it! Is there an open data feed for this stuff then? I love open data, there is so much available now.
- kh_hk 10y agoWe do offer an API through https://api.citybik.es 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 https://github.com/eskerda/pybikes/tree/master/pybikes/data
- socmag 10y agoOh 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!
- socmag 10y agoReally cool, love it! Is there an open data feed for this stuff then? I love open data, there is so much available now.