<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></title>
<link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="//js.arcgis.com/3.11/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
var map;
require([
"esri/map",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/layers/LabelLayer",
"esri/Color",
"dojo/domReady!"
], function(
Map, Extent, FeatureLayer,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,
LabelLayer,
Color
) {
// load the map centered on the United States
var bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
map = new Map("map", {
extent: bbox
});
/**/
var labelField = "STATE_NAME" ;
// create a renderer for the states layer to override default symbology
var statesColor = new Color("#666");
//var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
var statesLine = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, statesColor, null );
var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
var statesRenderer = new SimpleRenderer(statesSymbol);
// create a feature layer to show country boundaries
var statesUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
var states = new FeatureLayer(statesUrl, {
id: "states",
outFields: [labelField]
});
states.setRenderer(statesRenderer);
map.addLayer(states);
// create a text symbol to define the style of labels
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");
var statesLabelRenderer = new SimpleRenderer(statesLabel);
var labels = new LabelLayer({ id: "labels" });
// tell the label layer to label the countries feature layer
// using the field named "admin"
labels.addFeatureLayer(states, statesLabelRenderer, "{" + labelField + "}");
// add the label layer to the map
map.addLayer(labels);
/*
var labelField1 = "OTHER";
// create a renderer for the states layer to override default symbology
var statesColor1 = new Color("#000");
var statesLine1 = new SimpleLineSymbol("solid", statesColor1, 1.5);
var statesSymbol1 = new SimpleFillSymbol("solid", statesLine1, null);
var statesRenderer1 = new SimpleRenderer(statesSymbol1);
// create a feature layer to show country boundaries
var statesUrl1 = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
var states1 = new FeatureLayer(statesUrl1, {
id: "states"
,
outFields: [labelField1]
});
states1.setRenderer(statesRenderer1);
map.addLayer(states1);
// create a text symbol to define the style of labels
var statesLabel1 = new TextSymbol().setColor(statesColor1);
statesLabel1.font.setSize("12pt");
statesLabel1.font.setFamily("arial");
var statesLabelRenderer1 = new SimpleRenderer(statesLabel1);
var labels1 = new LabelLayer({ id: "labels1" });
// tell the label layer to label the countries feature layer
// using the field named "admin"
//labels1.addFeatureLayer(states1, statesLabelRenderer1, "{" + labelField1 + "}");
labels.addFeatureLayer(states1, statesLabelRenderer1, "{" + labelField1 + "}");
// add the label layer to the map
map.addLayer(labels);
*/
});
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |