Main menu:


Doorzoek blog




december 2014
« Jan   Dec »

Drawing on maps with Javascript


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>
  <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">
  <div id="mapid" style="width:400px; height:225px;"></div>

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

// 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

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

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.