JSFiddle - React, Tailwind, and code Playground
by schlomm
HTML
<script src="http://js.arcgis.com/3.9/"></script>
<link rel="stylesheet" href="http:////js.arcgis.com/3.9/js/esri/css/esri.css">
<body>
<div id="map"></div>
</body>
CSS
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
JavaScript
var map;
require([
"esri/map",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/renderers/SimpleRenderer",
"esri/layers/LabelLayer",
"esri/geometry/Polygon",
"esri/InfoTemplate",
"esri/graphic",
"dojo/on",
"esri/Color",
"dojo/domReady!"], function (
Map, Extent, FeatureLayer, GraphicsLayer,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol, SimpleRenderer,
LabelLayer, Polygon, InfoTemplate, Graphic,
on,
Color) {
map = new Map("map", {
center: [-75.249, 38.485],
zoom: 9,
basemap: "gray"
});
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
var singleRingPolygon = new Polygon([
[-75.77, 38.45],
[-75.77, 38.7],
[-75.11, 38.7],
[-75.11, 38.45],
[-75.77, 38.45]
])
var attr = {
"Area": "Southern Delaware"
};
var infoTemplate = new InfoTemplate("Location", "Area: ${Area}");
var gra = new Graphic(singleRingPolygon, sfs, attr, infoTemplate);
graphicsLayer = new GraphicsLayer();
graphicsLayer.add(gra);
map.addLayer(graphicsLayer);
// create a text symbol to define the style of labels
var textColor = new Color("#666");
var textLabel = new TextSymbol().setColor(textColor);
textLabel.font.setSize("14pt");
textLabel.font.setFamily("arial");
textLabelRenderer = new SimpleRenderer(textLabel);
var labels = new...