Custom SVG Symbology
with ESRI Javascript API
Alex Nguyen / GIS Developer / LJA Engineering, Inc.
What is SVG?
- Scalable Vector Graphics
- Circles, rectangles, and paths
- Can apply color and gradients
Slide me!
SVG Sample File
Types of Point Symbols
- SimpleMarkerSymbol
used to display points as a simple shape - limited to circles, cross, diamonds, squares, and X's
- PictureMarkerSymbol
uses a raster image as a marker
Simple Marker Symbols
Esri main campus, main offices, and satellite offices
BORING!
Picture Marker Symbols
Esri main campus, main offices, and satellite offices
BLURRY!
SVG Marker Symbols
Esri main campus, main offices, and satellite offices
Perfect!
That's cool, show me the code!
// require dependencies here...
// The path strings from SVG file, concatenated
var svgPath = "M ... to z";
var svgSymbol = new SimpleMarkerSymbol()
.setOutline(null) // no outlines
.setSize(20) // 20 pixels
.setColor("green")
.setPath(svgPath);
var map = new Map("map");
map.on("load", function () {
var point = new Point([-95.57408, 29.73736]);
var graphic = new Graphic(point, svgSymbol);
map.graphics.add(graphic);
});