OpenLayers 3 i OpenStreetMap

 

A continuació es desglossa el codi font de la nostra pàgina web. Primer de tot, cal fer una crida a la llibreria JavaScript OpenLayers 3 i els seus estils:

 

							<script src="http://openlayers.org/en/latest/build/ol.js"></script>
							<link rel="stylesheet" href="http://openlayers.org/en/latest/css/ol.css" type="text/css">
						
 

Crearem un <DIV> a la pàgina amb el nom 'map' i amb les dimensions que volguem on hi inserirem el mapa:

 

							<div id="map"  style="width: 980px; height: 400px"></div>
						
 

I finalment, crearem amb JavaScript un objecte map, que es contindrà dins el tag "map" del body, amb les capes d'OpenStreetMap. També indiquem la vista a partir de les les coordenades inicials i el nivell de zoom:

 

						<script type="text/javascript">
							  var map = new ol.Map({
								target: 'map',
								layers: [
								  new ol.layer.Tile({
									source: new ol.source.OSM()
								  })
								],
								view: new ol.View({
								  center: ol.proj.fromLonLat([4, 40]),
								  zoom: 12
								})
							  });
						</script>
						
 

I aquí teniu el codi agrupat:

 

						<html>
						<head>
							<script src="http://openlayers.org/en/latest/build/ol.js"></script>
							<link rel="stylesheet" href="http://openlayers.org/en/latest/css/ol.css" type="text/css">
						</head> 

						<body > 
							<div id="map"  style="width: 100%; height: 100%;"></div>
</body> <script type="text/javascript"> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([4, 40]), zoom: 12 }) }); </script> </html>