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
mapvariable 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...