[GIS] How to show label of a new feature layer in OpenLayers

markersopenlayers-2

I have created a dynamic new feature layer along with a marker using OpenLayers with popups, but, I want to show labels for each new feature created…

Below is the code I used…

//To add new Vector Layer
var style = new OpenLayers.Style({
    fillColor: "#ffcc66",
    strokeColor: "#ff9933",
    strokeWidth: 2,
    label: "${type,area}",
    fontColor: "#333333",
    fontFamily: "sans-serif",
    fontWeight: "bold"      
});
var type='MAHAMAYATALA';
var vectorLayer = new OpenLayers.Layer.Vector("SupplyOff",{styleMap: new OpenLayers.StyleMap(style)});  
//  For Consumer Query
$qry_xy="select * from ci_master@ltdvlp  where  x is not null  AND GIS_SOURCE_CODE LIKE '01%' AND ROWNUM < 5";
$parsed =oci_parse($db_conn_prod,$qry_xy);
oci_execute($parsed);
$nrows3=oci_fetch_all($parsed,$results3);
echo $nrows3;
for($i=0;$i<$nrows3;$i++){
$x=$results3["X"][$i];
$y=$results3["Y"][$i];
$consno=$results3["CONS_NUM"][$i];
$source=$results3["GIS_SOURCE_CODE"][$i]; ?>
        var x = '<?php echo $x;  ?>';
        var y ='<?php echo $y;  ?>';
        var cons ='<?php echo $consno; ?>';
        var type = '<?php echo $source; ?>';        
         // Define markers as "features" of the vector layer:
var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point( x, y ),
        {description:'cons: '+cons} ,
        {externalGraphic: 'img/marker-gold.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
    );          

vectorLayer.addFeatures(feature);
map.addLayer(vectorLayer);

// for Pop ups Window   
var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };

function createPopup(feature) {
  feature.popup = new OpenLayers.Popup.FramedCloud("pop",
      feature.geometry.getBounds().getCenterLonLat(),
      null,
      '<div class="markerContent">'+feature.attributes.description+'</div>',
      null,
      true,
      function() { controls['selector'].unselectAll(); }
  );
  //feature.popup.closeOnMove = true;
  map.addPopup(feature.popup);
}

function destroyPopup(feature) {
  feature.popup.destroy();
  feature.popup = null;
}

map.addControl(controls['selector']);
controls['selector'].activate();

Best Answer

I use the code below to get the answer of my own Question...

Got much help from "Openlayers-Manual"...

the corrected code is below...

var vectorLayer = new OpenLayers.Layer.Vector("SupplyOff");
map.addLayer(vectorLayer);


<?php  


$qry_xy="select * from ci_master@ltdvlp  where  x is not null  AND GIS_SOURCE_CODE LIKE '01%' AND ROWNUM 
< 5";

$parsed =oci_parse($db_conn_prod,$qry_xy);
oci_execute($parsed);
$nrows3=oci_fetch_all($parsed,$results3);
echo $nrows3;

for($i=0;$i
<$nrows3;$i++)    {
$x=$results3["X"][$i];
$y=$results3["Y"][$i];
$consno=$results3["CONS_NUM"][$i];
$source=$results3["GIS_SOURCE_CODE"][$i];
?>


var description_new = '
<?php echo $consno; ?>
';
var x = '
<?php echo $x;  ?>
';
var y ='
<?php echo $y;  ?>
';
var cons ='
<?php echo $consno; ?>
';
var type = '
<?php echo $source; ?>
';

//alert(cons);


// Define markers as "features" of the vector layer:

//alert(cons);

vectorLayer.addFeatures([new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(x,y ),

{
//Attributes go here
description:'cons: '+cons,
size: 5 + (Math.floor(Math.random() * 20)),
label: 'F'+cons,
strokeWidth: (Math.floor(Math.random() * 10))
}
)]);




//markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(x,y),icon.clone()));
//markers.events.register('mousedown', markers, function(evt) { alert("Docket no "+dkt+ " Address: "+add+" Area: "+area); OpenLayers.Event.stop(evt); });

<?php

}
?>
//x=k; y=p;
//alert("DOCKET NO:"+ dkt);
//Create a style object to be used by a StyleMap object
var vector_style = new OpenLayers.Style({
'cursor': 'pointer',
'fillColor': '#2bff05',
'fillOpacity': .8,
'fontColor': '#a52505',
'label': '${label}',
'pointRadius': '${size}',
'strokeColor': '#232323',
'strokeDashstyle': 'solid',
'strokeWidth': '${strokeWidth}',

});
///Create a style map object and set the 'default' intent to the 
//  style object we just created
var vector_style_map = new OpenLayers.StyleMap({
'default': vector_style
});

//Add the style map to the vector layer
vectorLayer.styleMap = vector_style_map;

map.addLayer(vectorLayer);
var controls = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};

function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'
<div class="markerContent">
  '+feature.attributes.description+'
</div>
',
null,
true,
function() { controls['selector'].unselectAll(); }
);
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}

function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}

map.addControl(controls['selector']);
controls['selector'].activate();
Related Question