I have some code that will geocode a point and display it on the map. I would like to label the point with the address.
I create a label graphic using the coordinates of the point and the address, add graphic to the graphics layer, but it does not display on the map.
Not sure what I am missing.
Here is the section of code:
fromlocator.on("location-to-address-complete", function(evt) {
//mapMain.graphics.remove(fGraphic);
var attr;
if (evt.address.address) {
var fromAddress = evt.address.address;
alert(fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal);
if (fromAddress){
document.getElementById("fromAddr").value = fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal;
fPoint = new Point(evt.address.location, new SpatialReference({ wkid: 4326 }));
attr = {
"Address": fromAddress
};
//Create point graphic from geocoded point, add to graphiclayer, add layer to map.
fGraphic = new Graphic(fPoint, fromGeocodeSymbol, attr);
graphicsLayer = new GraphicsLayer();
graphicsLayer.add(fGraphic);
mapMain.addLayer(graphicsLayer);
// create a text symbol to define the style of labels
var textColor = new Color("#666");
var textLabel = new TextSymbol(fromAddress)
textLabel.setColor(textColor);
textLabel.font.setSize("14pt");
textLabel.font.setFamily("arial");
textLabelRenderer = new SimpleRenderer(textLabel);
//create label to add to graphic layer
var testlabel = new Graphic(fPoint, textLabel)
//add label to graphics layer
mapMain.graphics.add(testlabel);
zoomToAddresses();
getZone(fPoint, "from");
}
}
});
Solved! Go to Solution.
Figured it out. I was referencing an object when creating the textsymbol.
Needed to replace fromAddress with fromAddress.Address:
var textSymbol = new TextSymbol(fromAddress.Address, font, new Color([0, 0, 0]));
Ken,
Does your map constructor have the showLabels property set to true?
https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#map1-showlabels
Yes it does:
// Create the map
mapMain = new Map("cpCenter", {
basemap : "osm",
extent : extentInitial,
showLabels : true
});
Ken,
Can you try this bit of code for the actual label graphic portion:
var font = new Font("14pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL);
// create a text symbol
var textSymbol = new TextSymbol(fromAddress, font, new Color([0, 0, 0]));
var labelPointGraphic = new Graphic(fPoint, textSymbol);
// add the label point graphic to the map
mapMain.graphics.add(labelPointGraphic);
Same result, label is not displaying:
if (fromAddress){
document.getElementById("fromAddr").value = fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal;
fPoint = new Point(evt.address.location, new SpatialReference({ wkid: 4326 }));
attr = {
"Address": fromAddress
};
//Create point graphic from geocoded point, add to graphiclayer, add layer to map.
fGraphic = new Graphic(fPoint, fromGeocodeSymbol, attr);
//graphicsLayer = new GraphicsLayer();
graphicsLayer.add(fGraphic);
//mapMain.addLayer(graphicsLayer);
var font = new Font("14pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL);
// create a text symbol
var textSymbol = new TextSymbol(fromAddress, font, new Color([0, 0, 0]));
var labelPointGraphic = new Graphic(fPoint, textSymbol);
// add the label point graphic to the map
mapMain.graphics.add(labelPointGraphic);
zoomToAddresses();
getZone(fPoint, "from");
}
Ken,
I am not seeing what you are missing then.
Figured it out. I was referencing an object when creating the textsymbol.
Needed to replace fromAddress with fromAddress.Address:
var textSymbol = new TextSymbol(fromAddress.Address, font, new Color([0, 0, 0]));