openlayers-3 Getting started with openlayers-3
Remarks
This section provides an overview of what openlayers-3 is, and why a developer might want to use it.
It should also mention any large subjects within openlayers-3, and link out to the related topics. Since the Documentation for openlayers-3 is new, you may need to create initial versions of those related topics.
Example using Bing Maps
var baseLayer = new ol.layer.Tile({
visible: true,
preload: Infinity,
source: new ol.source.BingMaps({
// We need a key to get the layer from the provider.
// Sign in with Bing Maps and you will get your key (for free)
key: 'Ap9VqFbJYRNkatdxt3KyzfJxXN_9GlfABRyX3k_JsQTkMQLfK_-AzDyJHI5nojyP',
imagerySet: 'Aerial', // or 'Road', 'AerialWithLabels', etc.
// use maxZoom 19 to see stretched tiles instead of the Bing Maps
// "no photos at this zoom level" tiles
maxZoom: 19
})
});
var map = new ol.Map({
layers: [baseLayer],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 2
})
});
Getting started with a simple map
<html>
<head>
<title>Getting started</title>
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fol3%2F3.17.1%2Fol.css%26quot%3B%2520type%3D%26quot%3Btext%2Fcss%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fol3%2F3.17.1%2Fol.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%26lt%3Bdiv%2520id%3D%26quot%3Bmap%26quot%3B%2520class%3D%26quot%3Bmap%26quot%3B%26gt%3B%26lt%3B%2Fdiv%26gt%3B%2520%2520%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2520%2520var%2520baseLayer%3D%2520new%2520ol.layer.Tile(%257B%2520%2F%2Fa%2520Tile%2520layer%2520is%2520a%2520the%2520background%2520layer%2520for%2520the%2520map%2520%2520%2520%2520%2520%2520%2520%2520%2F%2F%2520here%2520we%2520choose%2520an%2520OpenStreetMap%2520base%2520layer%2520%2520%2520%2520%2520%2520%2520%2520source%3A%2520new%2520ol.source.OSM(%257B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520url%3A"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({ // we create our map
layers: [baseLayer], // and add the layers to it ( in our case we only have one)
target: 'map', // the div element that will serve as a map
controls: ol.control.defaults({ // we leave the map controls to default
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({ // we define the initial view of the map
center: ol.proj.fromLonLat([0, 0]), //the default projection is the spherical mercator (meter units) so we get coordinates of the center by degrees
zoom: 2 // the initial zoom level
})
});
</script>
</body>
</html>
Installation or Setup
OpenLayers 3 or as it is referred OL-3 is a Javascript Library for web mapping, so in order to use it you'll need to add it in your html:
-
first add the ol.css file to use the map styling of OL-3 :
-
then add the ol.js file :
you can also download OL-3 from the official site www.openlayers.org and call the files in the html by changing the src and href
setting up OL-3
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fopenlayers.org%2Fen%2Fv3.17.1%2Fcss%2Fol.css%26quot%3B%2520type%3D%26quot%3Btext%2Fcss%26quot%3B%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fopenlayers.org%2Fen%2Fv3.17.1%2Fbuild%2Fol.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> 
