[GIS] Creating a Bing and Google Tile Layer for Leaflet

javascriptleaflet

I want to use the Leaflet Javascript Library to display both a Google and Bing Tile Layer, though I'm unsure how to construct the url. The documentation shows an example using OSM:

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

But for some reason I can't duplicate this for either Bing or Google. Any ideas?

Thanks.

Best Answer

Google Maps

Google Maps forbids such uses. The only allowed access to their content is through their Maps API (see section 10.1 of the ToS).

Bing Maps Web Services

Bing Maps is the only commercial provider I know that allows such uses, through their Web Services feature. You will need an API key, though.

Bing will be a bit annoying to get, since they use quadkeys (an unique index for each tile) instead of {x,y} coordinates (good comparison there). You'll therefore need to create a new L.ILayer implementation that conforms to this URL scheme.

Since you're of course not the first one to have this request ;) , some others have already coded such implementations. One is a pending pull request to the Leaflet repo, the other is directly available as a Gist. Try whichever you prefer, and add your weight to the pull request to make it merged faster :)

Related Solutions

[GIS] Comparing various JavaScript mapping libraries

This question has been converted to Community Wiki and wiki locked because it is an example of a question that seeks a list of answers and appears to be popular enough to protect it from closure. It should be treated as a special case and should not be viewed as the type of question that is encouraged on this, or any Stack Exchange site, but if you wish to contribute more content to it then feel free to do so by editing this answer.

For non-GIS background devs creating single-function mapping apps - I'd probably recommend Leaflet (now supported by MapBox). Easy to use and small. More functionality relies on plugins of varying quality and support.

GIS online type application - use OpenLayers3 - has the full suite of data sources, controls etc. in a single library. It can also be used for simple mapping apps, so if you have a mix then I'd use this for everything.

Google still has the library/data combination (e.g. StreetView is not available anywhere else).

Esri has GUI web app builders, and as noted below, why complicate things if you already use their stack.

Commercial APIs (Google, Bing, Yahoo)

Using any commercial API leaves you at the mercy of whatever changes the provider makes to the API or Terms of Service. What happens for example if suddenly your local government portal that uses Google Maps suddenly has adverts popping up all over it? Want to reuse your JavaScript Google Maps code for an Intranet site? You'll find yourself having to pay the $10,000 licencing fee.

Microsoft often have more defined and fixed terms for their services (if paying) so there may be less of a risk here.

The recent backlash against Twitter is a good example of developers having an API that changed beneath them. If you aren't paying for a service then you (or your system) are the one being sold.

Google started charging for use of their maps from October 2011.

Esri

As others have mentioned if you are using an Esri stack then the ArcGIS API for JavaScript will no doubt work well on top of it. Coming from a GIS background Esri have probably thought more about traditional GIS tasks and features than the "neo-geography" web-giants (though this is just an opinion/feeling).

OpenLayers has built in support for ArcGIS REST layers, and if you are looking to reuse your code for non-ESRI based websites then again an open API serves you best.

Use OpenLayers...

I can't really think why developers would use an API other than OpenLayers. Open Source projects lead to related Open Source projects so there are a wealth of reusable components out there such as the GeoExt library, MapQuery, and GeoPrisma.

I'll just add that just because a project is Open Source does not automatically make it better than commercial equivalents - but the OpenLayers API matches the commercial competition in this case, and the ability to see how the source works, the unit tests, the build scripts etc. mean that you can easily build new features on top of it.

There has been some recent criticism of OpenLayers, mainly related to complexity, styling, and size. There have been counter-arguments made to these here and here by Christopher Schmidt one of the lead developers of OpenLayers.

It is worth noting that if you need a simple Open Source mapping API then take a look at Cloudmade's Leaflet.

The comment smaller, faster, newer, and more straightforward can also be read as less features and less tested.

Scan the API documentation for Leaflet and OpenLayers. The latter includes items such as WFS layers, editing tools, and SLD support. It has also been tested in many different environments, and works in IE6 (allowing government and local authority users).

For simpler display of spatial data Leaflet looks ideal, and easier to get started. However I'll be sticking with OpenLayers for more feature-rich GIS applications.

Caveats

One possible downside is often new innovations are seen first in commercial providers' systems - however these nearly always filter through to OpenLayers in time.

Finally I'm sure there are certain scenarios where other APIs are more suitable - on custom hardware, to fit in with an organisations other IT systems, or if you already know an API inside-out and can get a system developed in half the time.

All the APIs you mentioned are capable of producing great online mapping systems, but your choice should also fit in with you or your company's future development needs.

[GIS] Leaflet: Style function does not work for point layer

In your second code snippet, you're using the style option for L.GeoJSON as if it were an valid option for L.CircleMarker.

Read the documentation carefully again and ask yourself: Does L.CircleMarker use a style option?

A better way would be to calculate styles inside pointToLayer, e.g.:

var layer = L.geoJson(data, {
    pointToLayer: function(feat, ll) {
        var styleForThisFeature = minesStyle(feat);
        var featureForThisPoint = L.circleMarker(ll, styleForThisFeature);
        return featureForThisPoint;
    }
}).addTo(map)