Select to view content in your preferred language

Bookmark Widget - disable zoom

216
3
Jump to solution
09-10-2024 12:19 PM
Leonidas
Emerging Contributor

 

I was hoping to find a way to use the bookmark widget as a way to turn on and off multiple layers at a time.  I don't want the map extent to change, only the new layers to be displayed.  In the section below (around line 665 of the widget tsx file, I tried removing jimuMapView.view.goTo section but that did not have the desired result.  The bookmark would still change the map extent.  My custom bookmark widget did not throw any errors when starting the client.  

The question of turning multiple layers on and off using a button or other method has been discussed before.  So far the only solution is to use different views.  For my application I would like to use separate views for another purpose and would not want to manage 15-20 different views for simple layer toggles.  I was able to this in Web AppBuilder.  Any ideas to make this work in Experience Builder via a button or Bookmark widget would be much appreciated.

 

viewBookmark = (item: ImmutableObject<Bookmark>) => {
    const { appMode, config } = this.props
    const { jimuMapView } = this.state
    const { extent, viewpoint } = item
    const gotoOpts = { duration: AUTOPLAY_DURATION }

    if (appMode === AppMode.Run) {
      if (jimuMapView && jimuMapView.view) {
        jimuMapView.view.type === '3d'
          ? jimuMapView.view.goTo(
            this.Viewpoint.fromJSON(viewpoint),
            gotoOpts
          )
          : jimuMapView.view.goTo(
            this.Extent.fromJSON(extent),
            gotoOpts
          )
        if (item.baseMap) {
          const baseMapJson = item.baseMap.asMutable ? item.baseMap.asMutable({ deep: true }) : item.baseMap
          jimuMapView.view.map.basemap = this.Basemap.fromJSON(baseMapJson)
        }
        if (item.timeExtent) {
          const timeExtent = item.timeExtent.asMutable({ deep: true })
          applyTimeExtent(jimuMapView, timeExtent)
        }

 

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

I took a quick look at the code for the Bookmark Widget and I believe you have correctly identified the part of the code that makes the map move. 

Are you working in a copy of the Bookmark Widget that you have re-named and moved into the your-extensions folder? https://community.esri.com/t5/experience-builder-tips-and-tricks/modifying-esri-widgets-and-making-t...

Can you add a console.log to verify that this section of code is being hit when the bookmark is used?

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
3 Replies
JeffreyThompson2
MVP Regular Contributor

I took a quick look at the code for the Bookmark Widget and I believe you have correctly identified the part of the code that makes the map move. 

Are you working in a copy of the Bookmark Widget that you have re-named and moved into the your-extensions folder? https://community.esri.com/t5/experience-builder-tips-and-tricks/modifying-esri-widgets-and-making-t...

Can you add a console.log to verify that this section of code is being hit when the bookmark is used?

GIS Developer
City of Arlington, Texas
0 Kudos
JeffreyThompson2
MVP Regular Contributor

If you have a working widget, please consider sharing it in the custom widgets group. I'm sure many people would find it useful.

https://community.esri.com/t5/experience-builder-custom-widgets/gh-p/eb-custom-widgets

GIS Developer
City of Arlington, Texas
0 Kudos
Leonidas
Emerging Contributor

I posted a reply but I guess it did not make it through for some reason.  I had to comment out the 3d section in the ternary conditional.  Originally I had delated the second part of the ternary clause.  Code is pasted below.  It is not pretty.  I will likely clean it up as the code below shows the console testing I was doing.  Thanks for the tip.

I am not sure where the view type is set as 3d in app or webmap.  Initially I only removed the second jimuMapView.view.goTo which was what I though would apply to my map.

Thanks again!

if (appMode === AppMode.Run) {
      if (jimuMapView && jimuMapView.view) {
	    console.log("Bookmark no zoom test");
        jimuMapView.view.type === '3d'
          /*jimuMapView.view.goTo(
            this.Viewpoint.fromJSON(viewpoint),
            gotoOpts
          )*/
		console.log("3D zoom test");

 

0 Kudos