Here, we'll create some features programmatically, without any file importing. Follow these instructions to find out how this is done:

Although we've created some random features for this recipe, features in mapping applications would normally represent some phenomenon of the real world with an appropriate geometry and style associated with it.

Let's go over the programmatic feature creation and how it is added to a vector layer:

var point = new ol.Feature({
  geometry: new ol.geom.Point([-606604, 3228700])
});

Features are instances of ol.Feature. This constructor contains many useful methods, such as clone, setGeometry, getStyle, and others. When creating an instance of ol.Feature, we must either pass in a geometry of type ol.geom.Geometry, or an object containing properties. We demonstrate both variations throughout this recipe.

For the point feature, we pass in a configuration object. The only property that we supply is geometry. There are other properties available, such as style, and the use of custom properties to set the feature attributes ourselves, which come with getters and setters.

The geometry instance belongs to ol.geom.Point. The ol.geom class provides a variety of other feature types that we don't get to see in this recipe, such as MultiLineString and MultiPoint. The point geometry type simply requires an ol.Coordinate type array (xy coordinates).

var circle = new ol.Feature(
  new ol.geom.Circle([-391357, 4774562], 9e5)
);

The circle feature follows almost the same structure as the point feature. This time, however, we don't pass in a configuration object to ol.Feature, but instead, we directly instantiate an ol.geom.Geometry type of Circle. The constructor takes an array of coordinates and a second parameter for the radius. 9e5 or 9e+5 is exponential notation for 900,000.

The circle geometry also has useful methods, such as getCenter, and setRadius.

var line = new ol.Feature(
  new ol.geom.LineString([
    [-371789, 6711782], [1624133, 4539747]
  ])
);

The only noticeable difference with the LineString feature is that ol.geom.LineString expects an array of coordinate arrays. For more advanced line strings, use the ol.geom.MultiLineString geometry type (more information can be found in the OpenLayers API documentation at http://openlayers.org/en/v3.13.0/apidoc/).

The LineString feature also has useful methods, such as getLength.

var polygon = new ol.Feature(
  new ol.geom.Polygon([[
    [606604, 4285365], [1506726, 3933143],
    [1252344, 3248267], [195678, 3248267]
  ]])
);

The final feature, a Polygon geometry type, differs slightly from the LineString feature in that it expects an ol.Coordinate type array within an array within another wrapping array. This is because the constructor (ol.geom.Polygon) expects an array of rings, with each ring being represented as an array of coordinates. Ideally, each ring should be closed.

The polygon feature also has useful methods, such as getArea, and getLinearRing.

map.addLayer(new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [point, circle, line, polygon]
  })
}));

Finally, we create the vector layer with a vector source instance and add all four features to an array and pass it to the features property.

All the features that we've created are subclasses of ol.geom.SimpleGeometry. This class provides useful base methods, such as getExtent and getFirstCoordinate.

All features have a getType method that can be used to identify the type of feature, for example, 'Point', or 'LineString'.

Sometimes, the polygon features may represent a region with a hole in it. To create a hollow part of a polygon, we use the LinearRing geometry. The outcome is best explained with the following screenshot:

You can see that the polygon has a section cut out of it. To achieve this geometry, we must create the polygon in a slightly different way. Here are the steps:

We won't break this logic down any further, as it's quite self-explanatory now that we're comfortable with geometry creation.