How to create a web-map with OpenLayers

What is OpenLayers?

OpenLayers is a JavaScript library that makes it relatively easy to visualize geodata in web applications (Web-GIS).

OpenLayers is a programming interface that allows client-side development independent of the server. Map tiles, vector data and markers from various data sources can be displayed.

Open Layers was developed to promote the use of geodata Of all kinds. OpenLayers is also free, open-source and is published under "2-clause BSD License".

To be able to create a map with OpenLayers, all you need is a basic general knowledge of programming languages. The missing pieces of the puzzle can be found very easily using the detailed documentation on OpenLayers.

Create HTML file

First of all, an HTML file is required as the basic framework. The basic structure usually looks like this:



OpenLayers Demo





You can now copy this code and paste it into a file that you name, for example, "jsmap.html".

If you want to learn more about HTML, you can find a few useful tutorials on w3schools.

Insert OpenLayers Javascript library

Now the OpenLayers Javascript is integrated into the HTML. You copy for that



between and . You can do that right away

function init() {
map = new OpenLayers.Map("basicMap"); //create a new map
var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
map.addLayer(mapnik); //add the OSM layer to the map

var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
map.addLayer(markers); //add the markers layer to the current map

var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
.transform( //transform the location to the coordinate system of our OpenLayers map
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
}

also included in script tags. Here a function with the name init is created, the

which creates the map and inserts it in the element "basicMap"

created a layer with OpenStreetMap data and added it to the map

creates a layer for markers and also adds this to the map

Defined a marker in WGS84 and then transformed it from WGS1984 to Spherical Mercator Projection

add this marker to the map

and finally centered the map on this marker and set a zoom level.

Now this function must also be loaded and the card placed. For that you are replacing now




with





With javascript onload =" init ();the function is executed when loading the HTML file and inserted via the idid = "basicMap".

Your complete file should now look like this:



OpenLayers Demo


function init() {
map = new OpenLayers.Map("basicMap"); //create a new map
var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
map.addLayer(mapnik); //add the OSM layer to the map

var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
map.addLayer(markers); //add the markers layer to the current map

var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
.transform( //transform the location to the coordinate system of our OpenLayers map
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15
}







If you save the file and open it, you will end up in the browser of your choice and your Javascript web map will be displayed with OpenLayers.

If you now want to change the position of the marker, all you have to do is change the coordinates.

Create markers with a 'for .. of ..' loop

Normally, you often want to display several points and not just one on the map. In theory you could

var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84
.transform( //transform the location to the coordinate system of our OpenLayers map
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer

now copy for each additional marker you want to create and simply change the coordinates. But since the whole thing becomes relatively confusing, we will solve it differently.

First, we create an array of arrays.

var poi = [ // create array with point of interests
[ 11.557617 ,48.092757 ],
[ 8.558350, 50.028917 ],
[ 6.701660, 51.289406 ],
[ 13.337402, 52.496160 ]
];

All coordinates for the markers to be displayed are now stored in this array. Now we create a function that can be called to create markers and add them to the map.

function createmarker (lon,lat) {
var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
.transform( //transform the location to the coordinate system of our OpenLayers map
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
}

This function should now be carried out for each pair of coordinates in the "poi" array. This can be solved with a "for .. of" loop.

for (var x of poi) { // for each array(object) in array
createmarker (x[0],x[1]) // create markers
}

In this loop, a marker is now created for each coordinate pair in the array, transformed and added to the map. The "poi" array can now be expanded as required and the additional markers are automatically added to the map.

Add markers via UI

In order to make the whole thing more user-friendly and not having to change the code manually every time, we are now creating a simple user interface to add additional markers.

The new coordinates should be entered via two input fields and created with a confirmation on a button.

The HTML framework can look like this and should be placed somewhere in the "body" area:



Add new markers with coordinates in WGS84!


Latitude:







Longitude:





Add marker!





The most important here are the ids via which the values of the fields are later adopted.

To create these markers we use a function that is called every time the button "Add Marker!" is clicked.

The complete function looks like this:

function addFeature() {
var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
poi.push(newFeature) // add NewFeature to array "poi"

createmarker (lon,lat) // create marker for input lat, lon
document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
}

var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
var lon = parseFloat(document.getElementById("lon").value);

Are references to the elements with the ID "lat" and "lon", ie the two input fields. Here the two variables "lat" and "lon" are created, to which the value from the input fields is assigned.

Then they are merged into an array, since a marker always consists of two coordinates and is added to the "poi" array.

var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
poi.push(newFeature) // add NewFeature to array "poi"

Adding it to the "poi" array is not functionally necessary, but it can be useful if, for example, you want to create popovers that show the coordinates of each marker.

The coordinates are now saved in "lat" and "lon" and they only have to be transferred to the previously created function "createmarker", which creates the markers and adds them to the map.

createmarker (lon,lat) // create marker for input lat, lon

It would be nice if the user received feedback about what happened after clicking the button. This can be done with

document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker

The last thing that is missing is that the function is executed with a click on the button.

document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked

As soon as the button with the id "add_marker" is clicked, the "addFeature" function is now executed.

With

var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer

the extent of the "markers" layer is determined, zoomed onto it and assigned to the variable extent.

If you now save and open your file again, you should see your map with all markers and be able to add additional markers via a graphical user interface.



OpenLayers Demo


function init() {
map = new OpenLayers.Map("basicMap"); //create a new map
var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview
map.addLayer(mapnik); //add the OSM layer to the map

var markers = new OpenLayers.Layer.Markers( "Markers" ); //add a layer where markers can be put
map.addLayer(markers); //add the markers layer to the current map

function createmarker (lon,lat) {
var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points
.transform( //transform the location to the coordinate system of our OpenLayers map
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer
}

var poi = [ // create array with point of interests
[ 11.557617 ,48.092757 ],
[ 8.558350, 50.028917 ],
[ 6.701660, 51.289406 ],
[ 13.337402, 52.496160 ]
];

for (var x of poi) { // for each array(object) in array
createmarker (x[0],x[1]) // create markers
}

var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer

function addFeature() {
var lat = parseFloat(document.getElementById("lat").value); // get value of input lat and parse to float
var lon = parseFloat(document.getElementById("lon").value); // get value of input lon and parse to float

var newFeature = [ lon, lat ] // create array "newFeature" with lon , lat
poi.push(newFeature) // add NewFeature to array "poi"

createmarker (lon,lat) // create marker for input lat, lon
document.getElementById('poi_added').innerHTML = "Added marker for " + "latitude: " + lat + "; longitude: " + lon; // visual feedback for added marker
}

document.getElementById('add_marker').addEventListener('click', addFeature); // execute function "addFeature" when button with id "add_marjer" is clicked
}

// popover coordinates markers


/*dein style*/







Add new markers with coordinates in WGS84!


Latitude:







Longitude:





Add marker!







