[GIS] Openlayers example not working with coordinates

javascriptopenlayers

Hey guys i was just playing around with openlayers 3, and i created THIS fiddle, take a look at the javascript initilization code below:

var styles = [
    'Road',
    'Aerial',
    'AerialWithLabels',
    'collinsBart',
    'ordnanceSurvey'];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
    layers.push(new ol.layer.Tile({
        visible: false,
        preload: Infinity,
        extent: [77.6013, 12.9044, 77.6885, 12.9536],
        source: new ol.source.BingMaps({
            key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
            imagerySet: styles[i]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
        })
    }));
}
var map = new ol.Map({
    layers: layers,
    // Improve user experience by loading tiles while dragging/zooming. Will make
    // zooming choppy on mobile or slow devices.
    loadTilesWhileInteracting: true,
    target: 'map',
    view: new ol.View({
        center: [12.9370699, 77.6244159],
        maxZoom: 20,
        minZoom: 13,
        zoom: 13
    })
});

var select = document.getElementById('layer-select');

function onChange() {
    var style = select.value;
    for (var i = 0, ii = layers.length; i < ii; ++i) {

        console.log(layers[i].get('source').get('') + " " + styles[i]);

        layers[i].setVisible(styles[i] === style);
    }
}

select.addEventListener('change', onChange);
onChange();

I took this code from an online fiddle, all i wanted to do was change the co-ordinates , for the center and extent , so i only changed the below code:

center: [12.9370699, 77.6244159],

and extent

extent: [77.6013, 12.9044,77.6885,12.9536],

Now for the center i got the coordinates from google maps and for the extent i got the co-ordinates from the openlayers maps. Now the problem is the map just does't display , Why ??

Best Answer

The map displays most likely perfectly fine, but you provide the wrong coordinates. The bing map, if I'm not mistaken, uses the web mercartor projection (EPSG:3857), yet you seem to provide geographic coodinates. Try to convert them using

var styles = [
    'Road',
    'Aerial',
    'AerialWithLabels',
    'collinsBart',
    'ordnanceSurvey'
];
var layers = [];
var i, ii;

var coordinate1, coordinate2;
coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]);
coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]);

for (i = 0, ii = styles.length; i < ii; ++i) {
    layers.push(new ol.layer.Tile({
        visible: false,
        preload: Infinity,
        extent:[
            coordinate1[0],
            coordinate1[1],
            coordinate2[0],
            coordinate2[1]
        ],
        myattribute : styles[i],
        source: new ol.source.BingMaps({
            key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
            imagerySet: styles[i]
          // use maxZoom 19 to see stretched tiles instead of the BingMaps
          // "no photos at this zoom level" tiles
          // maxZoom: 19
        })
    }));
}
var map = new ol.Map({
    layers: layers,
    // Improve user experience by loading tiles while dragging/zooming. Will make
    // zooming choppy on mobile or slow devices.
    loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
    center: ol.proj.fromLonLat([77.6244159, 12.9370699]),
    maxZoom: 20, 
    minZoom:13,
    zoom: 13
    })
});

var select = document.getElementById('layer-select');
function onChange() {
    var style = select.value;
    for (var i = 0, ii = layers.length; i < ii; ++i) {
        layers[i].setVisible(styles[i] === style);
        console.log(layers[i].get('myattribute'));
    }
}
select.addEventListener('change', onChange);
onChange();
Related Question