iFarm.nl

Main menu:

filler
facebook

Quizzen
  Films
  Acteurs
  Actrices
  Albums
  Asterix
  Kuifje
  Nederlanders
  Belgen

Stripverhalen
  Asterix
  Guust Flater
  Kleine Robbe
  Lucky Luke
  Paling en Ko
  Smurfentaal
  en meer...

Overige
  Grappige nummerplaten
  Molbeurs
  Tour-de-France-spel
  Wie is de Mol?

Recent gelezen

het geheugenpaleis

basisboek social media

the third screen

Op de boekenplank

Gelezen in 2011

Gelezen in 2010

Gelezen in 2009

Gelezen in 2007

Gelezen in 2005/2006

Doorzoek blog

Feeds

Categorieën

Archieven

december 2014
S M T W T F S
« Jan   Dec »
 123456
78910111213
14151617181920
21222324252627
28293031  

Archief voor december 2014

Drawing on maps with Javascript

20141224

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.