Arcgis JS 4.x overviewmap

1663
11
01-25-2021 04:21 AM
upanshuvaid
New Contributor II

Hi ,

How to achieve overviewmap in arcgis js 4.15 similar to arcgis js 3.x .

Tags (1)
0 Kudos
11 Replies
VictorBerchet
Occasional Contributor
upanshuvaid
New Contributor II

Hi , 

I need similar functionality that is available in 3.x version . link for version 3 sample 

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=widget_overviewmap

 

0 Kudos
BlakeTerhune
MVP Regular Contributor

You have links for sample apps in both 4.x and 3.x versions of the JS API. Are you just unable to implement this in your app?

0 Kudos
upanshuvaid
New Contributor II

There is difference  in functionality but I need functionality exactly like 3.x version not 4.x version  .my organization is using 4.x version so can't switch to 3.x version . 

0 Kudos
upanshuvaid
New Contributor II

kindly provide an alternative of overviewmap in 3.x similar in 4.x

0 Kudos
BlakeTerhune
MVP Regular Contributor

@upanshuvaid wrote:

There is difference  in functionality but I need functionality exactly like 3.x version not 4.x version  .my organization is using 4.x version so can't switch to 3.x version . 


Can you clarify what you want the 4.x version of the overview map to do differently?

0 Kudos
upanshuvaid
New Contributor II

Overview map 3.x sample

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=widget_overviewmap

upanshuvaid_0-1611913554681.png

 

The functionality in 3.x is that when we drag the square in above figure the main  map gets changed .Also i want exactly same functionality in 4.x .Kindly revert asap as i have deadline to complete this.

0 Kudos
upanshuvaid
New Contributor II

Hi ,

Kindly help in implementing as i have critical delivery .

0 Kudos
BlakeTerhune
MVP Regular Contributor

I'm not able to develop a working solution for this but I think it should be possible. The extent indicator in the overview map is just a graphic so you should be able to modify it. Here's a solution that modifies a static graphic in a map view. I was also able to get the cursor to change when mousing over the overview extent graphic. You can use this on the 4.x example from above.

 

// get screenpoint from mapView's pointer-move event
mapView.on("pointer-move", function(event) {
    mapView.hitTest(event, {include: mapView.graphics}).then(function(response) {
    // check if a feature is returned from the hurricanesLayer
    if (response.results.length) {
        document.getElementById("overviewDiv").style.cursor = "move";
        const graphic = response.results[0].graphic;
        // do something with the graphic
    } else {
        document.getElementById("overviewDiv").style.cursor = "default";
    }
    });
});

Be sure to post back here if you're able to build a working solution! 😀

 

0 Kudos