Can anybody find anything wrong with this? I want to check myself.
var text = new TextSymbol("Hello World");
var pt = new Point(-118.5, 34.5, map.spatialReference);
var graphic = new Graphic(pt, text);
map.graphic.show();
Thank you
Solved! Go to Solution.
Brandon,
Not sure what you are missing but here is a working sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Labeling features client-side</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var map;
require([
"esri/map",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/layers/LabelClass",
"esri/Color",
"esri/graphic",
"dojo/domReady!"
], function(Map, Extent, Point, FeatureLayer,
SimpleLineSymbol, SimpleFillSymbol,
TextSymbol, SimpleRenderer, LabelClass, Color, Graphic)
{
// load the map centered on the United States
var bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
//create the map and set the extent, making sure to "showLabels"
map = new Map("map", {
extent: bbox,
showLabels : true //very important that this must be set to true!
});
var text = new TextSymbol("Hello World");
var pt = new Point(-118.5, 34.5, map.spatialReference);
var graphic = new Graphic(pt, text);
// create a renderer for the states layer to override default symbology
var statesColor = new Color("#666");
var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
var statesRenderer = new SimpleRenderer(statesSymbol);
// create the feature layer to render and label
var statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
var states = new FeatureLayer(statesUrl, {
id: "states",
outFields: ["*"]
});
states.setRenderer(statesRenderer);
// create a text symbol to define the style of labels
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");
//this is the very least of what should be set within the JSON
var json = {
"labelExpressionInfo": {"value": "{STATE_NAME}"}
};
//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json
states.setLabelingInfo([ labelClass ]);
map.addLayer(states);
map.on("load", function() {
map.graphics.add(graphic);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Brandon,
Are you adding the graphics to the map elsewhere in your code that you are not showing here?..
I was testing this in the sandbox first. I haven't added this to my file yet. I was going to add this right after I my creation of the dynamic layers in my map.
Brandon,
But still if you do not add the graphic to the map them how is it going to show in the map?
You are right. I will test it out.
How is this?
var text = new TextSymbol("Hello World");
var pt = new Point(-118.5, 34.5, map.spatialReference);
var graphic = new Graphic(pt, text);
map.graphics.add(graphic);
Brandon,
Not sure what you are missing but here is a working sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Labeling features client-side</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var map;
require([
"esri/map",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/layers/LabelClass",
"esri/Color",
"esri/graphic",
"dojo/domReady!"
], function(Map, Extent, Point, FeatureLayer,
SimpleLineSymbol, SimpleFillSymbol,
TextSymbol, SimpleRenderer, LabelClass, Color, Graphic)
{
// load the map centered on the United States
var bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
//create the map and set the extent, making sure to "showLabels"
map = new Map("map", {
extent: bbox,
showLabels : true //very important that this must be set to true!
});
var text = new TextSymbol("Hello World");
var pt = new Point(-118.5, 34.5, map.spatialReference);
var graphic = new Graphic(pt, text);
// create a renderer for the states layer to override default symbology
var statesColor = new Color("#666");
var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
var statesRenderer = new SimpleRenderer(statesSymbol);
// create the feature layer to render and label
var statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
var states = new FeatureLayer(statesUrl, {
id: "states",
outFields: ["*"]
});
states.setRenderer(statesRenderer);
// create a text symbol to define the style of labels
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");
//this is the very least of what should be set within the JSON
var json = {
"labelExpressionInfo": {"value": "{STATE_NAME}"}
};
//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json
states.setLabelingInfo([ labelClass ]);
map.addLayer(states);
map.on("load", function() {
map.graphics.add(graphic);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Thanks Robert. Would this be the best way to label something that is not in apart of a layers attribute table?
Correct
Got it. Thanks Robert.