7

OpenLayers allows multiple map layers to be hosted on a common platform. If the map application supports a wide variety of maps, say from Google, Yahoo and Microsoft, I find that upon initialization, the APIs from these map providers are loaded as well, regardless of whether I use them or not.

I am not sure if the calls to these third party javascripts count towards the usage quota of these map service providers (seems to be). Besides, there is also an additional delay in loading of the web page.

Having said that, I am looking for a way to put a placeholder in the layer switcher such that I can avoid declaring the third party map layer class and hence avoiding a call to the third party API script.

2 Answers 2

1

I gave it a try and it works quite well. Have a look at http://jsfiddle.net/75L79616/2/ .

Add an event listener for changebaselayer:

map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:3857"),
        strong texteventListeners: {
            "changebaselayer": mapBaseLayerChanged
        }
    });

add an Google-dummy-Layer:

google_layer = new OpenLayers.Layer("Google", {
        isBaseLayer: true,
        displayInLayerSwitcher: true
    });

add these functions for the baseLayer-change-Event:

function click_load() {
    console.log("change");
    if (typeof (google) == "undefined") {

        $.getScript('https://maps.google.com/maps/api/js?v=3.3&sensor=false&callback=google_ready');
    } else {
        console.log("google api already loaded");
    }
}

// callback-function of the Ajax-Request:

function google_ready() {
    // replace Google-layer
    google_layer = new OpenLayers.Layer.Google("Google", {
        isBaseLayer: true
    });
    map.addLayer(google_layer); // add Google-layer
    map.setBaseLayer(google_layer);
    map.layers.splice(1, 1);
    map.layers.splice(map.layers.length - 1, 1);
    map.layers.splice(1, 0, google_layer);
    switcher.redraw();



}


function mapBaseLayerChanged(event) {
    //console.log(event.type + " " + event.layer.name);
    if (event.layer.name == 'Google') {
        click_load();
    }
    }
0

you can list the layers such as Google/OSM/Bing but only create them when users select it. function createOtherAPIs() { var osmLayer = new OpenLayers.Layer.OSM(); } call createOtherAPIs when needed Load OSM Map

even though you see the loading of 3rd party scripts on body load. the tiles are loaded only when you add the layer to map using map.addLayer(osmLayer);

Decouple the ui from the api code. so the user will see an option to load osm layer and will only be activated on a button click or checking a checkbox

3
  • I understand the concept, can you show me the implementation part? For example, how to display a layer switcher containing the Google Map radio option without adding the Google Map layer? Nov 4, 2012 at 13:45
  • well openlayers doesnt provide you with ui modules. you need to use a library like geoExt for such kind of things. see examples geoext.org/examples.html particularly this one api.geoext.org/1.1/examples/layercontainer.html here when you click "Add Layer" only the corresponding map is created(means that 3rd party api call is made)
    – rkm
    Nov 4, 2012 at 16:03
  • This is no different than defining layer first and adding to map. Tiles are only loaded when the layer is selected in layerswitcher. Defining and adding the layer, does not load tiles.
    – neogeomat
    Aug 20, 2013 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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