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 // 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.get('source').get('') + " " + styles); layers.setVisible(styles === 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 ??
أكثر...
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 // 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.get('source').get('') + " " + styles); layers.setVisible(styles === 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 ??
أكثر...