csergent08

Adding the Overview Map Widget - Super Easy

Blog Post created by csergent08 Champion on Jan 9, 2015

If there was a widget that were to be crowned the easiest to add, I would have to give it to the overview map widget. This widget does not require you to add CSS or HTML to your application, just JavaScript. Why is that? Some say it's magic, others think that the Esri JS API takes care of this work for you. It's up to you what you decide. So here is how you add it in two steps.

Step 1

Add the overview map reference in your require statement. Don't forget to add your variable in your list of variables after the function statement.

"esri/dijit/OverviewMap", // Overview Map

 

Step 2

Add the overviewmap in JavaScript and start it up.

// overviewMap Begin
             var overviewMapDijit = new OverviewMap({
                map:map,
                visible:false
            });
            overviewMapDijit.startup();
            // overviewMap End

   

And you're done. You can check the complete updated code on the Esri based template or one of the custom templates for mobile or web.

Next up will be the scalebar widget. I found this widget to be tricky in the area of formatting, so this next post is scheduled for Monday,  January 12th and it will definitely be worth a look.

Outcomes