nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ElevationProfile chart without the widget

BrentGrossman

I want to provide the ability to generate and display an elevation profile by clicking on a button of my own creation. I'm able to invoke an ElevationProfileViewModel from my button, but I don't know how to display the chart that displays the elevation profile without the one in the full-blown widget.

Is this possible, and if so, how? It seems that it may be possible to remove the buttons from the widget via css, so that only the chart remains, assuming that I can get access to the ElevationProfileViewModel underlying the widget, to invoke and interact with it via my button. If there's a better way to do this, though, I'm all ears. Thanks in advance.

Trouver plus de publications taguées avec

Accepted answers

All comments

BrentGrossman

Thanks. I was going to have the user draw the line by calling elevationProfile.viewModel.start() when they click on my button, since there will be no button to click on the widget itself. It seems that the chart "automatically" gets drawn when the user is done drawing their line. I tested this out by modifying the example in the sandbox, and it seems to work.

ReneRubalcava

You can still do that via the input of the widget. Here is a project we did the UC precon showing how this takes the feature of a Popup and uses it as the input for the ElevationProfile.

https://github.com/EsriPS/building-stunning-webapps-2022/blob/4-state-and-map/src/data/map.js#L107-L119

BrentGrossman

Thanks! This will allow me to display a "chart-only" elevation profile without resorting to CSS trickery, which is great. I still want the user to be able to draw the line that will produce the chart by invoking that functionality via my button, but, as I indicated in my original post, I think I can access the ElevationProfileViewModel that's tied to the (chart-only) widget to make that work.

ReneRubalcava

You can accomplish this with visible elements.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ElevationProfile.html#visibleElements

const elevationProfile = new ElevationProfile({
  profiles: [
    {
      type: 'input',
    },
    {
      type: 'ground',
    },
  ],
  visibleElements: {
    legend: false,
    clearButton: false,
    settingsButton: false,
    sketchButton: false,
    selectButton: false,
    uniformChartScalingToggle: true,
  },
});

And you can get just the profile like this.

I've done this to add the ElevationProfile to the Popup.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.