nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

SimpleMarkerSymbol SVG Javascript Error

TiakiRice

Hi, I am having trouble creating a SimpleMarkerSymbol based on an SVG shape string.

This is the code I am using to create my SimpleMarkerSymbol, (the actual path was copied directly from https://www.w3.org/TR/SVG/paths.html#PathElement which the API documentation pointed me towards):

var symbol = null;

require([

"esri/Color",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol"

function(Color, SimpleLineSymbol, SimpleMarkerSymbol){

var line = new SimpleLineSymbol();

line.setColor(new Color([230, 0, 0, 1]));

line.setWidth(2);

symbol = new SimpleMarkerSymbol();

symbol.setPath("M 100 100 L 300 100 L 200 300 z");

symbol.setOutline(line);

symbol.setColor(new Color([255, 0, 0, 0.50]));

}

);

return symbol;

However after the symbol is turned into a graphic and added to the map the symbol is drawn incorrectly or not at all.

I also get the following error in the Chrome Console:

svg.js:55 Error: Invalid value for <path> attribute transform = "matrix(0.00001396,0.08000000,-0.08000000,0.00001396,NaN,NaN)"

I have changed the Symbol style to to one of the standard shapes (STYLE_DIAMOND) and everything works correctly.

Is this a known problem or have I done something wrong?

Extra information:

Google Chrome Version Version 50.0.2661.75 m

Error occurs in version 3.15 and 3.16 of the Javascript API, have not tried other verisons.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Byron,

This sample works fine with your path:

<!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>SimpleMarkerSymbol with SVG Path - Simplified</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dojox/widget/ColorPicker/ColorPicker.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      .dojoxColorPicker {
        position: absolute;
        top: 15px;
        right: 15px;
        -moz-box-shadow: 0 0 7px #888;
        -webkit-box-shadow: 0 0 7px #888;
        box-shadow: 0 0 7px #888;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol", "esri/graphic",
        "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker",
        "dojo/domReady!"
      ], function(
        Map, Point,
        SimpleMarkerSymbol, Graphic,
        arrayUtils, domStyle, ColorPicker
      ) {

        map = new Map("map",{
          basemap: "oceans",
          center: [ 20, 44 ],
          zoom: 6,
          minZoom: 2
        });

        map.on("load", mapLoaded);

        function mapLoaded(){
          var points = [[19.82,41.33],[16.37,48.21],[18.38,43.85],[23.32,42.7],[16,45.8],[19.08,47.5],[12.48,41.9],[21.17,42.67],[21.43,42],[19.26,42.44],[26.1,44.43],[12.45,43.93],[20.47,44.82],[17.12,48.15],[14.51,46.06],[12.45,41.9]];
          //var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";
          iconPath = "M 100 100 L 300 100 L 200 300 z";
          var initColor = "#ce641d";
          arrayUtils.forEach(points, function(point) {
            var graphic = new Graphic(new Point(point), createSymbol(iconPath, initColor));
            map.graphics.add(graphic);
          });

          var colorPicker = new ColorPicker({}, "picker1");
          colorPicker.setColor(initColor);
          domStyle.set(colorPicker, "left", "500px");
          colorPicker.on("change", function(){
            var colorCode = this.hexCode.value;
            map.graphics.graphics.forEach(function(graphic){
              graphic.setSymbol(createSymbol(iconPath, colorCode));
            });
          });
        }

        function createSymbol(path, color){
          var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setPath(path);
          markerSymbol.setColor(new dojo.Color(color));
          markerSymbol.setOutline(null);
          return markerSymbol;
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="picker1"></div>
  </body>
</html>

All comments

RobertScheitlin__GISP

Byron,

Glad you got it figured out. Please close the question by marking the reply that best answered your question by clicking on the "correct answer" link.

TiakiRice

Hi Robert,

Thanks for posting that it helped me realize what my problem was. I was trying to set the offset based on the "height" of the symbol, which is valid for some other symbol types but not the SimpleMarkerSymbol. This was resulting in a NaN X and Y offset which explains the error I was getting.

RobertScheitlin__GISP

Byron,

This sample works fine with your path:

<!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>SimpleMarkerSymbol with SVG Path - Simplified</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dojox/widget/ColorPicker/ColorPicker.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      .dojoxColorPicker {
        position: absolute;
        top: 15px;
        right: 15px;
        -moz-box-shadow: 0 0 7px #888;
        -webkit-box-shadow: 0 0 7px #888;
        box-shadow: 0 0 7px #888;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol", "esri/graphic",
        "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker",
        "dojo/domReady!"
      ], function(
        Map, Point,
        SimpleMarkerSymbol, Graphic,
        arrayUtils, domStyle, ColorPicker
      ) {

        map = new Map("map",{
          basemap: "oceans",
          center: [ 20, 44 ],
          zoom: 6,
          minZoom: 2
        });

        map.on("load", mapLoaded);

        function mapLoaded(){
          var points = [[19.82,41.33],[16.37,48.21],[18.38,43.85],[23.32,42.7],[16,45.8],[19.08,47.5],[12.48,41.9],[21.17,42.67],[21.43,42],[19.26,42.44],[26.1,44.43],[12.45,43.93],[20.47,44.82],[17.12,48.15],[14.51,46.06],[12.45,41.9]];
          //var iconPath = "M24.0,2.199C11.9595,2.199,2.199,11.9595,2.199,24.0c0.0,12.0405,9.7605,21.801,21.801,21.801c12.0405,0.0,21.801-9.7605,21.801-21.801C45.801,11.9595,36.0405,2.199,24.0,2.199zM31.0935,11.0625c1.401,0.0,2.532,2.2245,2.532,4.968S32.4915,21.0,31.0935,21.0c-1.398,0.0-2.532-2.2245-2.532-4.968S29.697,11.0625,31.0935,11.0625zM16.656,11.0625c1.398,0.0,2.532,2.2245,2.532,4.968S18.0555,21.0,16.656,21.0s-2.532-2.2245-2.532-4.968S15.258,11.0625,16.656,11.0625zM24.0315,39.0c-4.3095,0.0-8.3445-2.6355-11.8185-7.2165c3.5955,2.346,7.5315,3.654,11.661,3.654c4.3845,0.0,8.5515-1.47,12.3225-4.101C32.649,36.198,28.485,39.0,24.0315,39.0z";
          iconPath = "M 100 100 L 300 100 L 200 300 z";
          var initColor = "#ce641d";
          arrayUtils.forEach(points, function(point) {
            var graphic = new Graphic(new Point(point), createSymbol(iconPath, initColor));
            map.graphics.add(graphic);
          });

          var colorPicker = new ColorPicker({}, "picker1");
          colorPicker.setColor(initColor);
          domStyle.set(colorPicker, "left", "500px");
          colorPicker.on("change", function(){
            var colorCode = this.hexCode.value;
            map.graphics.graphics.forEach(function(graphic){
              graphic.setSymbol(createSymbol(iconPath, colorCode));
            });
          });
        }

        function createSymbol(path, color){
          var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setPath(path);
          markerSymbol.setColor(new dojo.Color(color));
          markerSymbol.setOutline(null);
          return markerSymbol;
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="picker1"></div>
  </body>
</html>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.