
Testing web map APIs – Google vs OpenLayers vs Leaflet - edward
http://robinlovelace.net/software/2014/03/05/webmap-test.html
======
twp
OpenLayers 3 dev here.

All these mapping libraries are great.

Google Maps comes with great data. Leaflet has a really nice API. OpenLayers 3
comes with loads of functionality built in.

Please check out our OpenLayers 3 examples at
[http://ol3js.org/en/master/examples/](http://ol3js.org/en/master/examples/)

Interesting ones include:

Full screen rotate and zoom: [http://ol3js.org/en/master/examples/full-screen-
drag-rotate-...](http://ol3js.org/en/master/examples/full-screen-drag-rotate-
and-zoom.html)

Animation:
[http://ol3js.org/en/master/examples/animation.html](http://ol3js.org/en/master/examples/animation.html)

60fps heatmaps: [http://ol3js.org/en/master/examples/heatmap-
earthquakes.html](http://ol3js.org/en/master/examples/heatmap-
earthquakes.html)

High quality KML rendering:
[http://ol3js.org/en/master/examples/kml.html](http://ol3js.org/en/master/examples/kml.html)

Detailed geometries:
[http://ol3js.org/en/master/examples/igc.html](http://ol3js.org/en/master/examples/igc.html)

Canvas effects: [http://ol3js.org/en/master/examples/layer-
spy.html](http://ol3js.org/en/master/examples/layer-spy.html)

Canvas, DOM and WebGL renders: [http://ol3js.org/en/master/examples/side-by-
side.html](http://ol3js.org/en/master/examples/side-by-side.html)

Full application with OpenLayers 3, Angular and Bootstrap:
[http://map.geo.admin.ch/](http://map.geo.admin.ch/)

~~~
1wheel
Nice! Suggestion on the animation 'Fly to Bern' \- change how far the map
zooms out depending on how far it needs to move.

[http://bl.ocks.org/mbostock/6301872](http://bl.ocks.org/mbostock/6301872)

[http://www.win.tue.nl/~vanwijk/zoompan.pdf](http://www.win.tue.nl/~vanwijk/zoompan.pdf)

~~~
twp
Thanks! This is a really nice algorithm. We should be able to add it to ol3.

------
mejackreed
I would like to add that @mourner, Leaflet creator, gave a great talk last
week in San Francisco about why he started Leaflet and how the open source
community developed around it. Talk is here
([http://www.youtube.com/watch?v=bQAl43Aj_B0&feature=youtu.be](http://www.youtube.com/watch?v=bQAl43Aj_B0&feature=youtu.be)).

One thing that I think is missing from this article is the communities around
these projects and release cycles. Leaflet by far has the most active
community around it. Where Open Layers 3 has been chugging along without a
release for a while, and Google Maps API has remained pretty stagnant. A great
post from Keir Clarke ([http://googlemapsmania.blogspot.com/2014/01/the-slow-
death-o...](http://googlemapsmania.blogspot.com/2014/01/the-slow-death-of-
google-maps-api.html)) that is spot on.

------
molecule
_> Google maps also has a surprising range of functionalities, although you
are pretty much restricted to Google's way of doing things (you cannot, for
example change the background map to be based on Open Street Map)._

the parenthetical is incorrect, _cf._

\-
[http://wiki.openstreetmap.org/wiki/Google_Maps_Example#Examp...](http://wiki.openstreetmap.org/wiki/Google_Maps_Example#Example_-
_Using_Google_Maps_API_v3_setting_OSM_as_a_base_map_layer)

\-
[http://harrywood.co.uk/maps/examples/mapstractionv1/google-o...](http://harrywood.co.uk/maps/examples/mapstractionv1/google-
openstreetmap.html)

------
molecule
_> OpenLayers has a very wide range of functions, and it pays the price in
terms of size, occupying almost 1 Mb of digital space: not ideal for mobile
applications._

The stock minified OpenLayers.mobile.js weighs in @ ~377kB:
[http://openlayers.org/dev/OpenLayers.mobile.js](http://openlayers.org/dev/OpenLayers.mobile.js)

And you can build your own OpenLayers files that contain only what you need:
[https://github.com/openlayers/openlayers/tree/master/build](https://github.com/openlayers/openlayers/tree/master/build)

( _eg._ is your mobile application _really_ going to use OSM _and_ Bing base
layers? probably not, so don't ship all of that to the user's browser and
spare the browser from parsing the cruft.
[https://github.com/openlayers/openlayers/blob/master/build/m...](https://github.com/openlayers/openlayers/blob/master/build/mobile.cfg)
)

------
accounttaken
Interesting article. We use Google Maps to lay out a list of Manufacturers for
hardware companies
([http://protoexchange.com/#!/directory)-](http://protoexchange.com/#!/directory\)-)
we use Google's API + Angular.

This article might have us reconsider OpenLayer!

~~~
hnriot
that's a really funky url - /#!/directory)-

is that due to some framework you're using?

~~~
accounttaken
framework :)

------
camus2
And Bing?

