Add graphic not successufl

ShaningYu · ‎01-03-2014

I tested my 1st JS API application. My code is below:
            var polylineJson = {      'paths': [     [
                  [201394.01178484457,173661.08635829584],
                  [201392.0117168416,173661.08690949593],
                  ...
                ] ]   };
            var polyline = new esri.geometry.Polyline(polylineJson);
            var polylineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([46, 139, 87, 1]), 5);
            map.graphics.add(new esri.Graphic(polyline, polylineSymbol));
But the polyline is not added on the map. What's wrong in the code? Thanks if you can help.

JonathanUihlein · ‎01-10-2014

It's not that these coordinate aren't 10200. They're just located very close to 0°N, 0°W

Could you take my code and modify it to work with his path by chance?
Should be a 5 minute job with the code posted above.

Thanks!!!

View solution in original post

ZachLiu · ‎01-03-2014

esri.Graphic requires four parameters instead of two (geometry, symbol, attributes, infoTemplate).

So even if you don't need the other two, I think you need them to be there.

try this:

map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));

Hope this helps.

ZachLiu1 · ‎01-03-2014

Graphics need four parameters instead of two (geometry, symbol, attributes and infoTemplate)

try this:

map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));

hope it helps.

ShaningYu · ‎01-03-2014

Tested but still the polyline is not dispalyed.

ZachLiu1 · ‎01-03-2014

It's hard to see when you only posted a couple of code here.

Another potential problem maybe the map is not loaded when you call map.graphics.add() function.

Is the code called after map on "load" event?

ShaningYu · ‎01-03-2014

See below:
function init() {
            map = new esri.Map("map", { extent: new esri.geometry.Extent
                ({ xmin: -8614312, ymin: 4687051, xmax: -8536040, ymax: 4730894, spatialReference: { wkid: 26973} }) });
            dojo.connect(map, "onLoad", createToolbar);
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(basemap);
}
the map loads the basemap and and basemap displays.
At the line
            map.graphics.add(new esri.Graphic(polyline, polylineSymbol, null, null));
I can view the values like map.graphics[0].extend, .path[0], also the symbol values, .... But it does not show on the map. I am still looking for the possible reasons. Thanks.

ZachLiu1 · ‎01-03-2014

so try to add the Graphic within the createToolbar() function,

also I noticed you use spatial reference other than 102100, it may cause problems when using ESRI basemap.

ShaningYu · ‎01-03-2014

Changed wkid to 102100 but got the same thing. Thanks for your concern.

JonathanUihlein · ‎01-03-2014

Here's a quick sample. Hopefully this helps.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Build your first application</title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css" />
        <style type="text/css">
            html, body, #map {
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <script src="http://js.arcgis.com/3.7/"></script>
        <script>
            var map;
            require(["esri/map", "dojo/ready", "dojo/on", "esri/geometry/Polyline", "esri/graphic", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function(Map, ready, on, Polyline, Graphic, SimpleLineSymbol) { 
      
        var map = new Map("map", {
          center: [-122.67, 45.54], //longitude, latitude
          zoom: 12,
          basemap: "streets",
          slider: true, //default
          sliderPosition: "top-left" //default
        }); 

        ready(function (){
        
          on(map, "load", drawPath);
        
          function drawPath(){
            var polylineJson = { "paths":[[[-122.68,45.53], [-122.58,45.55], [-122.57,45.58],[-122.53,45.6]]], "spatialReference":{"wkid":4326}};
            var polyline = new Polyline(polylineJson);
            var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
            var g = new Graphic(polyline, polylineSymbol, null, null);
            map.graphics.add(g);
          }
          
        });
            });
        </script>
    </head>
    <body class="claro">
        <div id="map"></div>
    </body>
</html>

ShaningYu · ‎01-03-2014

jonathan: Your code works fine. To apply it in my scenario, in which the data loaded in to the polylineJson are in double. What should be revised on the code (e.g. center - should it be decimals rather than in lat/lon?)? Any advice? Thanks.