How to Add Vector Features to an OpenLayers 3 Map

Step-by-Step Guide

1. 1

   Step 1: Create a point feature.

   Simply copy the following line of code into your <script></script> element:. var point_feature = new ol.Feature({ });
2. 2

   Step 2: Set the point's geometry.

   To tell OpenLayers where to place the point, you need to create a geometry and give it a set of coordinates, which is an array in the form of .
   
   The following code creates this and set's the point's geometry: var point_geom = new ol.geom.Point( ); point_feature.setGeometry(point_geom)
3. 3

   Step 3: Create a line string feature.

   Line strings are straight lines broken into segments.
   
   We create them just like points, but we provide a pair of coordinates for each point of the line string: var linestring_feature = new ol.Feature({ geometry: new ol.geom.LineString( , , ] ) })
4. 4

   Step 4: Add the features to a vector layer.

   To add the features to the map, you need to add them to a source, which you add to a vector layer, which you can then add to the map: var vector_layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: }) }) map.addLayer(vector_layer)
5. 5

   Step 5: Put the features into an array.

   We start by putting the features we want to transform together into an array that we can iterative through. var features = [ point_feature, linestring_feature ]
6. 6

   Step 6: Write the transform function.

   In OpenLayers, we can use the transform() function on the geometry object of each feature.
   
   Put this transform code into a function that we can call later: function transform_geometry(element) { var current_projection = new ol.proj.Projection({code: "EPSG:4326"}); var new_projection = tile_layer.getSource().getProjection(); element.getGeometry().transform(current_projection, new_projection); ); } , Now simply iterate through the array. features.forEach(transform_geometry)
7. 7

   Step 7: Call the transform function on the features.

   Create a fill style object and a semi-transparent red colour, and a stroke (line) style that is a solid red line: var fill = new ol.style.Fill({ color: }); var stroke = new ol.style.Stroke({ color: , width: 1 })
8. 8

   Step 8: Create the fill and stoke.

   The OpenLayers style object is quite powerful, but we're only going to set the fill and stroke for now: var style = new ol.style.Style({ image: new ol.style.Circle({ fill: fill, stroke: stroke, radius: 8 }), fill: fill, stroke: stroke }); vector_layer.setStyle(style)
9. 9

   Step 9: Create the style and apply it to the layer.

10. 10

    Step 10: Check out the finished map.

Detailed Guide

About the Author