Custom Content in ArcGIS API Popups



Pop it up

I’ve at all times maintained that most likely essentially the most used widget within the ArcGIS API for JavaScript is the Popup. Except for zoom… You are first intuition whenever you see an online map with options it try to click on on them. Legends are nice, and visualizations are extremely highly effective at telling a narrative together with your information, however generally you simply need data a couple of explicit characteristic or location. That is the place the Popup shines!

By default, the Popup will normally present you tabular details about the characteristic attributes. Fast, easy, and to the purpose. You may have charts, attachment info, even use Arcade expressions in your Popups. I extremely suggest you benefit from the MapViewer to writer your Popups. This fashion you get a real-time expertise of what your Popups will appear to be. However, that does not imply you’ll be able to’t get a little bit artistic constructing customized content material on your popups. Let’s have some enjoyable.



Do what you need

As mentioned, there are various types of content you need to use in Popups.Probably the most attention-grabbing one for builders is perhaps CustomContent. Utilizing CustomContent, you’ll be able to return an HTML component, a widget, a string, something that may be displayed. It additionally helps Guarantees, so you’ll be able to execute quite a few asynchronous duties earlier than returning the content material. This sample does an excellent job exhibiting how one can run some statistics within the Popup and return a Search widget. Are you following me? A widget in your Popup! You may even load one other Map or Scene within the Popup if you need.

Perhaps you wish to show climate details about the situation on your Popup. There’s a fully free weather API you need to use from the Nationwide Climate Service for one thing like this. You will get the coordinates from the graphic on your Popup and use it question the climate API to get a forecast of climate info.

The code for this weblog put up is on the market on codepen

Let’s assume I’ve a FeatureLayer of cities, which is a reasonably good use case for displaying some climate info. I’d wish to present each the tabular info for a single subject, and my customized content material of climate forecasts. I may outline my PopupTemplate like this.

const layer = new FeatureLayer({
  popupTemplate: {
    title: "{NAME}",
    outFields: ["*"],
    content material: [
      new FieldsContent({
        fieldInfos: [
          {
            fieldName: "POPULATION",
            label: "Population",
            format: {
              places: 0,
              digitSeparator: true,
            },
          },
        ],
      }),
      new CustomContent({
        creator: async ({ graphic }) => {
          const { latitude, longitude } = graphic.geometry;
          const response = await fetch(
            `https://api.climate.gov/factors/${latitude},${longitude}`
          );
          const outcomes = await response.json();
          const { forecast } = outcomes.properties;
          const forecastResponse = await fetch(forecast);
          const information = await forecastResponse.json();
          const { durations } = information.properties;
          const component = doc.createElement("div");
          let fragment = `<h3>Climate Forecast</h3><br/>`;
          for (let a of durations) {
            fragment += `
                <picture width="36" peak="36" src=${a.icon}><br/>
                <robust>Title</robust>: <span>${a.title}</span><br/>
                <robust>Forecast</robust>: <span>${a.shortForecast}</span><br/>
                <robust>Temp</robust>: <span>${a.temperature}${a.temperatureUnit}</span><br/>
                <robust>Wind</robust>: <span>${a.windSpeed}, ${a.windDirection}</span><br/>
                <hr/>
            `;
          }
          component.innerHTML = fragment;
          return component;
        },
      }),
    ],
  },
  ...
});
Enter fullscreen mode

Exit fullscreen mode

Okay, let’s take a step again right here. Now we have an array for the popupTemplate.content material that comprises a FieldsContent and a CustomContent.

new FieldsContent({
    fieldInfos: [
        {
        fieldName: "POPULATION",
        label: "Population",
        format: {
            places: 0,
            digitSeparator: true,
        },
        },
    ],
})
Enter fullscreen mode

Exit fullscreen mode

It will show a single Inhabitants subject in tabular kind. That is fairly easy. Let’s check out the CustomContent.

new CustomContent({
    creator: async ({ graphic }) => {
        const { latitude, longitude } = graphic.geometry;
        const response = await fetch(
          `https://api.climate.gov/factors/${latitude},${longitude}`
        );
        const outcomes = await response.json();
        const { forecast } = outcomes.properties;
        const forecastResponse = await fetch(forecast);
        const information = await forecastResponse.json();
        const { durations } = information.properties;
        const component = doc.createElement("div");
        let fragment = `<h3>Climate Forecast</h3><br/>`;
        for (let a of durations) {
        fragment += `
            <picture width="36" peak="36" src=${a.icon}><br/>
            <robust>Title</robust>: <span>${a.title}</span><br/>
            <robust>Forecast</robust>: <span>${a.shortForecast}</span><br/>
            <robust>Temp</robust>: <span>${a.temperature}${a.temperatureUnit}</span><br/>
            <robust>Wind</robust>: <span>${a.windSpeed}, ${a.windDirection}</span><br/>
            <hr/>
        `;
        }
        component.innerHTML = fragment;
        return component;
    },
})
Enter fullscreen mode

Exit fullscreen mode

The important thing right here is utilizing the creator technique as an async operate in order that some information will be fetched from the climate API. We will pluck the latitude and longitude off the graphic geometry. As soon as we get the preliminary outcomes from the climate API for this location, that consequence will present numerous URLs for extra detailed climate info such because the forecast URL. We will ship one other request to the forecast URL and get a extra detailed 5 day forecast for day and night time climate info. It should even present an icon that coincides with the climate situations. We will use this info to assemble an inventory of HTML parts to show within the Popup. You must get a Popup that appears just like this!



Abstract

On the finish of the day, you’ll be able to just about use no matter you need inside CustomContent for a Popup. Perhaps you might have some customized chart necessities, or wish to run an evaluation on close by options. That is the fantastic thing about utilizing CustomContent, you are able to do no matter it’s worthwhile to do. I am very curious to see what some builders would possibly construct with this, perhaps even complete micro apps contained in the Popup to course of information!

You’ll be able to see extra particulars within the video beneath!


Add a Comment

Your email address will not be published. Required fields are marked *