We'll start with an example that shows off most of the basic style properties. We'll start with a new HTML page setup the same way we usually start off.
Make a copy of our
sandbox
template and add the standard setup for a map to the main<script>
tag:var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ center: center, zoom: 1 }); var map = new ol.Map({ target: 'map', view: view });
In this example, we'll be purely using vector layers. No need for rasters here! Go ahead and create a vector layer for countries, then add it to the map:
var countries = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: '../assets/data/countries.geojson' }) }); var map = new ol.Map({ target: 'map', layers: [countries], view: view });
Load the HTML file to your browser to see the basic styling that OpenLayers provides:
Make it a bit more interesting by adding another vector layer, time...