Creating a library of maps with MapifyPro is very simple, but also contains a lot of options. This section goes in depth to explain every single feature included with MapifyPro, how it works, and how creating a map integrates into the overall workflow. To start, just like many WordPress items (blog posts, plugins, etc.), you’ll simply click ‘add new’ at the top of the ‘Maps’ page to add your first map. Below is an image that showcases this button, as well as an overview of the ‘Maps’ page and how it will look after adding multiple maps. The tutorial on adding an actual map will continue below this image:
With version 3.0 and above of MapifyPro, the Map Settings section has been fully overhauled for the best user experience possible. Below we will outline every feature, and how it relates to your map:
MAP TITLE: Name you map here. This title will not display on your front-end map, so you may title it anything for reference.
BASIC SETTINGS:
This section will contain all basic items to setup your map, as outlined below:
a. Mode: This is where you select standard maps, or custom image mode.
b. Map ID: After publishing/updating your map, your Map ID will display here. You don’t need to worry about this number as it’s just for reference.
c. Shortcode: This is the code you’ll use to paste your map anywhere on your site. Simply copy and paste this full code to place this specific map. Note that the shortcode contains the Map ID, and the height/width parameters (which dictate the size of your map when it displays on the front-end.
d. Default Pin Image: This is the small graphic you’ll want to use as the default pinpoint/marker for each location. You can add a different pinpoint graphic to each location, but if they are not specified in the Location Settings, then this is the graphic that will display instead. We suggest using the graphic that will be seen for most of your locations to save time down the line.
e. Enable Mouse Zoom: This enables zoom via mouse scrolling. Note that this can be annoying on mobile devices or fullscreen maps as it can cause the user to get “stuck” in the map when trying to scroll. In these cases we suggest turning this off.
f. Enable Manual Zoom: This adds the +/- icons for manual zooming on the map via clicking.
g. Enable Clustering: With clusters, multiple nearby locations will be grouped into single icons that, when clicked, will zoom in and expand to show the locations within. This is very useful for when many locations are close together. This feature is dynamic based on the zoom level.
h. Enable “Use My Location”: This is a new feature for version 3.0 and above. When clicked, it will show the user’s current location. Note that this is dependent on the user allowing location services to be enabled, and also that your site is secure. Insecure sites (i.e. http://) will not work as this is a browser-enabled security feature.
i. Pop-up Text / Labels
This area let’s you change the text that appears in the pop-up after a location is clicked, as shown below:
SEARCH AND FILTER SETTINGS: All settings related to filter details, and search options are contained in this section. We will outline them for you beneath the following image.
a. Enable Search: Hide or show the search area on your map to allow searching by city or zip/postal codes
b. Enable Filter Dropdown: Enable a dropdown that allows users to select filters that you’ve assigned to the map. When the user selects a filter, only those locations tagged with that filter will show. This is how it looks on Mapifypro.com:
c. Enable Filter List: This has the same functionality as the filter dropdown, but adds the list beneath the map, similar to a map legend. You can assign a graphic to each filter when displayed this way as well. This is how it looks on Mapifypro.com:
d. Center Map on Search Results: When enabled, the map will center on the location(s) that appear after a user enters a search. This is very useful for mobile users and we suggest turning this on.
e: Center Map on Filters: Same as above, but when selecting filters.
f. Text / Labels: This section lets you change the text/labels that appear on the front end maps in regards to filters and the search area.
SEARCH RADIUS SETTINGS: This section contains settings related specifically to the search radius feature. This allows you to specify the granular settings of how far you want users to search, as well as specified countries. More details are included after the following image.
a. Search Radius: This is the default search radius in miles or kilometers. This is only important if you don’t enable specific search radius variables on the front end map (more on that below).
b. Search Radius Unit: Specify whether you’d like to use miles or kilometers. This will change the functionality of the maps in order to search in the correct unit distance, and also the labels used (miles or kilometers).
c. Search Region Bias: If you have locations in a single country, we suggest entering the country code here (i.e. UK, US, CA). This will provide more consistent search results in your specific country. You can click on the link provided there for a list of country codes.
d. Enable Front-End Search Radius: This setting allows the front-end user to specify the distance in which they’d like to search on the Mao when using the search feature. If this is not enabled, the distance will default to what you specify in the “Search Radius” setting mentioned above. If enabled, it will apply default values, but you can specify these below.
e. Front-End Search Radius Options: This is where you can specify the different search distances that users can select on the front-end. For example, you ay want to add 5 miles, 25 miles, 100 miles, 500 miles. You will add these here under each option, and it will allow your users to select those distances on the map when searching. If left blank, MapifyPro will assign default values. Here is an example of how it will appear on the map:
TOOLTIP MARKER/PINPOINT SETTINGS: All settings in regards to your tooltips and pinpoint/markers are located here. Full details are found below this reference image:
a. Animated Tooltips? When enabled, tooltips will fade in with a subtle animation. When disabled, they will instantly appear/hide with no effect applied.
b. Tooltips Orientation: With MapifyPro 3.0 and above, you can now add a featured image to each tooltip (these images are applied in the location settings). however here you can specify whether the image will appear above the text or to the left. It also changes the general orientation of the tooltip design. Here are examples of each:
Left Orientation Tooltip with featured image:
Top Orientation Tooltip with featured image:
c. Animated Pinpoints? This setting allows you to specify if you’d like to enable the subtle tooltip animation. When enabled, the pinpoints will appear to fall onto the map with a subtle bounce effect.
INTERACTIVE LIST OF LOCATIONS SETTINGS:
This feature relates to a fully interactive list that can be placed beneath the map. This list contains information on the location, and buttons to further interact by getting directions, or opening the “More Details” pop-up. On click, the list item will expand to show these details, as well as highlight the location on the actual map. We will describe each feature below, but here is an example of the list on the front-end map:
a. Enable: Select Yes or No to enable/disable this feature
b. Number of Locations in List: This will specify the number of items to appear on the list before pagination occurs. For example if you set this to 5, but have 25 total entries, the user will see the first five, then will need to click next to see more.
c. Hide List By Default: This will hide the list the the map is first loaded, or when “Default View” is clicked. When a user performs a search or selects a filter, the list will then display beneath the map with only the appropriate locations showing. For example, if I search “New York” then locations will appear in the list beneath the map, as well as showing the locations on the map itself. Further, locations are listed from closest to farthest, based on the user’s search.
d. Text / Labels: Use these to specify the text you’d like to appear on the 2 buttons that appear in the interactive list. By default, they will read “More Details” for the popup button, and “Get Directions” for the button that provides directions to this location.
COLOR / DESIGN SETTINGS:
Use these settings to edit the overall style of all MapifyPro elements. All details are outlined beneath the following reference image:
a. Map Background: This is the background that appears behind the image you use in image mode. it only applies to Image Mode, and only if you’re using a transparent PNG file.
b. Tooltip Background: This is the color of the tooltip.
c. Tooltip Transparency: Adjust the transparency of the tooltip.
d. Tooltip Text Color: Change the font color of the tooltip text. This is useful if you want a darker tooltip and lighter text color, or vice versa.
e. Popup Background Color: This is the color of the location popup’s background (default white).
f. Popup Header: This is relative to the blog article format, which has a colored bar at the top. Use this setting to change that color. Not needed for normal location popups.
g. Popup Date Background: This is relative to the blog article format, which has a colored date indicator at the top to indicate when the blog post was published. Use this setting to change that color. Not needed for normal location popups.
h. Popup Accent: This is the color of the “Get Directions” button and other minor accent colors that appear in the location popup.
MAP/IMAGE MODE SETTINGS: This section pertains to specifics related to the mode you have chosen for your map.
a. Map Mode Settings > Style: This let’s you choose a unique style for the map. We have multiple options built in that let you achieve different styles, like black and white, pastel, and other creative options. Simply select a style and you’ll see the map preview at the bottom of the page change to reflect the new style. This relates to Map Mode only.
b. Image Mode > Map Image: When in image mode, this is where you’ll upload your image to be used as the map. This works by uploading the image to our server, where it is rendered into tiles, then sent back to you. After this process, the map will then behave much like standard maps, complete with zoom affects and more. Note that after you select the file to upload, you must click “Update” at the top in order to start the rendering process. It typically take about 2 minutes. We suggest using an image around 2500 pixels wide at minimum. Larger file sizes will naturally take longer, but you’ll see a progress bar that indicates status (under the “Status” section). Once complete, you will see a message that indicates as such.
DEFAULT ZOOM LEVEL AND LOCATION SETTINGS: In this final section, you’ll specify the details on how you’d like your map to appear on first view when a user visits your map on the front end. Details are outlined below this image:
a. Main Location: This is the location where you’d like you map to center upon by default. You will find 2 options here: Manual Center and zoom: Allows you to simply click on the map to specify the center location. Existing Location: This let’s you center upon one of the locations you’ve created in your Map Location library.
b. Initial Zoom and Style Preview: This preview map has a few benefits: It allows you to specify the zoom level (which will carry over to the front-end map), it let’s you preview the style you chose from the style settings (or the image if using Image Mode), and also let’s you preview the center location of the map. If you’ve selected “Manual Center and Zoom” you will also be able to double click in order to center the map’s default location.
PUBLISH AND MAP FILTER TAGS (Right Sidebar): In the right sidebar you’ll find one more important MapifyPro-specific feature. This is where you’ll establish the filters that will appear on this map. Also, when all settings are updated, you’ll click Publish (or Update) to apply changes, just like a blog post. We’ll cover the filter details beneath the following reference image:
a. Publish/Update: When updating or creating a new map, be sure to click this button to apply changes, just like any WordPress page or post.
b. Map Filter Tags: In the image above, you’ll see the area we’re referring to. Creating Map Filters is a 2 step process. First, you must create the filters here in the map settings. This makes them available on the map and any location that appears on the map. Next, when you’re creating a location, you’ll then assign a tag or tags to the location (the same filters you create here). Here’s a work flow of how this would work.
In the sidebar here in the MAP SETTINGS page, I’ll add 3 Filter Tags: Hotels, Restaurants, and Pubs, clicking “Add” after I enter each. This will add the filter to the maps library of filters.
Next, I will create my location (more details on this in the next section). While creating the location, in the “Map Filters” section, I will “tag” the filter I want to apply. For example, if I create a location that is a hotel, I will tag that location with the HOTELS filter I created in the map settings. This means that on the front end map, when a user selects the HOTELS filter, the locations I tagged with the HOTELS filter will then show on the map. The same goes for Pubs, and Restaurants.
Filters can be combined as needed for various results.
That covers your map settings! After you’ve made all changes, simply select “Publish” and your map will be available to place anywhere on your site! But first, you’re going to want to add locations, so that’s what we’ll cover next.
