WordPress Interactive Map Plugin (CMML) - Use Case - How to Add Temporary Locations, Polygons and Time Based Location Layers On the Map

How to add temporary locations, polygons and time based location layers 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 is also possible to add temporary locations, polygons and time base location layers on the map using REST API. The Send User Location add-on helps to simplify work and create and configure a button that adds your current location on a map instead of using REST API.

Use Case Front-End

Temporary Location:

Temporary Polygon:

Time Based Location Layers:

Use Case Assumptions

In this example use case guide, we'll cover how to add temporary locations, polygons and time base location layers on the map.

It follows:

• Installing the plugin
• Enabling REST API
• Configuring Send User Location Add-on
• Adding Temporary Locations
  • Configuring Temporary Locations
  • Using REST API
  • Using Add-on
• Adding Temporary Polygons
  • Configuring Temporary Polygons
  • Using REST API
  • Using Add-on
• Managing Time Based Location Layers
• End Result

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)

Enabling REST API

First of all you need to generate REST API and configure the WordPress Interactive Map plugin. To do this navigate to  Admin Dashboard → CM Map Locations Pro → Settings → Setup tab.

Locate the section Location REST API. There you need to turn on the option Enable REST API and then click the button Generate Key. The key will appear in the field API key for adding location via REST API.

A few more options:

• Enter the IP from which you can connect - Leaving it empty allows connections from any IP - this might not be secure! To add multiple IPs, separate them with commas. For example: 1.1.1.1, 1.1.1.2, 1.1.1.3 etc.
• Create category if it doesn't exist - Enable it to let the plugin create a category for location if it doesn't exist.
• Don't add locations with the same name - Enable it to prevent the plugin from creating locations with repeated names.

Configuring Send User Location Add-on

Copy the API key that you generated on the previous step in the field API key for adding location via REST API.

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

Under the General tab, include the key you just copied 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 add-on, don't forget to save the changes by clicking the button Save at the bottom of the page.

Adding Temporary Locations

First case that we will consider is adding temporary locations. Posted temporary locations will be displayed on the map only for some definite period of time, and after that they disappear. We can add that kind of locations in two ways:

• Using REST API
• Using the Send User Location add-on

But first we need to configure a few options for this.

Configuring Temporary Locations

Navigate to Admin Dashboard → CM Map Locations Pro → Settings → User Tracking tab.

Scroll down to the section Temporary Locations. There you can find the following options:

• Display temporary locations on index page map - If enabled, then user posted temporary locations will be shown on locations index page map.
• Location's icon URL - Put here a URL to the location's icon.
• Display tooltip on marker - If enabled, then a tooltip will be shown on the marker when the user clicks on it.
• Template for the temporary location info window content - You can use HTML to customize this template. It also supports the following shortcodes: 
  • [name] 
  • [description] 
  • [coordinates] 
  • [UTMcoordinates]
  • [updatedate] 
  • [deletelink] (note: will work only for admin privilege user and return output with anchor tag)
• Location's expire time - Choose location's expire time. You can choose between:
  • 12 hours
  • 24 hours
  • 48 hours
• Reset temporary location table - Click it to delete all temporary location entries from the table.

Adding Temporary Locations - Using REST API

When configuring the options is done, it's time to add our first temporary location. We need to use a URL with a following structure:

http://your-site.com/wp-json/cmloc/v1/current_location?key=abc123&username=name of user&ip=user IP&latitude=xx.xxxxxx&longitude=xx.xxxxxx&description=yourdescription

The underlined green elements above can be customized. 

• username (name of user can be anything and not related to a WP user)
• ip (IP address)
• description (any text)
• latitude - this parameter is needed to pass temporary location
• longitude - this parameter is needed to pass temporary location
• 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

• key - has to match the key set in the plugin's settings:

  

How to Define Coordinates?

To define your current coordinates you can use external services. For example: Click here and get your current location coordinates. After open you need to click on Try It button and need to allow Location Access. Then you will see your current location coordinates - it will be needed for parameters that are responsible for Latitude and Longitude in your URL.

Example with attributes for posting Temporary Location

https://dimas.cminds.website/wp-json/cmloc/v1/current_location?key=2cddxxxx-xxxx-xxxx-01dc&username=dimas&ip=128.64.32.137&latitude=41.890287&longitude=12.492201&description=Colosseum, Rome

Let's add the URL to the address bar. We will see a message that the location is successfully added:

We can see the result on the front-end on the index map:

Adding Temporary Locations - Using Add-on

To add temporary locations using the Send User Location add-on we need to create a form with a button for this.  

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 current 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, to create a button for adding temporary location let's use the following shortcode:

[cm-user-location name_enable="1" name="dimas" description_enable="1" description="St. Peters Basilica" button_text="Push me!" user_location="0" latlon_enable="1" current_location="1"]

There will be fields for name and description with default text (that are editable), the button for defining current location, map, fields for latitude and longitude, and the button for sending current location with text "Push me!". When the page with this form is opened, the location marker is set according to the default coordinates that are set in the add-on settings. To define current position the users need to click on the Current Location icon next to the Find Location field above the map. 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! Tap on the Current Location icon first, and then tap on the button Push me! - you will see a message "Location successfully submitted":

Let's check this location on the map:

Adding Temporary Polygons

Second case that we will consider is adding temporary polygons. Posted temporary polygons will be displayed on the map only for some definite period of time, and after that they disappear. We can add that kind of polygons it in two ways:

• Using REST API
• Using the Send User Location add-on

But first we need to configure a few options for this.

Configuring Temporary Polygons

Navigate to Admin Dashboard → CM Map Locations Pro → Settings → User Tracking tab.

Scroll down to the section Temporary Polygons. There you can find the following options:

• Display temporary polygons on index page map - If enabled, then user posted temporary polygons will be shown on locations index page map.
• Display tooltip on polygon - If enabled, then a tooltip will be shown on polygon when the user clicks on it.
• Template for the temporary polygon info window content - You can use HTML and the following shortcodes: 
  • [name] 
  • [description] 
  • [coordinates] 
  • [polygoncoordinates] 
  • [UTMcoordinates]
  • [updatedate] 
  • [deletelink] (note: will work only for admin privilege user and return output with anchor tag)
• Polygon's expire time - Choose polygon's expire time. You can choose between:
  • 12 hours
  • 24 hours
  • 48 hours
• Reset temporary polygon table - Click it to delete all temporary polygon entries from the table.

Adding Temporary Polygons - Using REST API

When configuring the options is done, it's time to add our first temporary polygon. We need to use a URL with a following structure:

http://your-site.com/wp-json/cmloc/v1/current_location?key=abc123&username=name of user&description=yourdescription&ip=user IP&latitude=xx.xxxxxx&longitude=xx.xxxxxx&polygon=[polygon]&type=0

The underlined green elements above can be customized. 

• username (name of user can be anything and not related to a WP user)
• ip (IP address)
• description (any text)
• type=0 - this parameter is needed to pass temporary location and polygon
• latitude - this parameter is needed to pass temporary location
• longitude - this parameter is needed to pass temporary location
• polygon - the client needs to pass coordinates. Each vertex of the polygon should pass coordinates in brackets, as (xx.xxxx, yy.yyyy). Have a note, there must be a space after comma. So, for example, if we need to pass a polygon with a triangle form, the parameter should look like this: polygon=(xx.xxxx, yy.yyyy),(xx.xxxx, yy.yyyy),(xx.xxxx, yy.yyyy).
• 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

• key - has to match the key set in the plugin's settings:

  

Example with attributes for posting Temporary Polygon

https://dimas.cminds.website/wp-json/cmloc/v1/current_location?key=2cddxxxx-xxxx-xxxx-01dc&username=dimas&description=Central Park, New York&ip=128.64.32.137&latitude=40.781452&longitude=-73.966506&polygon=(40.768073, -73.981891),(40.800611, -73.958187),(40.796930, -73.949210),(40.764299, -73.973003)&type=0

Let's add the URL to the address bar. We will see a message that the location is successfully added:

We can see the result on the front-end on the index map:

Adding Temporary Polygons - Using Add-on

To add temporary polygons using add-on we need to create a form with a button for this.  

We can do it in the same way as for adding Temporary Location, by applying the shortcode   [cm-user-location] . 

So, the shortcode will look like almost the same, we will just add one more parameter - drawing="1", to have the ability to draw polygons:

[cm-user-location name_enable="1" name="dimas" description_enable="1" description="Luxembourg Gardens, Paris" button_text="Push me!" user_location="0" latlon_enable="1" current_location="1" drawing="1"]

There will be fields for name and description with default text (that are editable), the button for defining current location, map, fields for latitude and longitude, the button for sending current location with text "Push me!", and tools for drawing polygons. 

Drawing tools are presented in three icons: 

• Hand icon - Click to stop drawing a polygon.
• Polygon icon - Click to start drawing a polygon.
• Trash icon - Click to delete drawn polygon.

This is how it will look like on the front-end:

Now let's draw our first polygon. When we finish and tap on the button Push me! we will see a message that the location was successfully added:

Let's check this polygon on the map:

Managing Time Based Location Layers

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

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 add temporary locations, polygons and time base location layers on the map.

Use Case Front-End

Temporary Location:

Temporary Polygon:

Time Based Location Layers:

	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