How to Add Vector Features to an OpenLayers 3 Map

OpenLayers is a powerful JavaScript tool that allows us to create and display all types of maps on a website. It is available for free from the Apache Software Foundation. This article will walk you through the steps of adding a point and a line string feature, transforming their projections to use coordinates, and finally adding some colour by changing the style of the layer.

Please keep in mind that in order to follow along with this article, you must have a functional OpenLayers map installed in a webpage. If you don’t already have one, see How to Create a Map Using OpenLayers 3 for more information.

Part 1 Adding Point and Line String Features

1. Create a point feature. Simply copy the following line of code into your <script></script> element:. 

var point_feature = new ol.Feature({ });

2. Set the geometry of the point. In order to instruct OpenLayers where to place the point, you must first create a geometry and then provide it with a set of coordinates, which is an array in the form of [longitude (E-W), latitude (N-S). This is created by the following code, which also sets the geometry of the point:

var point_geom = new ol.geom.Point(

  [20, 20]

);

point_feature.setGeometry(point_geom);

3. Create a feature that allows you to create line strings. Line strings are straight lines that have been segmented into smaller segments. As with points, we create line strings by providing a pair of coordinates for each point on the line string. For example:

var linestring_feature = new ol.Feature({

  geometry: new ol.geom.LineString(

    [[10, 20], [20, 10], [30, 20]]

  )

});

4. Create a vector layer and place the features on it. If you want to include certain features on the map, you must first include them in a source, which you then include in a vector layer, which you can then include on the map:

var vector_layer = new ol.layer.Vector({

  source: new ol.source.Vector({

    features: [point_feature, linestring_feature]

  })

})

map.addLayer(vector_layer);

Part 2 Transforming the Features’ Geometries to Use Coordinates

As with any powerful mapping software, OpenLayers maps can contain multiple layers, each of which can display information in a variety of different ways. Earth is a globe, not a flat surface, and as such when we try to display it on our flat maps, the software must adjust the locations to match the flat map’s boundaries. Projection is the term used to describe the various ways in which map information can be displayed. To use a vector layer and a tile layer on the same map, we must first transform the layers from one projection to another, which takes some time.

1. Put the features into an array and call it done. We begin by grouping together the characteristics we want to transform into an array that we can iteratively process through.

var features = [

  point_feature, 

  linestring_feature

];

2. Create the transform function from scratch. In OpenLayers, we can transform the geometry object of each feature by calling the transform() function on the geometry object. Organize the following 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);

  );

}

3. Call the transform function on the features. Now simply iterate through the array. 

features.forEach(transform_geometry);

Part 3 Setting the Vector Layer’s Style

To change the appearance of each feature on the map, we must first create and then apply a style to it. In addition to allowing you to change the colours, sizes, and other attributes of points and lines, styles also allow you to display images for each point, which is extremely useful for creating custom maps. This section is not required, but it is entertaining and useful.

1. Fill in the gaps and stoke the fire. Create a fill style object with a semi-transparent red colour, as well as a stroke (line) style with a solid red line, as shown in the example:

var fill = new ol.style.Fill({

  color: [180, 0, 0, 0.3]

});

var stroke = new ol.style.Stroke({

  color: [180, 0, 0, 1],

  width: 1

});

2. Create a style and apply it to the layer you’re working on. Although the OpenLayers style object is extremely powerful, we’ll only be setting the fill and stroke for the time being:

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);

Creative Commons License

Visit for: |  Auto  |  Games  |  Health  |  How To  |  Latest Review  |  News  |  Sports   |  Tech  |  Outsourcing  |