JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="css/styles.css">
<script>var dojoConfig = {
packages: [{
name: "extras",
location: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
}]
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
require([
"dojo/parser",
"dojo/json",
"dojo/_base/array",
"esri/Color",
"dojo/number",
"dojo/dom-construct",
"esri/map",
"esri/geometry/Extent",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/renderers/ClassBreaksRenderer",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"esri/request",
"extras/Tip",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
parser, JSON, arr, Color, number, domConstruct,
Map, Extent, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, ClassBreaksRenderer,
FeatureLayer, Legend, esriRequest, Tip) {
// call the parser to create the dijit layout dijits
parser.parse();
var bounds = new Extent({"xmin":-2332499,"ymin":-1530060,"xmax":2252197,"ymax":1856904,"spatialReference":{"wkid":102003}});
window.map = new Map("map", {
extent: bounds,
lods: [{"level":0, "resolution": 3966, "scale": 15000000}],
slider: false
});
window.fl = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
maxAllowableOffset: window.map.extent.getWidth() / window.map.width,
mode:...