62

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).

fnllc
  • 3,047
  • 4
  • 25
  • 42

6 Answers6

198

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;
Gedeon Mutshipayi
  • 2,871
  • 3
  • 21
  • 42
capie69
  • 2,200
  • 1
  • 12
  • 5
  • Is it possible to change the projection of googleSat? Or where can I find the projection of googleSat? – Titsjmen Dec 21 '15 at 10:42
  • Is there a way to add google's traffic layer on top of it? – rr1g0 Apr 29 '16 at 23:02
  • 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. – capie69 May 03 '16 at 07:37
  • 28
    Its maybe worth mentioning that the Terms of Use from Google forbid any means of tile access other than through the Google Maps API. – Adam Jun 05 '16 at 11:36
  • Hey @Adam, do you mind linking to where that's stated in the ToS? I can't find it. – Andi Oct 21 '16 at 20:33
  • 2
    @Andi, https://developers.google.com/maps/terms check out section 10.4e. – tempranova Jan 15 '17 at 00:49
  • @rr1g0 - you can add traffic onto a Google Map using my [googleway package](https://github.com/SymbolixAU/googleway/blob/master/vignettes/googleway-vignette.Rmd#google-maps) – SymbolixAU Jun 21 '17 at 23:29
  • 1
    A doubt, its free this plugin google maps? I have a project with Leaflet and need this. Can I use freely? – Elton Santos Nov 27 '17 at 22:26
  • @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. – Tim Autin Jul 04 '18 at 00:11
  • @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. – Adam Jul 04 '18 at 06:12
  • @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). – Tim Autin Jul 04 '18 at 11:26
  • @capie69 roadmap is possible? – Rafi Ullah Patel Jun 10 '19 at 07:11
  • 2
    @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 Oct 14 '19 at 05:00
  • 1
    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) – prusswan Oct 14 '19 at 05:04
10

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

Mourner
  • 3,171
  • 24
  • 21
7

Alternative to Google Maps API for satellite layer: Leaflet.js with Esri World Imagery tiles

<script>

    var map = L.map('map').setView([-41.2858, 174.78682], 14);

    var mapLink = '<a href="http://www.esri.com/">Esri</a>';
    var wholink = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';

    L.tileLayer(
        'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '&copy; '+mapLink+', '+wholink,
        maxZoom: 18,
        }).addTo(map);

</script>
Bruno De Freitas Barros
  • 2,199
  • 2
  • 17
  • 16
  • 1
    You cannot use ESRI layers without a license - see http://downloads2.esri.com/ArcGISOnline/docs/tou_summary.pdf – Derek Oct 30 '19 at 07:59
6

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

stefcud
  • 2,220
  • 4
  • 27
  • 37
5

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.

Etienne Desgagné
  • 3,102
  • 1
  • 29
  • 36
4

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

Rahul Mahadik
  • 11,668
  • 6
  • 41
  • 54