topic How to Add text to PictureMarkerSymbol in arcgis using javascript in ArcGIS JavaScript Maps SDK Questions

How to Add text to PictureMarkerSymbol in arcgis using javascript

Avishekkumar — Tue, 15 Jul 2014 07:04:11 GMT

I am new to ArcGis, i need complete code of how to add dynamic text on the marker symbol. I have Location Data in Json format....

{locations: [{latitude: 52.1, longitude: 4.1, textToDisplayOnThePictureMarkerSymbol: 34}, {latitude: 52.2, longitude: 4.9, textToDisplayOnThePictureMarkerSymbol: 50}, ...]}

Pls help me...

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JeffPace — Tue, 15 Jul 2014 16:38:15 GMT

You need to use a textsymbol

textsymbol-amd | API Reference | ArcGIS API for JavaScript‌

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

DennisHunink — Sat, 26 Jul 2014 14:39:06 GMT

You might want to check out the LabelLayer or, as Jeff Pace suggested, just use a text symbol. Might also be a good idea to check out the nature of infoTemplates; you might end up with a combination of those.

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JakeSkinner — Mon, 28 Jul 2014 15:09:35 GMT

Hi Avishek,

Here is example on how to read a JSON file using the dojo/request/xhr provider. The coordinates and additional attribute information is added to a GraphicsLayer and then labels are generated using the LabelLayer class.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/graphic", "esri/SpatialReference",
        "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
        "esri/Color", "esri/InfoTemplate", "esri/layers/GraphicsLayer",
        "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/layers/LabelLayer",
        "dojo/dom", "dojo/on", "dojo/_base/array", 'dojo/_base/lang',
        "dojo/json", "dojo/request/xhr", "dojo/parser", "dojo/domReady!"
      ], function(
        Map, Graphic, SpatialReference,
        Point, SimpleMarkerSymbol,
        Color, InfoTemplate, GraphicsLayer,
        TextSymbol, SimpleRenderer, LabelLayer,
        dom, on, array, lang,
        JSON, xhr, parser
      ) {
        
        parser.parse();                
              
        map = new Map("mapDiv", {
          basemap: "topo",
          center: [4.1, 52.1],
          zoom: 10
        });  
        
        map.on("load", addPts);
        
        graphicsLayer = new GraphicsLayer();
            
        function addPts(){ 
         xhr("locations.json", {
            handleAs: "Json",
            sync: "true"
            }).then(lang.hitch(document, function(data){
              locations = JSON.parse(data);
              array.forEach(locations, function(feature){                          
                var pt = new Point(feature.longitude, feature.latitude, new SpatialReference({ wkid: 4326 }));
                var sms = new SimpleMarkerSymbol().setStyle(
                  SimpleMarkerSymbol.STYLE_SQUARE).setColor(
                  new Color([255,0,0,0.5]));
                var attr = {"Attributes": feature.textToDisplayOnThePictureMarkerSymbol};
                var infoTemplate = new InfoTemplate("Info:","Attributes: ${Attributes}");
                var graphic = new Graphic(pt,sms, attr, infoTemplate);           
                graphicsLayer.add(graphic);
             })
             map.addLayer(graphicsLayer);
             
            var textColor = new Color("#cc0000");
            var textLabel = new TextSymbol().setColor(textColor);
            textLabel.font.setSize("14pt");
            textLabel.font.setFamily("arial");
            textLabel.xoffset = -12;
            textLabel.yoffset = 10;
            textLabelRenderer = new SimpleRenderer(textLabel);
            var labels = new LabelLayer();            
            
            labels.addFeatureLayer(graphicsLayer, textLabelRenderer, "${Attributes}");
            
            map.addLayer(labels);      
            }));           
         }                   

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

Avishekkumar — Tue, 29 Jul 2014 05:44:09 GMT

Thanks everyone for the effort and reply which is really helpful to me. Here is what i was looking for.

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

<style>

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

body {

background-color: #FFF;

overflow: hidden;

font-family: "Trebuchet MS";

}

</style>

var map, textSymbol, picSymbol;

require(["esri/map",

"esri/graphic",

"esri/symbols/PictureMarkerSymbol",

"esri/symbols/TextSymbol",

"esri/geometry/Point",

"esri/SpatialReference",

"esri/tasks/ProjectParameters",

"esri/tasks/GeometryService",

"dojo/on",

"dojo/domReady!"

], function (Map, Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService, on) {

map = new Map("map", {

basemap: "topo",

center: [4.7115836273349, 51.79224577], // longitude, latitude

zoom: 8

});

var jsonString = { locations: [{ latitude: 51.6220455, longitude: 4.54404212, textToDisplayOnThePictureMarkerSymbol: 34 }, { latitude: 51.8838877, longitude: 4.7527823578, textToDisplayOnThePictureMarkerSymbol: 50 }] };

jsonString = jsonString.locations;

picSymbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 60, 60);

map.on("load", function (evt) {

for (var i = 0; i < jsonString.length; i++) {

var geometryPoint = new Point(jsonString.longitude, jsonString.latitude, new SpatialReference(4326));

textSymbol = new TextSymbol(jsonString.textToDisplayOnThePictureMarkerSymbol).setOffset(0, -4);

map.graphics.add(new Graphic(geometryPoint, picSymbol));

map.graphics.add(new Graphic(geometryPoint, textSymbol));

}

});

</script>

</head>

<body>

</body>0

</html>

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JeffPace — Tue, 29 Jul 2014 16:44:31 GMT

Glad you found the answer. However, crediting yourself with the answer, when others pointed you in the right direction, isnt really great..

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JeffPace — Tue, 29 Jul 2014 16:46:59 GMT

Timothy Hales‌ what is proper etiquette here

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

Avishekkumar — Wed, 30 Jul 2014 06:24:43 GMT

Hey Jeff,

Sorry if you get it wrongly. I didn't post this answer and marked as correct ans to get/earn credit. I posted and marked as correct to help others if they are having same requirement, then they can directly get exact answer quickly. Credit goes to ESRI team(specially Nicholas Haney ) they helped me a lot to get this result.

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JeffPace — Wed, 30 Jul 2014 16:41:02 GMT

No problem. I understand that. You can mark posts as helpful along the way.

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

TimothyHales — Fri, 01 Aug 2014 01:31:29 GMT

I am ok with marking his response as correct as long as those that contribute to the complete answer get their replies marked as helpful. Now if someone gives a complete answer, their reply should be the one marked correct and not the posters summary. The important thing here is the correct answer being brought to the top more so that a few point being awarded.

Re: How to Add text to PictureMarkerSymbol in arcgis using javascript

JeffPace — Fri, 01 Aug 2014 18:52:49 GMT

Agreed