CODEWITHSUNDEEP
google-mapsopenlayers
Paco Valdez
Paco Valdez

Reputation: 1975

OpenLayers layer à la Google Maps ImageMapType

I have this layer with Google Maps: (note the generateAPIKey() function inside the getTileUrl function)

    var options ={
      center:new google.maps.LatLng(somelat,somelon),
      zoom:14,
      disableDefaultUI:true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      minZoom:11,
      maxZoom:16, 
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),options);

    var myLayerOptions = {
      getTileUrl: function(coord, zoom) {
        return 'http://localhost/mylayer/'+zoom+'/'+coord.x+'/'+coord.y+'.png&apikey='+ generateAPIKey();
      },
      tileSize: new google.maps.Size(256, 256),
      isPng: true,
      opacity:1.0
    };
    var myLayerMapType = new google.maps.ImageMapType(myLayerOptions);
    map.overlayMapTypes.insertAt(0, myLayerMapType);

So my main problem is that I have a dynamic API key for the service I'm using, with open layers I've got this:

var mylayer = new OpenLayers.Layer.XYZ(
    "mylayer",
    [
        "http://localhost/mylayer/${z}/${x}/${y}.png&apikey='+ generateAPIKey()
    ], {
        sphericalMercator: true,
        wrapDateLine: true,
        transitionEffect: "resize",
        buffer: 1,
        numZoomLevels: 17
    }
);

var map = new OpenLayers.Map({
    div: "map_canvas",
    layers: [mylayer],
    controls: [
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.Zoom(),
        new OpenLayers.Control.Permalink({anchor: true})
    ],


       center: [somelat,somelon],
        zoom: 14

});

I understand what is wrong, the generateAPIKey function is only executed once. Is there something like the Google getTileUrl?

Upvotes: 0

Views: 901

Answers (1)

igorti
igorti

Reputation: 3856

Yep, XYZ-layer has method getURL that gets called for every tile and looks like this:

    /**
     * Method: getURL
     *
     * Parameters:
     * bounds - {<OpenLayers.Bounds>}
     *
     * Returns:
     * {String} A string with the layer's url and parameters and also the
     *          passed-in bounds and appropriate tile size specified as
     *          parameters
     */
    getURL: function (bounds) {
        var xyz = this.getXYZ(bounds);
        var url = this.url;
        if (OpenLayers.Util.isArray(url)) {
            var s = '' + xyz.x + xyz.y + xyz.z;
            url = this.selectUrl(s, url);
        }

        return OpenLayers.String.format(url, xyz);
    }

Just override this method and append your API key.

Upvotes: 2

Related Questions