CODEWITHSUNDEEP
google-mapsleaflet
BigONotation
BigONotation

Reputation: 4538

How to correctly use google maps static tiles with leaflet

I am trying to use tiles that I have generated with the google maps static API with leaflet (I need to generate some tiles in advance because they will be used offline with no internet connection).

For example, to create a 640x640 tile centred on the Isle of Man at lat/lng (54.217, -4.5373) with a zoom level 8, I am using the following request URL: https://maps.googleapis.com/maps/api/staticmap?center=54.217,-4.5373&zoom=8&size=640x640&maptype=roadmap

The resulting tile is shown below:

enter image description here

Next I want to use this tile with leaflet and add a marker at the center of the tile with the following code:

 <html>
<header>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://localhost/leaflet.js"></script>
  <style>
    #map {height: 640px; width:640px;}
  </style>

</header>

<body>
<div id="map"></div>
<script type="text/javascript">
    $( document ).ready(function() {
      // Handler for .ready() called.
        console.log("document ready!");
      var map = L.map('map').setView([54.217, -4.5373], 8);

      L.tileLayer('http://localhost/staticmap.png', {
        attribution: 'Copyright Google Maps',
        tileSize: 640,
        minZoom:8,
        maxZoom:8,
        continuousWorld: false,
        nonoWrap: false,
      }).addTo(map);
      var marker = L.marker([54.217, -4.5373]).addTo(map);
    });
</script>

</body>
</html>

It seems however that the resulting map is completely "off-centred" as illustrated below (the marker should also be on the isle of man). Not sure what I am doing wrong here:

enter image description here

Any help of this would be greatly appreciated! Thanks!

Upvotes: 2

Views: 5172

Answers (2)

Nicky
Nicky

Reputation: 66

I know this is too late to answer this question. But I want to share my knowledge in this question. For the static purpose you can freely add the google map tiles inside your leaflet. For the static tiles, you can add following code, for street,

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 that difference in the "lyrs" parameter in the URL:

Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;

origin answer: https://gis.stackexchange.com/questions/225098/using-google-maps-static-tiles-with-leaflet

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19069

First, take into account that images from the "static maps API" are not tiles: you can request arbitrary sizes, and there is no trivial scheme to stitch such images back together. Tiles work nice because when one tile ends, another tile begins. Tiles need a grid, much like the one explained in the TMS specification.

Second, as they are not tiles, using a L.TileLayer is not the best way. For a north-oriented image fitting the map's projection scheme, the way to go is using a L.ImageOverlay.

To use an image overlay, you'll need to calculate the bounding box of the image. In your case, we can do that manually as so:

console.log('lat-lng of center:', map.containerPointToLatLng( map.getSize().divideBy(2) ));
console.log('lat-lng of center -320px:', map.containerPointToLatLng( map.getSize().divideBy(2).subtract([320,320]) ));
console.log('lat-lng of center +320px:', map.containerPointToLatLng( map.getSize().divideBy(2).add([320,320]) ));

Once you have the URL for the image overlay and the bounds, add it to the map and it should look like this.

Last, be aware of the terms and conditions for stuff coming from the google maps API, in particular:

10.5.d No caching or storage. You will not pre-fetch, cache, index, or store any Content to be used outside the Service, [...]

Also be aware that other web map platforms don't have those restrictions.

Upvotes: 4

Related Questions