# tutorial: visualize a line with openlayers

For an upcoming project I was curious about visualizing a line layer using OpenLayers. Therefore I digitized a way with googlemaps. After creating a kml with “my places” in googlemaps I exported the coordinates to libre office calc and converted them to fit the needed code in OpenLayers:

```new OpenLayers.Geometry.Point(-5.106282, 56.820473 ),
```

This will be the basis for our ongoing tutorial.
First off all: keep in mind that you will need a good basemap for displaying vectors especially routes/ways. Therefore I will add a googlemap basemap and as a comparison an OpenStreetMap WMS using this:

```var google = new OpenLayers.Layer.Google(
);
var osm = new OpenLayers.Layer.OSM();
```

Now we have two variables called google and osm to represent our basemap.

As you may know, a line vector is build up by so called vertices and each of them is a point for itself. So instead of adding multiple points we need to create a list of points (minimal example):

```var points = new Array(
new OpenLayers.Geometry.Point(-5.094953, 56.825886),
new OpenLayers.Geometry.Point(-5.093430, 56.826069),
new OpenLayers.Geometry.Point(-5.089990, 56.827290)
)
```

That’s where the Excel-file comes into play ðŸ˜‰
And you need something like a container for all the points which is another variable called vector whith the label “trip”:

```var vector = new OpenLayers.Layer.Vector("trip", {style: sm});
```

You may have noticed the `{style: sm}` which is unknown. So you need to define a style for line beforehand. The style will be blue (#0000ff) with a width of 5 and only 50% opacity:

```var sm = {strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5 };
```

Now there is a another problem. The coordinates given by googlemaps are WGS 84 coordinates which corresponds to EPSG:4326. Googlemaps as well as OSM operates on the Spherical Mercator Projection EPSG:900913. Of course you can reproject your locations. We combine that with adding the points to our container:

```vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")))]);
```

And lets do the last steps as you have seen them already. The last step sets the zoom extent with new coordinates and the zoom level (10 in this case):

```//Add the google map layers
// Add a layer switcher control
// Zoom the map to the max extent
map.setCenter(new OpenLayers.LonLat(-5.08,56.82).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 10);
```

Let us have a look:

You can download the whole html file HERE. There is a little additional text embedded in the html as it adds a workaround to get away with annoying pop-ups.