topic Re: Custom Buttons For OverviewMap in ArcGIS JavaScript Maps SDK Questions

Custom Buttons For OverviewMap

TimSkinner — Mon, 30 Jul 2012 12:27:09 GMT

Is there a way to override the default Show Overview Map and Hide Overview Map button icons ? My users like the overview map, but want to know if they can change the icons. I have looked at the documentation for the dijit and also examined the HTML and CSS using firefox, but can't see an obvious way of doing it.

Re: Custom Buttons For OverviewMap

KellyHutchins — Sun, 12 Dec 2021 08:04:43 GMT

Tim,

If you take a look at the OverviewMap.css file using Firefox you'll see references to overview.png. This is a sprite that contains all the images used by the OverviewMap widget (see attached). You can replace these images with your own images by modifying the following css classes to point to your new image.
[ATTACH=CONFIG]16478[/ATTACH]


.esriOverviewMap .ovwMaximize {
    background: url("../images/overview.png") repeat scroll 0 -130px transparent;
}
.esriOverviewMap .ovwRestore {
    background: url("../images/overview.png") repeat scroll 0 -104px transparent;
}

.esriOverviewMap.ovwTL .ovwShow, .esriOverviewMap.ovwBR .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -26px transparent;
}
.esriOverviewMap.ovwTR .ovwShow, .esriOverviewMap.ovwBL .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 0 transparent;
}
.esriOverviewMap.ovwBL .ovwShow, .esriOverviewMap.ovwTR .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -78px transparent;
}
.esriOverviewMap.ovwBR .ovwShow, .esriOverviewMap.ovwTL .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -52px transparent;
}
.esriOverviewMap .logo-med, .esriOverviewMap .logo-sm, .esriOverviewMap .bingLogo-lg {
    display: none;
}

Re: Custom Buttons For OverviewMap

TimSkinner — Tue, 31 Jul 2012 07:01:26 GMT

Thanks kelly, I'll give that a go.

Re: Custom Buttons For OverviewMap

TimSkinner — Tue, 31 Jul 2012 07:13:19 GMT

Kelly, I tried the solution you suggested and found that I had to include '!important' in each of ther entries in my local css, then it worked fine. Thanks for your help.