AnsweredAssumed Answered

Custom Buttons For OverviewMap

Question asked by tim.skinner@kent.gov.uk on Jul 30, 2012
Latest reply on Jul 31, 2012 by tim.skinner@kent.gov.uk

Like • Show 0 Likes0
Comment • 3

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.

tim.skinner@kent.gov.uk Jul 31, 2012 12:13 AM

Correct Answer

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.

See the reply in context

No one else had this question

Outcomes

khutchins-esristaff

Jul 30, 2012 9:41 AM

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;
}

Attachments

overview.png8.0 KB

Actions

tim.skinner@kent.gov.uk Jul 31, 2012 12:01 AM

Thanks kelly, I'll give that a go.

Actions

tim.skinner@kent.gov.uk Jul 31, 2012 12:13 AM

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.

Actions

GeoNet

The Esri Community

Custom Buttons For OverviewMap

Outcomes

Attachments

Related Content

Recommended Content