Live data from Hacker News

Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

leafletjs.com

21–30 of 78 posts

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#21
post #5

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

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

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#22
post #5

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

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.

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#24
Leaflet is an amazingly powerful tool. As others have mentioned, it makes it easy to use a variety of sources for the underlying map tiles; in my case I was able to replace the modern-day base map with a map of the Roman Empire for an interactive academic publication[1].

Another great feature that doesn't get as much attention is Leaflet's ability to handle non-geographic images. In the same publication I'm also using it as a general-purpose deep zoom viewer for displaying artifacts[2]. It's great to just use a single library to handle all of this.

Kudos to the Leaflet developers for continuing to improve such a great library!

[1]: http://www.getty.edu/publications/romanmosaics/catalogue/ita... [2]: http://www.getty.edu/publications/romanmosaics/catalogue/1/

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#25
post #5

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

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.

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#27
post #5

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

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.

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#28
post #5

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

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.

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.

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#29
post #2

Works quite well (on iOS), really good work! Here is a small issue I experience on a lot of mobile sites with embedded maps and also on yours: If I zoom the page outside of the map and then scroll so that the map fills the full screen there is no way to zoom out/get away from the map again. You will just scroll and zoom the map and eventually will have to reload the page. It also allows to scroll far out of bounds of…

I believe this is a relatively recent problem caused by mobile safari removing the ability for sites to opt out of pinch zooming (because many sites were ignoring the accessibility importance of allowing users to zoom in).

Re: Leaflet: An open-source JavaScript library for mobile-friendly interactive maps

#30

Leaflet is an amazingly powerful tool. As others have mentioned, it makes it easy to use a variety of sources for the underlying map tiles; in my case I was able to replace the modern-day base map with a map of the Roman Empire for an interactive academic publication[1]. Another great feature that doesn't get as much attention is Leaflet's ability to handle non-geographic images. In the same publication I'm also usin…

Museum tech roll call! I picked up leaflet for the same purpose and it's worked great - http://collections.artsmia.org/art/1218/olive-trees-vincent-...

The Rijksmuseum "Rijksstudio" site has been around for a few years and adopted leaflet very early on for image viewing: https://www.rijksmuseum.nl/en/rijksstudio/artists/rembrandt-...

Perhaps of interest to this sub-thread is "IIIF" (the international image interoperability framework), an attempt to standardize access to images (and collections of images) with a JSON(-LD) metadata model: http://iiif.io/

Post reply on HN