JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Popup</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/>
<style>
html,body,#map{
padding:0;
margin:0;
height:100%;
}
.esriPopup.myTheme .titlePane,
.dj_ie7 .esriPopup.myTheme .titlePane .title {
background-color: #899752;
color: #333333;
font-weight: bold;
}
.esriPopup.myTheme .titlePane {
border-bottom: 1px solid #121310;
}
.esriPopup.myTheme a {
color: #d6e68a;
}
.esriPopup.myTheme .titleButton,
.esriPopup.myTheme .pointer,
.esriPopup.myTheme .outerPointer,
.esriPopup.myTheme .esriViewPopup .gallery .mediaHandle,
.esriPopup.myTheme .esriViewPopup .gallery .mediaIcon {
background-image: url(./images/popup.png);
}
.esriPopup.myTheme .contentPane,
.esriPopup.myTheme .actionsPane {
border-color: 1px solid #121310;
background-color: #424242;
color:#ffffff;
}
</style>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<script>
require([
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/on",
"dojox/charting/Chart",
"dojox/charting/themes/Dollar",
"dojo/domReady!"
], function(
Map,
Popup,
PopupTemplate,
...