SpatialTimes InfoWindow

SpatialTimes - Use Bootstrap to Customize Esri’s JavaScript InfoWindow Icons

HTML

<head>
  <title>Date Format</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css" />

  <script>
    var dojoConfig = {
      parseOnLoad: true
    };

  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://js.arcgis.com/3.17/"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.layers.FeatureLayer");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.number");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");

    var map;

    function init() {
      map = new esri.Map("mapDiv", {
        basemap: "hybrid",
        center: [69.698, 26.057],
        zoom: 6
      });

      dojo.connect(map, "onLoad", mapLoaded);
      map.infoWindow.resize(250, 95);
    }

    function mapLoaded() {
      //Some of the magnitude values have too many decimal places - use NumberFormat to round the values
      //Use DateFormat to format the date..
      var historicEarthquakes = new esri.layers.FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0", {
        infoTemplate: new esri.InfoTemplate("${Name}", "Magnitude ${Magnitude:NumberFormat(round:2)} earthquake occurred on ${Date_:DateFormat(datePattern:'MMMM d, yyyy.', selector:'date')}"),
        outFields: ["*"]
      });
      $(".esriPopupWrapper .titleButton.close").append("<span...

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#mapDiv {
  padding: 0;
}

.esriPopupWrapper .content .contentPane {
  background-color: #FFF;
  padding: 6px;
}

.esriPopupWrapper .esriPopupVisible .esriPopupMaximized {
  padding:200px;
}

.esriPopupWrapper .titleButton.close {
  color: #FFF;
  opacity: 1;
  background: none;
  text-shadow: none;
}

.esriPopupWrapper .titleButton.close:hover {
  color: #ff0000;
  opacity: 1;
  background: none;
  text-shadow: none;
}

.esriPopupWrapper .titleButton.close .glyphicon {
  top: -3px;
}

#SpatialTimes-info-close {
  font-size: 14px;
  width: 100%;
  height: 100%;
}