2

I came across a great tutorial about how to add a styled Google map layer to the QGIS OpenLayers plugin (http://gistncase.blogspot.com/2014/02/how-to-add-google-maps-styled-layer-in.html).

However, it appears that some changes have been implemented on the QGIS/OL side since this was posted and it no long works.

I have sorted out how to have openlayers_plugin.py find and list the new custom layer, but I am unable to get the layer html itself to function properly. (Likely due to my complete lack of experience on the html/java side).

QGIS: 2.10.1-Pisa
OpenLayers: 1.3.6

Tutorial example (that doesn't seem to be working):

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers Google Streets Layer</title>
    <link rel="stylesheet" href="qgis.css" type="text/css">
    <link rel="stylesheet" href="google.css" type="text/css">
    <script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
    <script src="OpenLayers.js"></script>
    <script src="OlOverviewMarker.js"></script>
    <script type="text/javascript">
        var map;
        var loadEnd;
        var oloMarker; // OpenLayer Overview Marker
        function init() {
            map = new OpenLayers.Map('map', {
                theme: null,
                controls: [],
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });

            var stylez = [ { featureType: "all", elementType: "all", stylers: [ { visibility: "simplified" } ] } ];

            var styledMapType = new google.maps.StyledMapType(stylez, styledMapOptions);           

            var gmap = new OpenLayers.Layer.Google(
                "Google Custom", 
                { type: 'styled' }
            );
            map.addLayer(gmap);

            gmap.mapObject.mapTypes.set('styled', styledMapType);
            gmap.mapObject.setMapTypeId('styled');

            loadEnd = false;
            map.events.register('movestart', map, function() {
                loadEnd = false;
            });
            google.maps.event.addListener(gmap.mapObject, "tilesloaded", function() {
                // wait for tiles to fade in completely
                setTimeout(function() {
                  loadEnd = true;
                },
                200);
            });

            map.setCenter(new OpenLayers.LonLat(0, 0), 2);
            oloMarker = new OlOverviewMarker(map, getPathUpper(document.URL) + '/x.png');

        }
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>
6
  1. Drop OpenLayers plugin)

  2. Install QuickMapServices plugin for QGIS

  3. Go to plugin's options and get contributors pack of basemaps. These include some Google ones. Go to ~/.qgis2/QuickMapServices/Contribute/data_sources/google_traff and open metadata.ini in your text editor of choice. We'll use it as a template, in the future you can create a new one.

  4. Go to https://snazzymaps.com/style/65/just-places and use Firebug to extract a link to any tile.

enter image description here

For example: https://mts1.googleapis.com/maps/vt?pb=!1m4!1m3!1i9!2i149!3i192!2m3!1e0!2sm!3i330322375!3m14!2sru-RU!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjN8cy5lOmd8cC52Om9mZixzLnQ6MnxzLmU6Z3xwLnY6b2ZmLHMudDo1fHMuZTpnfHAuYzojZmZmZmZmZmEscy50OjZ8cC5sOjUwLHMudDozfHMuZTpsfHAudjpvZmYscy50OjR8cC52Om9mZixzLnQ6MXxzLmU6Z3xwLmw6NDA!4e0

  1. Modify it adding tile coordinates, note that !1i9!2i149!3i192! is substituted with !1i{z}!2i{y}!3i{x}! this is the only change we make here:

https://mts1.googleapis.com/maps/vt?pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i330322375!3m14!2sru-RU!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjN8cy5lOmd8cC52Om9mZixzLnQ6MnxzLmU6Z3xwLnY6b2ZmLHMudDo1fHMuZTpnfHAuYzojZmZmZmZmZmEscy50OjZ8cC5sOjUwLHMudDozfHMuZTpsfHAudjpvZmYscy50OjR8cC52Om9mZixzLnQ6MXxzLmU6Z3xwLmw6NDA!4e0

  1. Change the link under url= to this link.

Start QGIS and turn on Google Traffic, enjoy, mind Cyrillic on the screenshot, it's my system ;) )

Tested on QGIS 2.12.

enter image description here

1

The above solution, at least at time of writing, is somewhat incorrect. The format to substitute is actually :

!1i{z}!2i{x}!3i{y}!

2i=x and 3i=y. Not sure if the API has changed recently, but that seems to be what it is now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.