OpenLayers is a powerful JavaScript tool that enables us to create and display all sorts of maps on a website. This article will guide you in adding a point and a line string feature, then transform their projections to use coordinates, then add some colour by setting the layer’s style.

Please note that you need to have a working OpenLayers map installed in a webpage to follow this article. If you don’t have one, see How to Make a Map Using OpenLayers 3.

Part1

Adding Point and Line String Features

  1. Image titled 7062783 1
    1

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

    var point_feature = new ol.Feature({ });
    
  2. Image titled 7062783 2
    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 [longitude (E-W), latitude (N-S)]. The following code creates this and set’s the point’s geometry:

    var point_geom = new ol.geom.Point(
      [20, 20]
    );
    point_feature.setGeometry(point_geom);
    
  3. Image titled 7062783 3
    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(
        [[10, 20], [20, 10], [30, 20]]
      )
    });
    
  4. Image titled 7062783 4
    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: [point_feature, linestring_feature]
      })
    })
    map.addLayer(vector_layer);
    

    Part2

Transforming the features’ geometries to use coordinates.

As with any powerful mapping software, OpenLayers maps can have different layers with different ways of displaying information. Because Earth is a globe and not flat, when we try to display it on our flat maps, the software has to adjust the locations to match the flat map. These different ways to display map information are called projections. To use a vector layer and a tile layer together on the same map means we have to transform the layers from one projection to another.

  1. Image titled 7062783 5
    1

    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
    ];
    
  2. Image titled 7062783 6
    2

    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);
      );
    }
    
  3. Image titled 7062783 7
    3

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

    features.forEach(transform_geometry);
    

    Part3

Setting the vector layer’s style.

To change what each feature on the map looks like, we need to create and apply a style. Styles can change colours, sizes, and other attributes of points and lines, and they can also display images for each point, which is very handy for customised maps. This section isn’t necessary, but it is fun and useful.

  1. Image titled 7062783 8
    1

    Create the fill and stoke. 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: [180, 0, 0, 0.3]
    });
     
    var stroke = new ol.style.Stroke({
      color: [180, 0, 0, 1],
      width: 1
    });
    
  2. Image titled 7062783 9
    2

    Create the style and apply it to the layer. 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);
    
  3. Image titled 7062783 10
    3

    Check out the finished map.