Arcgis JS 4.x overviewmap

[upanshuvaid]

Hi ,

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

[VictorBerchet]

Have you check the sample code ?

https://developers.arcgis.com/javascript/latest/sample-code/overview-map/index.html

[upanshuvaid]

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

[BlakeTerhune]

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?

[upanshuvaid]

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 . 

[upanshuvaid]

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

[BlakeTerhune]

---

@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?

[upanshuvaid]

Overview map 3.x sample

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

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.

[upanshuvaid]

Hi ,

Kindly help in implementing as i have critical delivery .

[BlakeTerhune]

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! 😀