I have the following script for render an OpenLayer3 map into a div in my web The map is showed on the web when de user click on a button.

function traza_mapa() {
    function clearTheDiv() 
        document.getElementById("map").innerHTML = "";

    var myVista = new ol.View({
           center: ol.proj.fromLonLat([-30,50],'EPSG:3857', 'EPSG:4326'),
           zoom: 4,

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
          view: myVista,
          controls: new ol.control.defaults({
            zoom: true,
            attribution: false,
        map.addControl(new ol.control.ZoomSlider()); 

I would like to show a track as a layer. The vertex positions are obtained from a array [[lon1,lat1],[lon2, lat2]]..................]

How can I include the array as as layer into the map ?


One way to do it would be to add an empty vector layer to your map, and then create a function to add a feature to the map from your co-ordinates

Add feature manually to a vector layer in ol3

has details on adding features, the relavent code being:

var vectorSource = new ol.source.Vector({});

To make a vector source for your new layer. Then add this object to your map (add the following to the layers array in your map declaration):

 new ol.layer.Vector({
      source: vectorSource

And then modify this code to add your points to each feature you want to add (the example uses a transform that you may or may not need)

var thing = new ol.geom.Polygon( [[
ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
vectorSource.addFeature( featurething );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.