In this short tutorial, I will demonstrate how you can draw geometrical figures on maps with Javascript. It took me a lot of effort to figure this out so I thought I should write it down so others could achieve this more easily. If you are in a hurry, you can skip the tutorial and just download the working code that produced the image above.
The goal is to draw a point and a polygon on a map with Javascript. For this purpose we will use the maps provided by OpenStreetMap. Our shapes will be drawn on layers from OpenLayers. We use OpenLayers version 3.0.0. You will need two extra files to get everything working: the base Javascript code of OpenLayers: ol.js (local copy) and the OpenLayers style file ol.css (local copy). Store these in the same directory as the other files of this tutorial.
First we need to create a web page on which the map will be shown:
<!DOCTYPE html>
<html>
<head>
<title>Map with drawings</title>
<link rel="stylesheet" href="ol.css" type="text/css">
<script type="text/javascript" src="ol.js"></script>
<script type="text/javascript" src="myscript.js" defer="defer">
</script>
</head>
<body>
<div id="mapid" style="width:400px; height:225px;"></div>
</body>
</html>
This web file loads three other files: the style file and code from OpenLayers and our own code (see below). Furthermore, it defines an environment in which the map will be drawn (the div with id mapid).
Next, we need code for drawing a base map:
// list containing the different layers of map data
var layers = [];
// create a layer with map data from OpenStreetMap
var OSMbase = new ol.layer.Tile({ source: new ol.source.OSM() })
// add the OpenStreetMap layer to the list of layers
layers.push(OSMbase);
// draw the map with the layers
var map = new ol.Map({
layers: layers,
target: 'mapid', // the id of the html environment for the map
// the definition of the map controls
// these also need the style file ol.css
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
// center and zoom level of the map
view: new ol.View({
center: ol.proj.transform([4.898330,52.367321],
'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});
We create a layer with data from OpenStreetMap and draw the layer on the web page. For that purpose, we need to define the longitude and latitude of the center point of the map. In order to put the point on the right position on the map, its coordinates need to be transformed to another coordinate system (command transform). We also need to specify how far we want to zoom in on the map.
Next we will put a point on the map.
// define a layer with a point
var point = [4.649855,52.367321]; // longitude,latitude
var pointFeatures = new ol.Feature({
// ol.geom.Point requires single point
geometry: new ol.geom.Point(point)
.transform('EPSG:4326', 'EPSG:3857')
});
var pointSource = new ol.source.Vector({ features: [pointFeatures] });
var pointStyle = new ol.style.Style({
image: new ol.style.Circle({
// point fill color and radius
fill: new ol.style.Fill({color: 'red'}),
radius: 5
})
});
var pointLayer = new ol.layer.Vector({
source: pointSource,
style: pointStyle
});
layers.push(pointLayer);
For the red point we need to specify its position (longitude and latitude), its radius and its color. The location needs to be transformed to the coordinate system of the map. After all the paramaters have been processed and combined, we have a new layer with a single point. This new layer can be added to our list of layers.
Now we can add a polygon to the map:
// define a layer with a polygon
var polygon = [ [5.033004,52.346782], [5.072143,52.387860],
[5.111281,52.346782] ];
var polygonFeatures = new ol.Feature({
// ol.geom.Polygon requires list of polygons
geometry: new ol.geom.Polygon([polygon])
.transform('EPSG:4326', 'EPSG:3857')
});
var polygonSource = new ol.source.Vector({ features:
[ polygonFeatures ] });
var polygonStyle = new ol.style.Style({
// polygon fill color, line color and line width
// rgba parameters: red(0-255), green(0-255), blue(0-255),
// transparancy(0-1)
fill: new ol.style.Fill({ color: 'rgba(0,0,255,0.2)' }),
stroke: new ol.style.Stroke({ color: 'black', width: 1 })
});
var polygonLayer = new ol.layer.Vector({
source: polygonSource,
style: polygonStyle
});
layers.push(polygonLayer);
The polygon is a blue triangle of which we specify the three corner points. These need to be transformed and combined with a fill color and a color and width of the boundary line. In this example the fill color has been been defined with three RGB values and a fourth value which indicates how transparent the polygon is. All the data is combined in a layer containing the polygon.
That’s it! This is the code you need to draw a point and a polygon on a map. An image of the result appears below the title of the post: a base map centered at Amsterdam with a red point to the left and a blue triangle to the right. You can also download the full script or all files used in this tutorial. Good luck with adapting the code to your wishes.
Sinds augustus 2015 maak ik selfies op treinstations om bij te houden waar ik ben geweest. Inmiddels heb ik er meer dan 60. Daarbij zitten de 16 drukste stations van Nederland (nummer 17 is Tilburg) maar ook stations waar weinig mensen komen, zoals Geerdijk. Voor dit station ben ik speciaal een keertje omgereisd naar Overijssel omdat het volgend jaar gesloten gaat worden. Dus dan kunnen we er niet meer naartoe reizen. 
Vandaag was er in de media aandacht voor mijn Twitteronderzoek. Het begon met een artikel in de Volkskrant over sentimentsanalyse van Nederlandstalige tweets. Naar aanleiding van het artikel heb ik daarna drie korte radio-interviews gegeven (Radio1, RTV Noord-Holland en RTV Emmen). Tenslotte werd het onderzoek ook besproken in het programma RTL Late Night (van Humberto Tan) in het item van Luuk Ikink.
op Netflix zodat ik ze via de homepagina gemakkelijk kan terugvinden.
Gisteren was ik bij de oratie van Antal van den Bosch in Nijmegen. Het gebeurt niet vaak dat ik bij zo’n lezing ben waarbij een hoogleraar zijn ambt aanvaardt en dit was zeker de eerste keer dat het iemand betrof die dat voor de tweede keer deed. Van den Bosch had namelijk al in 2008 een oratie gegeven in Tilburg: