Adding an Image Map
To add a map to the maps button within your app, select the + New button in the top right of the screen.
Give the map a name and upload your image (png or jpg).
All map images are saved at a maximum size of 4000px wide.
You may crop the image by dragging the cropping box.
You may also hit approve without changing the cropping box to upload the image as is.
You must hit save after approving your image crop.
Background Color
You may select a background color to match the map image.
The default background color is a light gray.
Margins
Setting a margin to a map image allows the user to scroll past the edge of the map.
Leaving margins set to the default value of "0" should work great for the majority of use cases.
Adding Pinned Locations to a Map
New Map Locations
To add a new location to your map, select the New Location+ button above the map view.
Enter the name of the location in the dialog box.
UnPinned Locations
New locations added to a map appear in the UnPinned tab.
To pin the location, select the pin icon next to the location name.
If multiple locations are added, pins can be quickly added by selecting the pin icon next to each location in the UnPinned list.
All new pins get added to the center of the map.
The new pins are ready to be dragged and dropped to their final location.
New Pins
New pins appear on the map in red.
A red pin indicates the pin has not been moved from its default location.
A pin that is still in the default location will not appear in the app yet.
Drag the pin to save its final location.
If pinning multiple locations at the same time, clicking a pin shows the name of the location before dragging the pin to the final location.
Other Locations
Adding existing locations to a map is done from the Other Locations tab.
Existing locations can come from an agenda import.
To add a location from Other Locations, select the + icon next to the location name.
This action adds the location as an UnPinned location associated with the map.
From this point, pinning works exactly like pinning any other UnPinned locations.
Image Map on Device
Image maps load "zoomed out" to display as much of the map as possible.
An example shows how a 2000px w x 1098px h image loads in the app.
Default Background Color
Default background color is shown in the image map example.
Green Background Color
Green background color is shown in the image map example.
Maximum Zoom Level
The image map example shows the Max Zoom Area.
Adding a Street Map
In addition to displaying map images, street maps can be displayed under the map button.
Street maps are useful for displaying a map of an event venue location.
To add a street map, choose "Street Map" as the map type.
Give the street map a name.
Adding Pins to a Street Map
Pins can be added to a street map the same way pins are added to an image map.
Pinned locations do not appear until the user taps the map.
Center Point and Save View
The map center point can be adjusted by panning the map.
The center point adjustment is saved by selecting the save view button from the top.
Zoom Level and Save View
The map zoom level can be adjusted by hitting the + or - buttons on the map.
The zoom level adjustment is saved by selecting the save view button from the top.
Street Map On Device
A street map example is shown as it is loaded on the device.
> Note: no pin is shown by default. Only after tapping the screen will pinned locations appear.
Locations
A list of all locations can be found under the Related Resources > Locations section of the side navigation menu.
Add Locations
A new location can be added that is not associated with a map.
From the locations list, select the +New button from the top of the screen.
Locations Pinned Later
For locations that will be pinned later, enter the name of the location and save.
Locations Linked to a Google Map Address
For locations linked to a Google map address, fill in the Address fields.
Locations Linked to a Website
For locations linked to a website, fill in the Website Url field.
Location on Agenda
An example shows a location on an agenda.
Location with Address
An example shows a location with an address.
Location with Website Url
An example shows a location with a website URL.