Leaflet Map API with Google Satellite Layer

Question

I'm very interested in the Leaflet Map API.

However, I need to be able to use the Google Satellite Layer. I have not been able to find an example on how to add a Google Satellite Layer to Leaflet. I understand that I will still need to load the Google Maps API to do this (OpenLayers has an example).

Solution 1

Leaflet has an official page for publishing all available plugins: http://leafletjs.com/plugins.html

You will find plugins there for adding Google layers support to Leaflet.

Solution 2

You don't need a plugin or the Google API, you can add it as a XYZ tile layer.

Streets

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Hybrid:

googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Satellite:

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Terrain

googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});


Note the difference in the "lyrs" parameter in the URL:
Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;

Solution 3

There's a third-party plugin for it: Demo: http://psha.org.ru/leaflet/bel.html (switch to Google Maps with the switcher) Source: http://psha.org.ru/leaflet/Google.js

Solution 4

this repository contains few tile layers google and other and very useful other plugins: https://github.com/shramov/leaflet-plugins

Solution 5

Google title layer with Traffic

var googleTraffic = L.tileLayer('https://{s}.google.com/vt/lyrs=m@221097413,traffic&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        minZoom: 2,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    });

Please see their General Terms

Hope someone helps this

View more solutions

Comments

[nickdos]

demo is broken for me

[Titsjmen]

Is it possible to change the projection of googleSat? Or where can I find the projection of googleSat?

[William Walseth]

Thanks, this is a really great approach, much better than adding in more plugins.

[33v]

Thanks this is good. In fact its so good it made me laugh at all the plugins I've been loading. Thank you so much for sharing.

[rr1g0]

Is there a way to add google's traffic layer on top of it?

[capie69]

Don't think it is possible to add Google Traffic. Apparently there is no direct access to the raw traffic data and the TOS prohibits it.

[Adam]

Its maybe worth mentioning that the Terms of Use from Google forbid any means of tile access other than through the Google Maps API.

[Andi]

Hey @Adam, do you mind linking to where that's stated in the ToS? I can't find it.

[tempranova]

@Andi, developers.google.com/maps/terms check out section 10.4e.

[dca]

demo displays nothing for me

[SymbolixAU]

@rr1g0 - you can add traffic onto a Google Map using my googleway package

[fnllc]

For Leaflet 1.0 use: gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant

[Elton Santos]

A doubt, its free this plugin google maps? I have a project with Leaflet and need this. Can I use freely?

[Tim Autin]

@Adam It was more section 10.5.c I think. And I guess it will be Section 3.2.4.a in the new ToS (cloud.google.com/maps-platform/terms), but it's a bit unclear.

[Adam]

@TimAutin I actually did not write that comment, but after reading the ToS I am pretty sure its 10.4e. But maybe also notable that MapBox.com is a very good alternative to Google after they raised the prices.

[Tim Autin]

@Adam oh sorry, thought it was you. Note that 10.4.e is talking about "Maps API implementation" ("Maps" in uppercase), not "a mapping API". I think they're talking about Google Maps API only here. To me that sentence means that with the Google Maps API, you can't show Google traffic data (for instance) above an OSM map. But it doesn't matter, in the end it's clearly forbidden to display a Google Map in another API, unless you have Google's written consent (like OpenLayers have).

[Rafi Ullah Patel]

@capie69 roadmap is possible?

[prusswan]

@TimAutin The relevant clause in the current ToS seems to be: [3.2.4] (e) No Use With Non-Google Maps. Customer will not use the Google Maps Core Services in a Customer Application that contains a non-Google map. For example, Customer will not (i) display Places listings on a non-Google map, or (ii) display Street View imagery and non-Google maps in the same Customer Application.

[prusswan]

A liberal interpretation would be that it is okay to use the XYZ tile urls since they are public (no key needed, so you don't even need a Google account)

[Derek]

You cannot use ESRI layers without a license - see downloads2.esri.com/ArcGISOnline/docs/tou_summary.pdf

[Mohammed Sohail Ebrahim]

is this allowed without a license or subscription?

[Rahul Mahadik]

@MohammedSohailEbrahim Please go through their General Terms. otherwise Mapbox is also good option.

[Mohammed Sohail Ebrahim]

is there anything that sticks out? @rahul