/
New look for iShare Maps

New look for iShare Maps

A modernised new look is now available in iShare Maps. This new front end to iShare Maps incorporates a fresh new visual design, and implements many accessibility improvements over the current iShare Maps user interface.

The iShare Maps new look is available from iShare v6.0.9 onwards. To view it in your v6.0.9+ installation, browse to /mycouncil-example.aspx.

image-20251127-133318.png

Accessibility improvements

Many issues have been addressed to improve accessibility. Each is informed by the Web Content Accessibility Guidelines (WCAG), the industry standard for web accessibility. Details of WCAG are at https://www.w3.org/WAI/standards-guidelines/wcag/.

  • WCAG 1.4.3 My Nearest: Increase contrast in address search results drop-down

  • WCAG 2.1.1 My Maps: Feature info popup can be closed via keyboard shortcut

  • WCAG 2.4.1 “Skip to content” link

  • WCAG 2.4.7 My Maps: Remove inaccessible drag-and-drop menu functionality

  • WCAG 4.1.2

    • ARIA landmarks for structural page elements

    • My Maps: ARIA label for menu button

    • My Maps: ARIA labels for “Find Nearest” dropdowns

    • My Maps: ARIA label for “Search for…” input

    • May Map: ARIA role and label for popup

    • My Maps: ARIA role and label for feature info popup close button

    • ARIA “hidden” role removed from focusable element

  • WCAG 4.1.3 My House: ARIA role for static address results list

Implementation instructions

To make use of the iShare Maps new look, carry out the following steps:

  1. Make a copy of D:\Astun\iShare\TEST\WebApps\Web\mycouncil-example.aspx with a more suitable name for production use

  2. Copy D:\Astun\iShare\TEST\WebApps\Web\custom.example\_mycouncil-example-template.html to D:\Astun\iShare\TEST\WebApps\Web\custom\ with a more suitable name for production use

  3. Copy D:\Astun\iShare\TEST\WebApps\Web\custom.example\css\lorem-ipsum-council.css to D:\Astun\iShare\TEST\WebApps\Web\custom\css\ and rename it appropriately

  4. Open the renamed copy of mycouncil-example.aspx in a text editor, and update the links to the renamed copies of _mycouncil-example-template.html and lorem-ipsum-council.css

In multilingual sites, CSS files are often shared between both language workspaces

Test the site, to ensure everything is working properly, and that you are happy with the new design. To go live:

  • Add the filename of the renamed mycouncil-example.aspx to the Default Document settings in IIS:

image-20251127-133415.png

Move the new file to the top of the Default Documents list, and browse to your test site.

Customization

If you upgraded from a previous version of iShare Maps, the new look will not include any of your customizations, and your existing home page with its customizations will be unaffected. However, the iShare Maps new look has been built on top of the existing front-end code, meaning that you can recreate any customizations you made following the iShare documentation at Creating your MyCouncil page.

Three approaches are available to customize the new Maps front end:

  1. If you like the styles in the example page and just want to change the colours, alter the CSS custom properties in your renamed copy of lorem-ipsum-council.css:

    #atContainer, #atSkipHeader, #atHeader, #atFooter, #atMapLoader, .atPanelWrapperParent, .map-panel { --border-width: 1px; --background-colour: #f9f9f9; --text-colour: #333; --principal-colour: rgb(29, 89, 158); --principal-accent-colour: rgb(0, 0, 96); --principal-contrast-colour: #fcfcfc; --secondary-colour: var(--principal-colour); --secondary-accent-colour: var(--principal-accent-colour); --hover-colour: var(--principal-accent-colour); --hover-highlight-colour: rgba(from var(--principal-colour) r g b / 20%); --hover-decoration-line: none; --focus-highlight-colour: rgba(from var(--principal-colour) r g b / 50%); --tab-radius: 2rem; --header-radius: 10px; --input-radius: 0.5rem; --button-border-style: solid; --button-border-color: var(--principal-accent-colour); --button-background: var(--principal-colour); --button-color: var(--principal-contrast-colour); --element-gap: 0.5rem; --link-colour: var(--principal-accent-colour); --panel-padding: 1rem; }

  2. If you want something similar to the example page but with more design elements from your existing site, then set the colours as in option 1, and recreate any extra styles you want into that same stylesheet.

  3. If you prefer to copy your existing design more closely, then use renamed copies of mycouncil-base.aspx and _mycouncil-base-example.html instead of mycouncil-example.aspx and create a new main stylesheet to build your design styles from scratch. You can also try to copy the stylesheet(s) from your existing iShare v5 site, although changes will be required to get them to work properly in iShare v6.

Test to ensure both iShare Maps and your design work correctly.

Technical changes from the previous version

The visual and accessibility improvements have been implemented as follows:

  • atmypages.css has been superseded by myhouse_base.css

  • map_base.css has been superseded by mymaps_base.css

  • popups have a close button at the bottom of the panel, to account for the various orientations of the popup and not wanting to obscure scrollbar controls or the popup 'tail', or to move the close button around

Import these two CSS files into new pages instead of your previous imports from the /css folder, either directly or through @import url() in custom stylesheets.