Arrows along a line

JustinSteventon

Hi folks,

I have a GPS track and I would like to have directional arrows displayed along it. I see this has been done in the JS library:
Arrows along a line | Sample Code | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer

I have tried creating point symbols and orienting them, but it is messy because they would need to be moved at different zoom levels and are an expensive solution.

Is there a recommended way to do this?

Thanks!

LucasDanzinger

Hi Justin,

 

This can be achieved with Multilayer (CIM) symbols. You could take a few different avenues to get the end result. The simplest port of the JS samples is to take the Symbol JSON they used and use it in Maps SDK.

 

Here's an example I tested with:

 

auto builder = new PolylineBuilder(SpatialReference::wgs84(), this);
builder->addPoint(0,0);
builder->addPoint(0,10);
builder->addPoint(0,20);
builder->addPoint(30,30);
builder->addPoint(50,50);
builder->addPoint(60,50);

auto g = new Graphic(builder->toGeometry(), this);
auto go = new GraphicsOverlay(this);
go->graphics()->append(g);
m_mapView->graphicsOverlays()->append(go);


auto symbol = R"({
    "type": "CIMSymbolReference",
    "symbol": {
      "type": "CIMLineSymbol",
      "symbolLayers": [{
        "type": "CIMSolidStroke",
        "enable": "true",
        "width": 1,
        "color": [0, 0, 0, 255]
      },
      {
        "type": "CIMVectorMarker",
        "enable": "true",
        "size": 5,
        "markerPlacement": {
          "type": "CIMMarkerPlacementAlongLineSameSize",
          "endings": "WithMarkers",
          "placementTemplate": [19.5],
          "angleToLine": "true"
        },
        "frame": {
          "xmin": -5,
          "ymin": -5,
          "xmax": 5,
          "ymax": 5
        },
        "markerGraphics": [{
          "type": "CIMMarkerGraphic",
          "geometry": {
            "rings": [
              [
                [-8, -5.47],
                [-8, 5.6],
                [1.96, -0.03],
                [-8, -5.47]
              ]
            ]
          },
          "symbol": {
            "type": "CIMPolygonSymbol",
            "symbolLayers": [{
              "type": "CIMSolidFill",
              "enable": "true",
              "color": [0, 0, 0, 255]
            }]
          }
        }]
      }]
    }
})";

auto s = Symbol::fromJson(symbol);    
g->setSymbol(s);

 

 

 

You could further modify the CIM symbol JSON to your liking by referencing the CIM spec, or using a tool like the online CIM Symbol Builder.

 

If you don't want to sling JSON around, you could use our MultilayerSymbol API, which provides a subset of the CIM spec in a higher level easier to use API, but it might not have all the functionality you need.

 

A final option would be to use Pro to create a Symbol that you like, and export that to a style file that you can reference in your app. Here's a blog I wrote about this pattern.