open layers LineString not working

Question

Sorry to bother you guys, but I'm stuck with his problem for half a day.

I want to draw poly line in OpenLayers using LineString object, so I've copied the example from documentation. It runs ok but i can't see the line on the screen

Code looks like this

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    <script type="text/javascript"  src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> 

  <script type="text/javascript">    

var map;
var lineLayer ;
var points;
var style;

var polygonFeature
  function test()
  {
    lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 
    style = { strokeColor: '#0000ff', 
                strokeOpacity: 1,
                strokeWidth: 10
    };

    map.addLayer(lineLayer);                    

    points = new Array();
    points[0] =new OpenLayers.LonLat(-2.460181,27.333984 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
    points[1] = new OpenLayers.LonLat(-3.864255,-22.5 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;   
    var linear_ring = new OpenLayers.Geometry.LinearRing(points);
    polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linear_ring]), null, style);
    lineLayer.addFeatures([polygonFeature]);
    alert("1");

  }

  function initialize() 
  {    
      map = new OpenLayers.Map ("map_canvas", {
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 19,
            units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
          });

        // Define the map layer
        // Here we use a predefined layer that will be kept up to date with URL changes
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
      var lonLat = new OpenLayers.LonLat(0, 0).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        map.zoomTo(3);
        map.setCenter(lonLat, 19);  

    test();
  }

  </script>
    </head>

    <body onload="initialize()" >

    <div id="map_canvas" style="width: 828px; height: 698px"></div>  
  </body>

</html>

I'm sure I'm missing some parameter in creation of map or something but I really can't figure which one.

score 3 · Accepted Answer · edited May 23 '17 at 12:21

You forget 's' character in this line:

lineLayer.addFeatures([lineFeature]);

Function 'addFeature' doesn't exist: OpenLayers.Layer.Vector.addFeatures

To see the feature, hold Shift key on your keyboard and try to draw a box

EDIT: Ok, now I know how did you want.

You need to create one OpenLayers.Point object for each point you have in your DB. One solution is to use and Ajax call to your own PHP function to retrieve them. The PHP file includes code to get them. I recommend to return them in JSON format (pherhaps an string). Using JQuery framework:

$.ajax({
   url: 'your_php_file.php',
   dataType: JSON // for example, you can use 'string' type too
   success: function(coordinates){

   }
});

Now you have a lot of coordinates from your DB. It's time to draw your polygon. Following link can be useful

OpenLayers - how do I draw a Polygon from existing lonLat points?

I hope it helps you. Happy codding!

EDIT2:

linear_ring is an object belongs to OpenLayers.Geometry.LinearRing class. The constructor needs an array of OpenLayers.Geometry.Points and you was giving it OpenLayers.LonLat array.

You need to modify this adding this line after each point creation (modifying the index according to you own code):

points[0] = new OpenLayers.Geometry.Point(points[0].lon,points[0].lat);

So your test function looks like this:

function test(){
      lineLayer = new OpenLayers.Layer.Vector("Line Layer");
      style = { strokeColor: '#0000ff',
         strokeOpacity: 1,
         strokeWidth: 10
      };

      points = new Array();

      points[0] =new OpenLayers.LonLat(-2.460181,27.333984 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
      points[0] = new OpenLayers.Geometry.Point(points[0].lon,points[0].lat);

      points[1] = new OpenLayers.LonLat(-3.864255,-22.5 ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());;
      points[1] = new OpenLayers.Geometry.Point(points[1].lon,points[1].lat);

      var linear_ring = new OpenLayers.Geometry.LinearRing(points);
      polygonFeature = new OpenLayers.Feature.Vector(
         new OpenLayers.Geometry.Polygon([linear_ring]), null, style);
         lineLayer.addFeatures([polygonFeature]);

      map.addLayer(lineLayer);

 }

The result is this: Image result

Hi.Thanks for response.It was stupid of me not to check syntax. I did it now.Still i cant see a line.Ive tried to hold shift and draw a rectangle, but it just zooms on the area i choose,no line can be seing. May be i dont quite understand functionality. I need to draw a poly line from my program, not by clicking on the map.Is it possible? — AlexS, Feb 18 '11 at 09:15
@AlexS Don't worry, just try to adapt the following example to your own code. It's easy. If you need help, I can help you http://www.openlayers.org/dev/examples/draw-feature.html — Fran Verona, Feb 18 '11 at 14:44
Hi Fran.Thanks for your help.Perhaps we dont understand each other. I saw draw feature example. It works ok. But its not doing what i need to be done. I have array of points in DB storage which i want to represent as a polyline on the map. I don't need to draw them by clicking on the map.Can i do this with OpenLayers API? Can you send me example of script that does that? Thanks. — AlexS, Feb 20 '11 at 10:01
Ok ive edited my code to be similar to code you provided in you last post.Still no luck. — AlexS, Feb 20 '11 at 15:23
Can you please copy paste it into txt file ,change extension to HTML run it on your PC and tell me if it works for you.Thanks — AlexS, Feb 20 '11 at 15:24

score 0 · Answer 2 · answered Jan 05 '12 at 23:10

Yes, OpenLayers can programatically draw lines. Its even fast enough to draw new lines multiple times a second so you can show live data or animations. Anyway, you have a lot of stuff going on in your code. Perhaps your style is messed up and drawing invisible lines, or your data points are getting transformed incorrectly and the line is off the map. Anyway, I suggest this simple test.

Create a map, and add a vector layer. hang on to the vector layer in a global var called layerVec. Then, run this code.

var CreateLine = function()
{

  var pList = new Array();
  for(var i=0; i<200; i++)
  {
    var p = new OpenLayers.Geometry.Point();
    p.x = i;
    p.y = i;
    pList.push(p);
  }
  var g = new OpenLayers.Geometry.LineString(pList);
  var f = new OpenLayers.Feature.Vector(g,null,null);
  layerVec.addFeatures(f);
};

Dont worry about coordinates yet, this should be a line in the middle of the map. It may be tiny, or huge depending on your projection, so zoom in.

open layers LineString not working

2 Answers2