WordPress Interactive Map Plugin (CMML) - Use Case - How to Track User Location Trails and Routes On the Map

How to track user location trails and routes on the map

Back to User Guides

Introduction

The WordPress Interactive Map plugin allows you and your users to create and showcase locations in Google Maps, including images and notes for each. It also allows you to track user locations.

The Send User Location add-on helps you to create and configure a button that adds track user locations on a map.

Use Case Front-End

Use Case Assumptions

In this example use case guide, we'll cover how to track user location trails and routes on the map. We will send a few locations that we visit and there will be displayed a route on the map.

It follows:

• Installing the plugin
• Configuring the add-on
• User Tracking options
• Creating a button for sending track user location
• Managing Time Based Location Layers
• End Result
• Extra - Troubleshooting

Installing the Plugin and Add-on

The process is the same for all CM plugins and add-ons.

• Download the plugin from your customer dashboard.
• Log in to WordPress and navigate to the WordPress Admin  → Plugins settings.
• Click on Add New.
• Activate it and add the license.

TIP: Automatic Index and Dashboard

Upon installation, the plugin automatically creates a page for the location index and another for the dashboard. Head to Settings → General tab to:

1. Find shortcuts to these pages
2. Enable or disable them (useful if you want to create your own)

Configuring the Add-on

First you need to generate REST API Key. To do this navigate to Admin Dashboard → CM Map Locations Pro → Settings → Setup tab.

Under the Location REST API section, turn on the option Enable REST API and click the button Generate Key. 

Copy the key that appeared in the field API key for adding location via REST API, and don't forget to click the button Save at the bottom of the page.

Then navigate to Admin Dashboard → CM Send User Location → CM Send User Location.

Under the General tab, include the key you just generated to the field API Key and the server address attached to it to the field Server Address.

Also, choose if you want to include the name field and the description field near the button or not, using corresponding options Enable name field and Enable description field.

Under the Google Map section you can configure adding temporary locations.

• Enable Google Map - Enabling this option can solve some conflicts with other plugins or themes that also include the Google Maps API on each page, e.g. Geodirectory.
• Google Maps App Key - Here you need to enter the Google Maps server app key. Get the API key from here and if you are facing "For development purposes only" message on Google Maps, please, read more here.
• Disable embeding Google Maps JS API - Enabling this option can solve some conflicts with other plugins or themes that also include the Google Maps API on each page, eg. Geodirectory.
• default location's latitude - Enter the latitude of the default location shown in the editor.
• default location's longitude - Enter the longitude of the default location shown in the editor.
• default zoom - Choose default value of zooming in the editor. Greater number means closer zooming.

When you finish configuring the plugin, don't forget to save the changes by clicking the button Save at the bottom of the page.

User Tracking Options

Lots of options for sending track user location can be found in the base plugin. Navigate to Admin Dashboard → CM Map Locations Pro → Settings. 

All needed options are located under the User Tracking tab in the User Tracking section:

• Enable User Tracking - Choose Yes to turn on the feature.

• Track N users - Define how many devices can connect to the API. 0 means there's no limit, which might be dangerous.

• User position's icon URL - Write here a URL for the user position's icon. Example: https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png

• Display tooltip on marker - If enabled, a tooltip will be displayed on a marker when the user clicks on it.

• Template for the user track position info window content - Customize the template of a tooltip with information about user track position. You can use HTML and the following placeholders: 
  • [identifier]
  • [name] 
  • [description] 
  • [coordinates] 
  • [UTMcoordinates]
  • [updatedate] 
  • [timezone] 
  • [downloadlink]
  • [bgcolor]
  • [bgcolorlabel]

• User path line type - Choose between:
  • No Line (just the points will show on map)
  • Solid Line
  • Dashed Line

• Line color - Will be applied to the user track if either Solid Line or Dashed Line was selected above.

• Only show last position - If enabled, only shows the user last position. If disabled, shows all positions. Let's keep this option disabled, so we could create a route on the map when we send a few positions.

• Time of last reported tracks - Set time of last X hours:minutes e.g. 01:00 (1 hour), 5:15 (5 hour and 15 minutes), 7:30 (7 hours and 30 minutes), 9 (9 hours) and If set 0 means show always. Note: this will work if above setting is disabled. Let's keep this option disabled for our use case.

• Timezone - Self explanatory.

• Time Format - Choose between 12 hours and 24 hours formats.

• Display user track position on index page map - Shows locations in the map on the index page.

• Display label background color filter on index page - Enable it to allow users to filter user track position by label background color on index page. This option works only if the option Display user track position on index page map is enabled.

• Display time filter on index page - Enable it to allow users to filter user track position by time on index page. This option works only if the option Display user track position on index page map is enabled.

• Display identifier filter on index page - If enabled, the user will be able to filter user track position by identifier on index page on the front-end.

• Reset user tracking table - Click it to delete all user tracking entries from the table.

Creating a Button for Sending Track User Location

Now it's time to add the button to the site. 

It's simple: apply the shortcode   [cm-user-location]

The shortcode has the following parameters:

• api - API Key.
• server - Server address (server which runs the API key).
• identifier - You can pass your custom identifier. In case if this parameter is empty or not added to the shortcode, then the system will generate it automatically.
• name_enable - Name field, 1 to show or 0 to hide.
• name - Name field default text.
• description_enable - Description field, 1 to show or 0 to hide.
• description - Description field default text.
• bgcolor - User marker label background color, You can add it with and without "#", e.g. #ff0000, #008000, FFFFFF etc.
• bgcolor_label - User marker label background color text. You can add any text, e.g. Red, Green, Blue etc. And this is used in the filter.
• button_text - Submit button text. If not defined then it will be taken from plugin settings labels section.
• user_location - Set "1" for post user track user location or "0" for post temporary location. Default value is "1".
• latlon_enable - Displays Latitude and Longitude fields. Set "1" to show or "0" to hide.
• latitude - Latitude field default value.
• longitude - Longitude field default value.
• drawing - Displays polygon draw tool on the map. Set "1" to show or "0" to hide. Default value is "0".
• current_location - Displays current location button. Set "1" to show or "0" to hide. Default value is "0".

So, let's add a button to the page with the following shortcode:

[cm-user-location name_enable="1" name="dimas" description_enable="1" description="One-day walking route on Manhattan" button_text="Push me!"]

There will be fields for name and description with default text (that are editable) and the button for sending track user location with text "Push me!". This is how it will look like on the front-end:

Now it's time to take a smartphone and go for a walk to test our app and check how it works!

When you are ready to send the coordinates of first location you can edit name and description. When you tap on the button you will see a message "Location successfully submitted":

Let's check this location on the map:

When you send a few locations with the same username, these locations will be connected with a line, so you can see a route:

Managing Time Based Location Layers

Track User Locations can disappear after some time, if you enable that possibility in plugin options. The same is about Temporary Locations and Temporary Polygons - they disappear from the map after definite period of time that you set in plugin settings (12, 24 or 48 hours). 

If you don't reset tables with stored locations, it is possible to check all these locations for passed days using get parameters: from_date and to_date. Date format is ddmmyyyy. To add get parameter to the URL we should put a symbol "?", and to use more than one get parameter we need to add a symbol "&" before each additional get parameter.

For example, we want to check all temporary locations for days since 9th August till 15th August of 2021.

So, after adding get parameters the link should look like this:

https://your-site.com/map-locations/?from_date=09082021&to_date=15082021

You can add some links to your page with predefined get parameters, to let users have a quick access to the locations for certain dates. And users can look for other dates just by changing the date parameters in the URL.

End Result

Following instructions found in the plugin and guides, you should be able to configure tracking user location trails and routes on the map. 

Use Case Front-End

Extra - Troubleshooting

Common Errors and Solutions

	More information about the WordPress Interactive Map Plugin Other WordPress products can be found at CreativeMinds WordPress Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center