How to Add text to PictureMarkerSymbol in arcgis using javascript

15050
10
Jump to solution
07-15-2014 12:04 AM
Avishekkumar
New Contributor II

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...

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
Avishekkumar
New Contributor II

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

<!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>Simple Map</title>

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

    <style>

        html, body, #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            background-color: #FFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

    </style>

    <script src="http://js.arcgis.com/3.10/"></script>

    <script>

        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>

    <div id="map"></div>

</body>0

</html>

View solution in original post

0 Kudos
10 Replies
JeffPace
MVP Regular Contributor
0 Kudos
DennisHunink
New Contributor III

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.

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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>

Avishekkumar
New Contributor II

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

<!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>Simple Map</title>

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

    <style>

        html, body, #map {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        body {

            background-color: #FFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

    </style>

    <script src="http://js.arcgis.com/3.10/"></script>

    <script>

        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>

    <div id="map"></div>

</body>0

</html>

View solution in original post

0 Kudos
JeffPace
MVP Regular Contributor

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

0 Kudos
Avishekkumar
New Contributor II

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.

0 Kudos
JeffPace
MVP Regular Contributor

Timothy Hales‌ what is proper etiquette here

0 Kudos
TimothyHales
Esri Notable Contributor

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.

0 Kudos
JeffPace
MVP Regular Contributor

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

0 Kudos