Skip to main content

Map Component

What are maps?

Maps enable you to see records in your database that contain Address Fields on a Google Map. 

Map-Image-min.jpg

Adding Maps

To add a Map component, choose the Map component and then choose the data table to be used for this Resource. 

Only tables which contain an address field will be available as an option for Maps. 

Once you've chosen the table, you can choose Quick Add which will add the Resource component with some default settings. Alternatively, you can choose Customize to configure all the settings manually. 

Choosing QuickAdd is simply a shortcut, you can always go right back into the component to make any changes necessary. 

Inside the Resource component you'll see have some standard options available in other components, as well as unique settings only available in the Resource component. 

  1. Data Source
  2. Map Options
  3. List View
  4. Popup View

Data Source

The Data Source tab is where you can filter which records will be displayed in this component with some 'server-side' filtering. Since this is universal to all components you can view it as its own article here. Learn more about Data Source. 

Map Options

Inside the Map Options is where you can set most of the map settings relating to this component. 

Under General Options you'll have 3 basic options. 

Title

This will be the title displayed on top of your map. 

Description

This is a description for your own reference. 

Address Field

This is the address field from your data table to be used for placing markers on the map. For example if each record has 2 addresses  such as Home and Work addresses, you can only use one of those as the source for address fields. 


Under Map Settings you'll have another 3 settings: 

Map Size

This is the size of map height. By default, the map will always be the full width of its parent container. Only the height can be adjusted. 

Zoom Level 

The zoom level is the default zoom when the map first loads. This can be anything from 1 (Zoomed Out) to 20. 

Zoom-Levels.jpg

In general you can think of the zoom levels as: 

  • 1: World
  • 5: Landmass/continent
  • 10: City
  • 15: Streets
  • 20: Buildings

Map Type

The map type will determine if it should show Roadmap, Satellite, Hybrid or Terrain. 

kScmap-types.jpg


Under Interactive Options you can enable any interactive options available for this component. 

Show List Panel

By enabling this option you'll be able to choose which values to show on the side panel next to the map. 

Map-List-Panel.jpg

Once this is enabled, you can customize what shows in each record by going to the List View inside the map component. When you have a List View enabled, clicking on one of the records will move the map to the chosen record and open the details in the Popup. 

Enable Popup

Popup enables you to view more details when a Map Marker is selected. you can customize what shows in each popup by modifying the fields inside the Popup view. 

Enable Scroll to Zoom

With this setting you can disable the scroll wheel on the mouse from zooming the map in and out. 


Under General Options you can set the following options: 

  • Default Pin
  • No Data Text
  • Record Limit

Default Pin

The default pin is the icon that will be displayed on the map. You can customize the pin based on predefined conditions and when no conditions are met this pin will be used. Learn more about Pin Color Rules here

No Data Text

This is what will show when there are no records to show. 

Record Limit

Set a limit or allow all records to show up on a map. 


Pin Color Rules

Here you can set color rules to determine which icon as well as its color to be used for each record. 

maps-pin-color-rules.jpg

List View

The list view is the section on the side of the page that will allow any details about each record you chose to add. 

map-list-view.jpg

Popup View

Inside the popup view you can choose which fields will show up when a marker on the map is clicked. This only is an option when the Enable Popup option is enabled. 

map-popup-view.jpg

Maps and custom domains

If you're using maps with a custom domain, please let us know so we can white list your domain to ensure it works correctly.