We'll begin by creating a basic vector layer. Start a new page using the sandbox template. We'll use some existing vector data (found in the assets
/data
folder of the sample code that comes with this book) that contains polygons outlining countries of the world and display it in a map:
Add the following code to the
<script>
tag to create our vector layer:var vectorSource = new ol.source.GeoJSON({ projection: 'EPSG:3857', url: '../assets/data/countries.geojson' }); var vectorLayer = new ol.layer.vector({ source: vectorSource });
var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View ({ center: center, zoom: 1, });
Now, create a
map
variable and add the vector layer the same way you would add any other layer:var map = new ol.Map({ target: 'map', layers: [vectorLayer], view: view });
Now load the page in your browser, you should see something like the following screenshot...