geodev-hackerlabs

Style a Layer Popup

In this lab you will use code to style a popup.

  1. Click create_starter_map/index.html and copy the contents to a new jsbin.com.

  2. In JSBin > HTML, update the require statement and function definition:

  require(["esri/map",
          "esri/layers/FeatureLayer",
          "esri/dijit/PopupTemplate",
          "dojo/domReady!"],
      function(Map, FeatureLayer, PopupTemplate) {
      ...
  1. Now add create a new PopupTemple with the popup template style desired:
  function(Map, FeatureLayer, PopupTemplate) {
    map = new Map("mapDiv", {
      center: [-122.68, 45.52],
      zoom: 10,
      basemap: "dark-gray"
    });

    var popupTemplate = new PopupTemplate({
      title: "Neighborhoods",
      // Fields
      fieldInfos: [
        { fieldName: "TOTPOP_CY", label: "Total Population", visible: true, format: { places: 0 } },
        { fieldName: "AVGHINC_CY", label: "Average Income", visible: true, format: { places: 0 } },
        { fieldName: "MEDAGE_CY", label: "Median Age", visible: true, format: { places: 0 } },
        { fieldName: "AREA", visible: true, format: { places: 2 } }
      ],
      // Charts
      mediaInfos: [
        {
          title: "Demographics",
          type: "piechart",
          value: { 
            fields: [ 
              "TOTPOP_CY", 
              "AVGHINC_CY", 
            ] 
          }
        }
      ]
    });
  1. Now add the template to the feature layer and add the featurelayer to the map.
    var featureLayer = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Neighborhoods_Enriched/FeatureServer/0", 
      {
        outFields: ["*"],
        infoTemplate: popupTemplate
      }
    );
    
    map.addLayer(featureLayer);
  1. Confirm that the JSBin Output panel shows styled popups when you click on the neighborhoods.

Your app should look something like this:

Bonus

This site is open source. Improve this page.