0

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 ??

2

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();
| improve this answer | |
  • see with these coordinates it works just fine .. jsfiddle.net/gu7omhnf/2 . – Alexander Solonik Nov 24 '15 at 9:01
  • I checked it and got it working, see here [link]jsfiddle.net/gu7omhnf/2 – werkuh Nov 24 '15 at 10:29
  • I accidentally swapped the coordinates, this is the correct fiddle jsfiddle.net/gu7omhnf/5 , please ignore the first – werkuh Nov 24 '15 at 10:44
  • the fiddle does't work – Alexander Solonik Nov 24 '15 at 10:53
  • I checked it again (three times actually), it now definately works. jsfiddle.net/gu7omhnf/6 Seems to be not my day... sorry for the inconvenience. Edit: Sometimes it works, sometimes, not. Maybe JSFiddle has issues? Code should definately be working. – werkuh Nov 24 '15 at 11:04

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.