Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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; ?>';

        //alert(cons);


         // 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();

Thanks in advance...

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

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();
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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