Polyline geometry to graphic - SimpleLineSymbol is the only type not displaying on the map

2487
1
Jump to solution
10-02-2015 08:22 AM
AlanLong
New Contributor

I have modified the Measurement widget to keep a session based history of the measurements the user has made. When a user clicks on a history item, it should display the geometry associated with that history item as a GraphicsLayer on the map. I am using knockout to manage the history items and to retrieve measurement metadata when a history item is clicked.

At this point, both my Polygons (for area) and Points (for location) work just fine with the SimpleFillSymbol() and the SimpleMarkerSymbol(), respectively. However, the Polyline geometry returned from a distance measurement is not displaying on the map with the SimpleLineSymbol().

Here's the code: 

var graphicLayerId = "measurementHistoryGraphicsLayer"; 

function addGraphicsLayerToMap(graphicsLayer) {

    var lay = getGraphicsLayerFromMap();

        if (lay !== undefined) {

        lay.clear();

        lay.add(graphicsLayer);

        map.removeLayer(lay);

    }

    map.addLayer(graphicsLayer);

}  

function createGraphicFromGeometry(viewModel) {

     //Determine the symbol type

     var symbol;

     switch (viewModel.activeTool) {

          case "area":

               symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 2), new esri.Color([255, 0, 0, 0.25]));

               break;

          case "distance":

                              symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 3);

               break;
         
case "location":
               symbol
= new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 3),
  
new esri.Color([0, 255, 0, 0.25]));
                 
break;
  
}
  
var graphic = new esri.Graphic(viewModel.geometry, symbol, { "extent": viewModel.extent, "unitName": viewModel.unitName });
  
return graphic;
}

function createGraphicsLayerFromGraphic(graphic) {
  
var graphicLayer = new esri.layers.GraphicsLayer({ id: graphicLayerId });
  graphicLayer
.add(graphic);
  graphicLayer
.setRenderer(new esri.renderer.SimpleRenderer(graphic.symbol));
  
return graphicLayer;
}

function getGraphicsLayerFromMap() {
  
return map.getLayer(graphicLayerId);
}

$
(document).on('click', '#emv_measurement_history .list-group-item', function () {
  $
('#emv_measurement_history .list-group-item.list-group-item-info').removeClass('list-group-item-info');
  $
(this).addClass('list-group-item-info');
  
var measurementData = ko.mapping.toJS(ko.dataFor($(this)[0]));
  
var graphic = createGraphicFromGeometry(measurementData);
  
var graphicsLayer = createGraphicsLayerFromGraphic(graphic);
  addGraphicsLayerToMap
(graphicsLayer);
  map
.setExtent(measurementData.extent);
});

              
Like I said, this works fine for both area and location, but distance does not seem to work. I've even tried adding a hard-coded polyline value in there are creating a SimpleLineSymbol from that without success.

For additional information, here is the Polyline info:

[ [ [ 2591769.2297164765, 5236836.417134136 ], [ 2573584.2281166334, 4620357.96034264 ], [ 2557384.1428811993, 4038303.8136230526 ], [ 3124973.8484519687, 4260007.60486125 ], [ 3714518.451309448, 4454862.77067183 ], [ 4324318.833989203, 4618552.510359674 ], [ 4666465.839330839, 4693607.843734423 ], [ 5013294.285789721, 4757423.375729576 ] ] ]

And the spatial reference is set to 102100.

0 Kudos
1 Solution

Accepted Solutions
AlanLong
New Contributor

I finally figured it out.

I have the geometry from the original measurement stored in a knockout variable. When I was reading from it, it would build out the graphic, symbol, and graphic layer just fine without any errors throwing.

I discovered that for some reason, the data and the spatial reference were mismatched, so I extracted the path from the stored geometry, assigned it to a new polyline variable, re-set the spatial reference to 102100 like I needed, and re-assigned the geometry to the graphic, which worked.

    var g = new esri.Graphic(viewModel.geometry, symbol, { "extent": viewModel.extent, "unitName": viewModel.unitName });

    if (viewModel.activeTool === "distance") {

        var polyline = new esri.geometry.Polyline(viewModel.geometry.paths);

        polyline.setSpatialReference(new esri.SpatialReference(102100));

        g.setGeometry(polyline);

    }

View solution in original post

0 Kudos
1 Reply
AlanLong
New Contributor

I finally figured it out.

I have the geometry from the original measurement stored in a knockout variable. When I was reading from it, it would build out the graphic, symbol, and graphic layer just fine without any errors throwing.

I discovered that for some reason, the data and the spatial reference were mismatched, so I extracted the path from the stored geometry, assigned it to a new polyline variable, re-set the spatial reference to 102100 like I needed, and re-assigned the geometry to the graphic, which worked.

    var g = new esri.Graphic(viewModel.geometry, symbol, { "extent": viewModel.extent, "unitName": viewModel.unitName });

    if (viewModel.activeTool === "distance") {

        var polyline = new esri.geometry.Polyline(viewModel.geometry.paths);

        polyline.setSpatialReference(new esri.SpatialReference(102100));

        g.setGeometry(polyline);

    }

0 Kudos