3

I am trying to change my tile URL in OpenLayers-3.

I made this Fiddle, with the code:

var map;
var icons = [];

var source = new ol.source.OSM();
map = new ol.Map({
    layers: [
    new ol.layer.Tile({source: source}),
    new ol.layer.Vector({      
        source: new ol.source.Vector({features:icons})
    })],
    renderer: "canvas",
    target: 'map',
    view: new ol.View2D({
        zoom: 11
    })
});

// Change map source URL dynamically
// This line gives error in console:
// Resource interpreted as Image but transferred with MIME type text/html:
source.setUrl('http://a.tile.openstreetmap.org/');

map.getView().setCenter(transform(5, 52));

function transform(lng, lat) {
    return ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857');
}

The code breaks on the line:

source.setUrl('http://a.tile.openstreetmap.org/');

It gives a message in the console (Chrome: Ctrl + shift + j):

Resource interpreted as Image but transferred with MIME type text/html:

Any solutions?

4

Solved the problem, I had tu use ol.source.XYZ instead of ol.source.OSM()

And later you can change map url by: source.setUrl();

ol.source.OSM();

Fiddle

Source: HTML:

<div id="map" class="map"></div>
<div id="output"></div>

JAVASCRIPT:

var map;
var icons = [];

var source = new ol.source.XYZ({
    url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png' });
map = new ol.Map({
    layers: [
    new ol.layer.Tile({source: source}),
    new ol.layer.Vector({      
        source: new ol.source.Vector({features:icons})
    })],
    renderer: "canvas",
    target: 'map',
    view: new ol.View2D({
        zoom: 11
    })
});

// Change to other xyz url..
source.setUrl('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg');

map.getView().setCenter(transform(5, 52));
mapOffline();
function transform(lng, lat) {
    return ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857');
}

function mapOffline() {
    map = new ol.Map({
    layers: [
    new ol.layer.Tile({source: source}),
    new ol.layer.Vector({      
        source: new ol.source.Vector({features:icons})
    })],
    renderer: "canvas",
    target: 'map',
    view: new ol.View2D({
        zoom: 11
    })
});

}

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.