[GIS] How to draw a line with pop-up in OpenLayers

openlayers-2popup

How to draw a line with pop-up in OpenLayers? For markers with pop-up i do so:

var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    map.events.register("click", map , function(e){
   var opx = map.getLonLatFromPixel(e.xy) ;
   var marker = new OpenLayers.Marker(lonLat);
   markers.addMarker(marker);
   marker.events.register("click", marker, function(e){
   popup = new OpenLayers.Popup.FramedCloud("chicken",
                         marker.lonlat,
                         new OpenLayers.Size(200, 200),
                         "example popup",
                         null, true);


map.addPopup(popup);
    }); 
});

Best Answer

Solved:

var lineLayer = new OpenLayers.Layer.Vector("Линии");
         map.addLayer(lineLayer);                   

         var points = new Array(
            new OpenLayers.Geometry.Point(47, 32.24),
            new OpenLayers.Geometry.Point(45, 33),
            new OpenLayers.Geometry.Point(49, 35)
         );

         var line = new OpenLayers.Geometry.LineString(points);
         line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

         var style = {
            strokeColor: '#0000ff',
            strokeOpacity: 0.5,
            strokeWidth: 5
         };

         var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
         alert(lineFeature.id);
         lineLayer.addFeatures([lineFeature]);

selectControl = new OpenLayers.Control.SelectFeature([lineLayer]);
            map.addControl(selectControl);
            selectControl.activate();

            lineLayer.events.on({
                'featureselected'   : onFeatureSelect,
                'featureunselected' : onFeatureUnselect
            });

Pop-up functions:

function onPopupClose2(evt) {
                 // 'this' is the popup.
                 selectControl.unselect(this.feature);
            }

            function onFeatureSelect(evt) {         
            feature = evt.feature;
            id = feature.id;
            var lonlat = map.getLonLatFromPixel(map.getControlsByClass("OpenLayers.Control.MousePosition")[0].lastXy);
            popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                      lonlat,
                                      new OpenLayers.Size(100,100),
                                      "<h2>"+feature.attributes.title + "</h2>" +
                                      CableLineText_arr[id],
                                      null, true, onPopupClose2);
             feature.popup = popup;
             popup.feature = feature;
             map.addPopup(popup);
        }

            function onFeatureUnselect(evt) {
            feature = evt.feature;
             if (feature.popup) {
                 popup.feature = null;
                 map.removePopup(feature.popup);
                 feature.popup.destroy();
                 feature.popup = null;
             }
        }
Related Question