snippets/javascript.json

{
  "Add a layer from a portal item ": {
    "body": [
      "Layer.fromPortalItem({",
      "\tportalItem: {",
      "\t\tid: \"${1:af1ad38816814b7eba3fe74a3b84412d}\"",
      "\t}",
      "\t}).then(function(layer) {",
      "\t\tmap.add(layer);",
      "\t});"
    ],
    "description": "Add a layer from a portal item ",
    "prefix": "addLayerFromPortalItem"
  },
  "CalloutLarge": {
    "body": [
      "verticalOffset: {",
      "\tscreenLength: 40,",
      "\tmaxWorldLength: 500000,",
      "\tminWorldLength: 0",
      "},",
      "callout: {",
      "\ttype: \"line\",",
      "\tsize: ${1:1.5},",
      "\tcolor: ${2:[255, 255, 255, 0.9]},",
      "\tborder: {",
      "\t\tcolor: ${3:[0, 0, 0, 0.5]}",
      "\t}",
      "}"
    ],
    "description": "Generate 3D callouts for world scale",
    "prefix": "calloutLarge"
  },
  "CalloutSmall": {
    "body": [
      "verticalOffset: {",
      "\tscreenLength: 20,",
      "\tmaxWorldLength: 200,",
      "\tminWorldLength: 20",
      "},",
      "callout: {",
      "\ttype: \"line\",",
      "\tsize: ${1:1.5},",
      "\tcolor: ${2:[255, 255, 255, 0.9]},",
      "\tborder: {",
      "\t\tcolor: ${3:[0, 0, 0, 0.5]}",
      "\t}",
      "}"
    ],
    "description": "Generate 3D callouts for city scale",
    "prefix": "calloutSmall"
  },
  "ClassBreaksRenderer": {
    "body": [
      "{",
      "\ttype: \"class-breaks\",",
      "\tfield: \"${1:MAGNITUDE}\",",
      "\tdefaultSymbol: ${2:symbol},",
      "\tclassBreakInfos: [{",
      "\t\tminValue: ${3:0},",
      "\t\tmaxValue: ${4:10},",
      "\t\tsymbol: ${2:symbol},",
      "\t\tlabel: \"${5:label for the legend}\"",
      "\t}]",
      "}"
    ],
    "description": "Generate a ClassBreaksRenderer",
    "prefix": "classBreaksRenderer"
  },
  "ColorVisualVariable": {
    "body": [
      "{",
      "\ttype: \"color\",",
      "\tfield: \"${1:POP_POVERTY}\",",
      "\tnormalizationField: \"${2:POP_TOT}\",",
      "\tlegendOptions: {",
      "\t\ttitle: \"${3:% population in poverty by county}\"",
      "\t},",
      "\tstops: [",
      "\t\t{ value: ${4:0.15}, color: ${5: \"#FFFCD4\" }, label: \"${6:<15%}\" },",
      "\t\t{ value: ${7:0.25}, color: ${8: \"#0D2644\" }, label: \"${9:>25%}\" }",
      "\t]",
      "}"
    ],
    "description": "Generate a ColorVisualVariable with 2 color stops.",
    "prefix": "colorVar"
  },
  "CreateMap": {
    "body": [
      "const map = new Map({",
      "\tbasemap: \"${1|arcgis-imagery,arcgis-imagery-standard,arcgis-imagery-labels,arcgis-light-gray,arcgis-dark-gray,arcgis-navigation,arcgis-navigation-night,arcgis-streets,arcgis-streets-night,arcgis-streets-relief,arcgis-topographic,arcgis-oceans,osm-standard,osm-standard-relief,osm-streets,osm-streets-relief,osm-light-gray,osm-dark-gray,arcgis-terrain,arcgis-community,arcgis-charted-territory,arcgis-colored-pencil,arcgis-nova,arcgis-modern-antique,arcgis-midcentury,arcgis-newspaper,arcgis-hillshade-light,arcgis-hillshade-dark|}\"",
      "});",
      "const view = new MapView({",
      "\tcontainer:${2:\"viewDiv\"},",
      "\tmap:map,",
      "\tzoom: ${3: 4},",
      "\tcenter:${4: [15,65]}",
      "});"
    ],
    "description": "Create map and map view",
    "prefix": "map"
  },
  "CreateScene": {
    "body": [
      "const map = new Map({",
      "\tbasemap: \"${1:streets}\"",
      "});",
      "const view = new SceneView({",
      "\tcontainer: \"${2:viewDiv}\",",
      "\tmap:map",
      "});"
    ],
    "description": "Create map and scene view",
    "prefix": "scene"
  },
  "CreateWebMap": {
    "body": [
      "const webmap = new WebMap({",
      "\tportalItem: {",
      "\t\tid: \"${1:webmap_id}\"",
      "\t}",
      "});",
      "const view = new MapView({",
      "\tcontainer: \"${2:viewDiv}\",",
      "\tmap: webmap",
      "});"
    ],
    "description": "Create web map and a map view",
    "prefix": "webmap"
  },
  "CreateWebScene": {
    "body": [
      "const webscene = new WebScene({",
      "\tportalItem: {",
      "\t\tid: \"${1:webscene_id}\"",
      "\t}",
      "});",
      "const view = new SceneView({",
      "\tcontainer: \"${2:viewDiv}\",",
      "\tmap: webscene",
      "});"
    ],
    "description": "Create web scene and scene view",
    "prefix": "webscene"
  },
  "Edges": {
    "body": [
      "{",
      "\ttype: \"${1|solid,sketch|}\",",
      "\tcolor: ${2:[50, 50, 50, 0.5]},",
      "\tsize: ${3:1},",
      "\textensionLength: ${4:0}",
      "}"
    ],
    "description": "Creates and EdgeSymbol3D",
    "prefix": "edges"
  },
  "ElevationInfo": {
    "body": [
      "{",
      "\tmode: \"${1|on-the-ground,relative-to-ground,absolute-height,relative-to-scene|}\",",
      "\toffset: ${2:10},",
      "\tfeatureExpressionInfo: {",
      "\t\texpression: \"${3:Geometry(\\$feature).z\"}",
      "\t},",
      "\tunit: \"${4|feet,meters,kilometers,miles,us-feet,yards|}\"",
      "}"
    ],
    "prefix": "elevInfo"
  },
  "ExtrudePolygon3D": {
    "body": [
      "{",
      "\ttype: \"polygon-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"extrude\",",
      "\t\tmaterial: { color: ${1:[255, 250, 239, 0.8]} },",
      "\t\tsize: ${2:20}",
      "\t}]",
      "}"
    ],
    "description": "Generate PolygonSymbol3D with a ExtrudeSymbol3DLayer",
    "prefix": "extrudePolygon3d"
  },
  "FeatureReductionCluster": {
    "body": [
      "{",
      "\ttype: \"cluster\",",
      "\tclusterRadius: 60,",
      "\tclusterMinSize: 16.5,",
      "\tclusterMaxSize: 37.5,",
      "\tpopupTemplate: {",
      "\t\ttitle: \"Cluster summary\",",
      "\t\tcontent: \"This cluster represents <b>{cluster_count}</b> features.\",",
      "\t\tfieldInfos: [{",
      "\t\t\tfieldName: \"cluster_count\",",
      "\t\t\tlabel: \"Number of features\",",
      "\t\t\tformat: {",
      "\t\t\t\tdigitSeparator: true,",
      "\t\t\t\tplaces: 0",
      "\t\t\t}",
      "\t\t}]",
      "\t},",
      "\tpopupEnabled: true,",
      "\tlabelingInfo: [{",
      "\t\tdeconflictionStrategy: \"none\",",
      "\t\tlabelExpressionInfo: {",
      "\t\t\texpression: `",
      "\t\t\t\t\\$feature[\"cluster_count\"];",
      "\t\t\t\tconst value = \\$feature[\"cluster_count\"];",
      "\t\t\t\tconst num = Count(Text(Round(value)));",
      "\t\t\t\tconst label = When(",
      "\t\t\t\t\tnum < 4, Text(value, \"#.#\"),",
      "\t\t\t\t\tnum == 4, Text(value / Pow(10, 3), \"#.0k\"),",
      "\t\t\t\t\tnum <= 6, Text(value / Pow(10, 3), \"#k\"),",
      "\t\t\t\t\tnum == 7, Text(value / Pow(10, 6), \"#.0m\"),",
      "\t\t\t\t\tnum > 7, Text(value / Pow(10, 6), \"#m\"),",
      "\t\t\t\t\tText(value, \"#,###\")",
      "\t\t\t\t);",
      "\t\t\t\treturn label;",
      "\t\t\t`",
      "\t\t},",
      "\t\tsymbol: {",
      "\t\t\ttype: \"text\",",
      "\t\t\tcolor: \"rgba(240,240,240,1)\",",
      "\t\t\thaloColor: \"rgba(55,56,55,1)\",",
      "\t\t\thaloSize: 0.75,",
      "\t\t\tfont: {",
      "\t\t\t\tweight: \"bold\",",
      "\t\t\t\tfamily: \"Noto Sans\",",
      "\t\t\t\tsize: \"12px\"",
      "\t\t\t}",
      "\t\t},",
      "\t\tlabelPlacement: \"center-center\",",
      "\t}],",
      "\tlabelsVisible: true",
      "}"
    ],
    "description": "Enable clustering on a layer",
    "prefix": "clusterConfig"
  },
  "Find a layer by it's name": {
    "prefix": "findLayer",
    "body": [
      "view.map.layers.find( l => l.title === \"${1:LayerTitle}\" );"
    ],
    "description": "Find a layer in the MapView by it's title"
  },
  "FillMesh3D": {
    "body": [
      "{",
      "\ttype: \"mesh-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"fill\",",
      "\t\tmaterial: { color: ${1:[255, 250, 239, 0.8]} },",
      "\t}]",
      "}"
    ],
    "description": "Generate MeshSymbol3D with a FillSymbol3DLayer",
    "prefix": "fillMesh3d"
  },
  "FillPolygon3D": {
    "body": [
      "{",
      "\ttype: \"polygon-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"fill\",",
      "\t\tpattern: {",
      "\t\t\ttype: \"style\",",
      "\t\t\tstyle: \"${1|solid,vertical,horizontal,forward-diagonal,diagonal-cross,cross,backward-diagonal|}\"",
      "\t\t},",
      "\t\tmaterial: { color: ${2:[255, 250, 239, 0.8]} },",
      "\t\toutline: { color: ${3:[70, 70, 70, 0.7]}}",
      "\t}]",
      "}"
    ],
    "description": "Generate PolygonSymbol3D with a FillSymbol3DLayer",
    "prefix": "fillPolygon3d"
  },
  "IconPoint3D": {
    "body": [
      "{",
      "\ttype: \"point-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"icon\",",
      "\t\tresource: { primitive: \"${1|circle,square,cross,x,kite,triangle|}\"},",
      "\t\tmaterial: { color: ${2:[255, 250, 239, 0.8]} },",
      "\t\tsize: ${3:20}",
      "\t}]",
      "}"
    ],
    "description": "Generate PointSymbol3D with a IconSymbol3DLayer",
    "prefix": "iconPoint3d"
  },
  "LabelingInfo2D": {
    "body": [
      "[",
      "\tnew LabelClass({",
      "\t\tlabelExpressionInfo: { expression: \"${1:\\$feature.NAME}\"},",
      "\t\tsymbol: {",
      "\t\t\ttype: \"text\",",
      "\t\t\tcolor: ${2:[0, 0, 0, 0.5]},",
      "\t\t\thaloSize: ${3:1},",
      "\t\t\thaloColor: ${4:[255, 255, 255, 0.9]}",
      "\t\t}",
      "\t})",
      "]"
    ],
    "description": "Generate 2D labelingInfo for a layer",
    "prefix": "labeling2d"
  },
  "LabelingInfo3D": {
    "body": [
      "[",
      "\tnew LabelClass({",
      "\t\tlabelExpressionInfo: { expression: \"${1:\\$feature.NAME}\"},",
      "\t\tsymbol: {",
      "\t\t\ttype: \"label-3d\",",
      "\t\t\tsymbolLayers: [{",
      "\t\t\t\ttype: \"text\",",
      "\t\t\t\tmaterial: {",
      "\t\t\t\t\tcolor: ${2:[0, 0, 0, 0.5]}",
      "\t\t\t\t},",
      "\t\t\t\thalo: {",
      "\t\t\t\t\tsize: ${3: 1},",
      "\t\t\t\t\tcolor: ${4:[255, 255, 255, 0.9]}",
      "\t\t\t\t},",
      "\t\t\t\tfont: {",
      "\t\t\t\t\tsize: ${5: 11},",
      "\t\t\t\t\tfamily: ${6:\"sans-serif\"}",
      "\t\t\t\t}",
      "\t\t\t}]",
      "\t\t}",
      "\t})",
      "]"
    ],
    "description": "Generate 3D labelingInfo for a layer",
    "prefix": "labeling3d"
  },
  "Line3D": {
    "body": [
      "{",
      "\ttype: \"line-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"line\",",
      "\t\tmaterial: { color: ${1:[255, 250, 239, 0.8]} },",
      "\t\tsize: ${2:15}",
      "\t}]",
      "}"
    ],
    "description": "Generate LineSymbol3D with a LineSymbol3DLayer",
    "prefix": "line3d"
  },
  "List map styles": {
    "prefix": "basemapStyle",
    "body": [
      "\"${1|arcgis-imagery,arcgis-imagery-standard,arcgis-imagery-labels,arcgis-light-gray,arcgis-dark-gray,arcgis-navigation,arcgis-navigation-night,arcgis-streets,arcgis-streets-night,arcgis-streets-relief,arcgis-topographic,arcgis-oceans,osm-standard,osm-standard-relief,osm-streets,osm-streets-relief,osm-light-gray,osm-dark-gray,arcgis-terrain,arcgis-community,arcgis-charted-territory,arcgis-colored-pencil,arcgis-nova,arcgis-modern-antique,arcgis-midcentury,arcgis-newspaper,arcgis-hillshade-light,arcgis-hillshade-dark|}\""
    ],
    "description": "List map styles"
  },
  "Load a MapView (2D)": {
    "prefix": "MapView",
    "body": [
      "new MapView({",
      "\tcenter: Number[] | Point",
      "\tcontainer: String | HTMLDivElement,",
      "\tmap: Map,",
      "\tzoom: 10",
      "})"
    ],
    "description": "Create an instance of esri/views/MapView."
  },
  "ObjectPoint3D": {
    "body": [
      "{",
      "\ttype: \"point-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"object\",",
      "\t\tresource: { primitive: \"${1|sphere,cylinder,cube,cone,inverted-cone,diamond,tetrahedron|}\"},",
      "\t\tmaterial: { color: ${2:[255, 250, 239, 0.8]} },",
      "\t\tdepth: ${3:15},",
      "\t\theight: ${4:20},",
      "\t\twidth: ${5:5}",
      "\t}]",
      "}"
    ],
    "description": "Generate PointSymbol3D with a ObjectSymbol3DLayer",
    "prefix": "objectPoint3d"
  },
  "Path3D": {
    "body": [
      "{",
      "\ttype: \"line-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"path\",",
      "\t\tprofile: \"${1|circle,quad|}\",",
      "\t\tmaterial: { color: ${2:[255, 250, 239, 0.8]} },",
      "\t\twidth: ${3:15},",
      "\t\theight: ${3:15},",
      "\t\tjoin: \"${4|miter,bevel,round|}\",",
      "\t\tcap: \"${5|butt,square,round,none|}\",",
      "\t\tanchor: \"${6|bottom,center|}\",",
      "\t\tprofileRotation: \"${7|all,heading|}\"",
      "\t}]",
      "}"
    ],
    "description": "Generate LineSymbol3D with a PathSymbol3DLayer",
    "prefix": "path3d"
  },
  "PictureFillSymbol": {
    "body": [
      "{",
      "\ttype: \"picture-fill\",",
      "\turl: \"image-url\",",
      "\twidth: 12,",
      "\theight: 12,",
      "\txoffset: 0,",
      "\tyoffset: 0",
      "}"
    ],
    "description": "Create a PictureFillSymbol",
    "prefix": "pictureFillSymbol"
  },
  "PictureMarkerSymbol": {
    "body": [
      "{",
      "\ttype: \"picture-marker\",",
      "\turl: \"image-url\",",
      "\theight: 12,",
      "\twidth: 12",
      "}"
    ],
    "description": "Create a PictureMarkerSymbol",
    "prefix": "pictureMarkerSymbol"
  },
  "Require": {
    "body": [
      "require([\"esri/Map\", \"esri/views/MapView\",\"dojo/domReady!\"],function(Map, MapView){",
      "",
      " });"
    ],
    "description": "Simple require example",
    "prefix": "require"
  },
  "SceneBackground": {
    "body": [
      "environment: {",
      "\tbackground: {",
      "\t\ttype: \"color\",",
      "\t\tcolor: ${1:[0, 0, 0, 0]}",
      "\t},",
      "\tstarsEnabled: false,",
      "\tatmosphereEnabled: false",
      "}"
    ],
    "description": "Change the background of a scene",
    "prefix": "sceneBackground"
  },
  "SimpleFillSymbol": {
    "body": [
      "{",
      "\ttype: \"simple-fill\",",
      "\tcolor: [0, 0, 0, 0.25],",
      "\tstyle: \"${1|solid,backward-diagonal,cross,diagonal-cross,forward-diagonal,horizontal,none,vertical|}\",",
      "\toutline: {",
      "\t\twidth: 1,",
      "\t\tcolor: [255, 255, 255, 1]",
      "\t}",
      "}"
    ],
    "description": "Create a SimpleFillSymbol",
    "prefix": "simpleFillSymbol"
  },
  "SimpleLineSymbol": {
    "body": [
      "{",
      "\ttype: \"simple-line\",",
      "\twidth: 1,",
      "\tcolor: [255, 255, 255, 1],",
      "\tstyle: \"${1|solid,none,dash,dash-dot,dot,long-dash,long-dash-dot,long-dash-dot-dot,short-dash,short-dash-dot,short-dash-dot-dot,short-dot|}\",",
      "\tcap: \"${2|round,butt,square|}\",",
      "\tjoin: \"${3|round,miter,bevel|}\"",
      "}"
    ],
    "description": "Create a SimpleLineSymbol",
    "prefix": "simpleLineSymbol"
  },
  "SimpleMarkerSymbol": {
    "body": [
      "{",
      "\ttype: \"simple-marker\",",
      "\tcolor: [255, 255, 255, 0.25],",
      "\tsize: 12,",
      "\tstyle: \"${1|circle,square,cross,x,diamond,triangle,path|}\",",
      "\toutline: {",
      "\t\twidth: 1,",
      "\t\tcolor: [255, 255, 255, 1]",
      "\t}",
      "}"
    ],
    "description": "Create a SimpleMarkerSymbol",
    "prefix": "simpleMarkerSymbol"
  },
  "symbols/SimpleRenderer": {
    "body": [
      "{",
      "\ttype: \"simple\",",
      "\tsymbol: ${1:symbol}",
      "}"
    ],
    "description": "Generate a SimpleRenderer",
    "prefix": "simpleRenderer"
  },
  "SizeVisualVariable": {
    "body": [
      "{",
      "\ttype: \"size\",",
      "\tfield: \"${1:POP_POVERTY}\",",
      "\tnormalizationField: \"${2:POP_TOT}\",",
      "\taxis: \"height\",",
      "\tlegendOptions: {",
      "\t\ttitle: \"${3:% population in poverty by county}\"",
      "\t},",
      "\tstops: [",
      "\t\t{ value: ${4:0.15}, size: ${5:4}, label: \"${6:<15%}\" },",
      "\t\t{ value: ${7:0.25}, size: ${8:12}, label: \"${9:25%}\" }",
      "\t]",
      "}"
    ],
    "description": "Generate a SizeVisualVariable.",
    "prefix": "sizeVar"
  },
  "UniqueValueRenderer": {
    "body": [
      "{",
      "\ttype: \"unique-value\",",
      "\tfield: \"${1:REGION}\",",
      "\tdefaultSymbol: ${2:symbol},",
      "\tuniqueValueInfos: [{",
      "\t\tvalue: \"${3:value}\",",
      "\t\tsymbol: ${2:symbol},",
      "\t\tlabel: \"${4:label for the legend}\"",
      "\t}]",
      "}"
    ],
    "description": "Generate a UniqueValueRenderer",
    "prefix": "uniqueValueRenderer"
  },
  "WaterSymbol3DLayer": {
    "prefix": "waterSymbol3dLayer",
    "body": [
      "{",
      "\ttype: \"polygon-3d\",",
      "\tsymbolLayers: [{",
      "\t\ttype: \"water\",",
      "\t\twaveDirection: 180,",
      "\t\tcolor: \"#5975a3\",",
      "\t\twaveStrength: \"${1|calm,rippled,slight,moderate|}\",",
      "\t\twaterbodySize: \"${2|small,medium,large|}\"",
      "\t}]",
      "}"
    ],
    "description": "Create PolygonSymbol3D with a WaterSymbol3DLayer"
  },
  "Generate a DotDensity Renderer": {
    "prefix": "dotDensity",
    "body": [
      "{",
      "\ttype: 'dot-density',",
      "\tdotValue: ${1:initialValue},",
      "\toutline: null,",
      "\tlegendOptions: {",
      "\t\tunit: \"${2:unitDot}\"",
      "\t},",
      "\tattributes: [",
      "\t\t{",
      "\t\t\tfield: \"${3:field_1}\",",
      "\t\t\tcolor: \"${4:color_1}\",",
      "\t\t\tlabel: \"${5:label_1}\"",
      "\t\t},",
      "\t\t{",
      "\t\t\tfield: \"${6:field_2}\",",
      "\t\t\tcolor: \"${7:color_2}\",",
      "\t\t\tlabel: \"${8:label_2}\"",
      "\t\t}",
      "\t]",
      "}"
    ],
    "description": "Generate a DotDensity Renderer"
  }
}