ATM & Branch Locator · Banno Docs

Setup

The ATM Locator component consists of 3 parts: Map, Search, and List. All three parts MUST be included in a page but order does not matter. If the design doesn’t have a specific section, wrap it inside a hidden div. <div class="d-none" aria-hidden="true" />

  <banno:location-map></banno:location-map>

<banno:location-search></banno:location-search>
<banno:location-search refine-visible="true"></banno:location-search>

Include attribute ‘refine-visible=“true”’ to make Refine search visible. By default it is invisible and will need to click a link to render this block.

List

<banno:location-list></banno:location-list>
<banno:location-list networks="0,1,2,branches"></banno:location-list>

Include ’networks’ attribute to show only those atm networks/branches
Cannot have spaces between network IDs
IDs can be found here: {{PLATFORM_DOMAIN}}/a/cms/api/site/{{FI_DOMAIN}}/atm/networks
- Ex. If you wanted to find the network IDs for https://ccfinancial-uat.banno.com you would use https://uat.banno.com/a/cms/api/site/ccfinancial-uat.banno.com/atm/networks
Items within this list cannot be alphabetized or forced into any particular order.
To style the pagination for the ATM locator with custom arrows or CSS triangles, see this snippet.

Applying custom styling to the map

To style the map a variable can be set or included in the page’s template file and must use the name ‘mapStyles’. Default google map styling will be used if this variable is not set.

<script>
  var mapStyles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];
</script>

Further documentation on what can be done with the styling can be found at https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

And to get some ideas on what can be done https://snazzymaps.com/ has quite a few pre-made settings available.

A beautiful example of this styling can seen at https://www.visionone.org/vision-one/visit.

Form Connecting Another Page to the ATM Locator

A simple form can be placed on another page of the website, that allows the user to enter a zip code, address, etc. On submit of that form, the user is taken to the page that uses the branch/ATM locator Banno Component with their search already filled in. For documentation / more info on how to do this, go to this page.