Treweler Documentation

Treweler is a flexible and multipurpose WordPress plugin based on the Mapbox web mapping platform. Its purpose is to help you create a custom map for your personal or business project. This combination of plugin functionality and Mapbox map customization provides limitless possibilities when creating a way to describe the world around us.

This document covers the plugin installation and how to use it. Although all functions and settings of the plugin can be quite intuitive, we still encourage you to read this document thoroughly before using the plugin for the first time as to avoid any difficulties in the future.

Thank you for purchasing our product!

Requirements

Since WordPress is a MySQL and PHP platform, you need to have a hosting server prepared for it. In case you already have a hosting server, you need to check whether it is compatible with WordPress hosting requirements or not.

For installing this plugin you need to make sure that you have the following extensions on your web server. If you do not have them, you will need to contact your web hosting provider.

1. PHP version 5.6 or greater
2. WordPress version 5.7 or greater
3. Activated JavaScript and Cookies in your browser

Plugin Download

You need to download all plugin files after purchasing them. If you purchased the plugin on CodeCanyon, please read this article to understand how to download your item.

Install & Activate

If you have a server with WordPress installed on it and you have downloaded all the necessary files, then you are ready to install and activate the plugin.

Automatic Plugin Installation

Since you already downloaded the plugin zip file, you can manually upload and install it through the plugin’s admin screen. To add the plugin using the built-in plugin installer:

1. Login to your WordPress admin panel.
2. Navigate your way to the Plugins menu and click Add New.
3. Click the Upload Plugin button at the top of the screen, and select the zip file from your computer.
4. Finally, click the Install Now button.

When installation is complete, you’ll see “Plugin Installed Successfully.” Click the Activate Plugin button at the bottom of the page.

Manual Plugin Installation

In rare cases, you may need to install a plugin by manually transferring the files onto the server. This is recommended only when absolutely necessary, such as when your server is not configured to allow automatic installations. This procedure requires you to be familiar with the process of transferring files using an SFTP client.

1. First of all, unzip the previously downloaded plugin zip archive. You should see a single folder named after the plugin.
2. Connect to your WordPress server with your SFTP client.
3. Copy the plugin folder to the wp-content/plugins folder in your WordPress directory. This installs the plugin to your WordPress site.
4. Navigate to your Plugins admin screen and locate the newly uploaded plugin in the list.
5. Click the plugin’s Activate link.

Plugin Updating

To update the plugin, navigate to the Plugins menu in the website admin panel. Click the Deactivate link next to the plugin name and then click the Delete link to remove the plugin. Install a new version of the plugin according to the "Install & Activate" section of this documentation.

General Settings

The first thing you should do after installing and activating the plugin is to add the Mapbox Access Token to the main plugin settings.

To get a token you should register on the Mapbox Website and create a new token on your Access Tokens Page. For information regarding management of the Mapbox Access Tokens, please read this article.

After you have created an Access Token, go to the Treweler menu in the admin panel, click the Settings, open the General tab and paste a token to the Access Token filed. Click the Save Changes button to save the settings.

Now you can create maps and publish them on the pages of your website.

Additional CSS

To add custom CSS code, go to the Treweler menu in the admin panel, click the Settings, open the Additional CSS tab and paste your code to the code editor. Click the Save Changes button to apply the code.

Quick Start Guide

Treweler comes with a variety of cool features that are all well-organized, self-explaining and easy to use. Let us summarize it in the simplest way for you.

Maps

Maps are the basis for realizing your ideas and shaping them accordingly. In order to create one, you will need to:

1. Navigate to the Treweler menu in the admin panel.
2. Click Maps and click the Add New button at the top of the page.

Map settings include a lot of different options, so let's take a look at each of them.

Styles. As far as this feature goes, it includes several built-in map styles, so you can easily choose a style that you like or the one that suits your project goals. Once you have, changes will appear immediately in the map preview.

Custom Styles. The plugins allow you to add custom map styles created in the Mapbox Studio style editor or copied from other sources.

When it comes to custom map styles, they are a powerful tool that breathe life into your ideas. To make things easier for you, we have prepared several custom styles, so that you only copy them to your account and use them for your projects. Besides, you may have seen some of them on our demo maps already.

If you wish to copy the style you like to your account, just click the style link and click Copy in the bottom right corner of the page. Once that’s done, you have your custom style.

Initial Point. This feature shows you the initial geographical center point of your map. From this point forth, you can set the latitude and longitude manually or use the map preview by enabling the "Use the map preview" checkbox.

To automatically obtain the user's current location at the initial map loading, activate the "Use user's current location" checkbox.

Initial Zoom Level. A zoom level determines how much of the world is visible on a map. Mapbox provides maps in 23 zoom levels, with 0 being the lowest zoom level (fully zoomed out) and 22 being the highest (fully zoomed in). At low zoom levels, a small set of map tiles covers a large geographical area. At higher zoom levels, a larger number of tiles cover a smaller geographical area.

Zoom Range. Zoom range lets you set the minimum and maximum possible map zoom levels.

Overlay Color. With this setting, it's possible to add a custom overlay color with the necessary opacity above the main map.

Render World Copies. Activate this checkbox to switch between rendering a single world and multiple copies of the world. Once you have, changes will appear immediately in the map preview.

General. This is where you give a personal touch to your map, as it allows you to add a title, description and logo for the map. In addition to that, you can also change the text style and position of the elements by using additional settings.

Also in this section you can change the projection of the map.

Categories. Categories provide a helpful way to group related Markers and Routes together. Using these settings, you can enable or disable the categories drop-down list, as well as change its position on the map. In the related sections, we will tell you how to assign categories to Maps and Routes.

Controls. You can use these settings to add different controls to the map and change their position. Any changes appear immediately in the map preview.

Attribution. Mapbox maps require two types of attribution: a logo and text attribution. This is a group of settings that helps you manage these attributes.

Clustering. Often, a map can show too much data at a single time. Markers overlap with each other. The map looks and feels cluttered. Enabling clustering in this group of settings helps to avoid this problem.

Languages. When building a map from a Mapbox template style, map labels will appear in English by default. If you wish to change the language of your map's labels, you can easily do that by directly going to the Mapbox Studio style editor or dynamically using plugin settings. Unfortunately, not all built-in map styles support languages well, so we recommend creating your own map style if you need to use a language other than English.

Information Widgets. You can place additional information or interesting facts on the map, using Information widgets. With these settings, it is possible to create text widgets, change their position and place a color gradient on either side of the map.

Pitch & Bearing. The pitch is the angle towards the horizon measured in degrees with a range between 0 and 60 degrees. The bearing is the compass direction that is "up". For example, bearing: 90 orient the map so that east is up.

Restrict Panning. Use these settings to disable map panning or restrict it to an area.

Preloader. Using these settings, you can enable the progress preloader with logo and text information that will appear until the entire map is loaded.

Tour. Tour settings allow you to impressively switch between markers using one of the animation types, Jump or Fly. However, make sure that at least one marker is created to start using these settings.

Store Locator. Use the Store Locator to display map markers within the user's vicinity, or in the vicinity of the area on the map that the user chooses. The user's position can be determined automatically, or set manually by clicking on the map, or by using an intuitive address search with auto-completion. The number of displayed markers can be sorted by distance, either in kilometers or miles.

Boundaries. Treweler Boundaries is a set of global country and region boundary data with different levels of accuracy. This feature allows you to build and customize any combination of countries or regions, as well as change their style or add interactivity for each data polygon. Use Treweler Boundaries and explore interesting options in presenting and visualizing data on the map.

Shortcode. When it comes to inserting the map anywhere on your pages, this setting will be your utmost friend. To help you understand it a bit more, we will be explaining how to insert a map using shortcode down below in the "Maps Publishing" section of this documentation.

Markers

Markers are the next most important elements after the maps. In order to create a Marker:

1. Navigate to the Treweler menu in the admin panel.
2. Click Markers and click the Add New button at the top of the page.

Marker settings include a lot of different options, so let's take a look at each of them.

Map Preview. Map preview can be used to define the location of the marker. If you want to quickly find a place, just use the textbox in the upper right corner of the map preview.

Marker Coordinate. This enables you to set the latitude and longitude of the marker manually. In order to visually set the location of the marker, use the map preview.

Marker Maps. With this drop-down list, you define the location of the marker and on which of the previously created maps will it be displayed. Make sure you have already created, at least, one map according to the instructions from this documentation.

General. Here it's possible to enable or disable clustering for the selected marker as well as cheng a marker behavior on click.

Marker Styles. In addition to everything else, the plugin also includes several built-in marker styles. Simply just choose a style that suits your liking, and changes will appear immediately in the map preview. If the built-in marker styles are not enough for you, you can load your own marker in any graphic format, change the size of the custom marker and its alignment.

Popup. Using this group of settings, it is possible to add a pop-up and customize its styles and behavior when initially loading the map.

Text Lables. The plugin allows you to add text label for the selected marker, as well as customize its position and styles.

Categories. Categories provide a helpful way to group all the related Markers together. With this, it is also possible to set one or several categories for each marker. By default, each marker isn’t assigned with a category and displays as, "Uncategorized". To manage categories, you will need to navigate your way to the Treweler menu in the admin panel and click Categories. Keep in mind, the “Uncategorized” category cannot be deleted.

Routes

This extends the functionality of maps and markers to give an in-depth shape to your imagination. In order to create a Route:

1. Navigate to the Treweler menu in the admin panel.
2. Click Routes and click the Add New button at the top of the page.

Routes settings include a lot of different options, so let us take you through them.

Route Maps. With this drop-down list, you define where the route will be displayed on the previously created maps. Do make sure that you have already created at least one map according to the instructions from this documentation, so you can easily put down the routes onto it.

Route Drawing. Draw your route using the draw tools in the upper right corner of the map preview. To get the most accurate route match, draw points at regular intervals. Using the drawing tool, you can use a maximum of 25 points for your route. Here is a quick tutorial on how to draw a route using a drawing tool:

1. Click the Line icon in the upper right corner of the map preview.
2. Click the map to begin drawing a route.
3. Click the final point to complete the route.
4. Use the Match route menu in the upper left corner, depending on what kind of match you need.
5. To add a new point within the route, click on a small point between two large nodes.
6. To delete your route and draw a new one, click the created route and use the Trash icon on the upper right corner of the map.

Route Styles. You can change the style of the route lines using these settings. Once you have, the changes will immediately appear in the map preview.

Import GPX. If drawing the route is not suitable for you, you can simply just import the GPX file. If the import is successful, the route will be displayed in the map preview.

Categories. Just like the categories in all the aforementioned settings, this also provides a helpful way to group all the related Routes together. It is also possible to set one or several categories for each route. However, by default, each route is assigned the "Uncategorized" category. To manage categories, navigate to the Treweler menu in the admin panel and click Categories. Don’t forget that the “Uncategorized” category cannot be deleted.

Shapes

Make maps more visually attractive and informative by drawing various shapes. Using versatile drawing tools that draw lines, polygons, circles, and bezier curves, grab users' attention to certain areas and objects on the map. Customize any shape imaginable and choose from a large selection of style settings. In order to create a Shapes:

1. Navigate to the Treweler menu in the admin panel.
2. Click Shapes and click the Add New button at the top of the page.

Shapes settings include a lot of different options, so let us take you through them.

Shape Maps. With this drop-down list, you define where the shape will be displayed on the previously created maps. Do make sure that you have already created at least one map according to the instructions from this documentation, so you can easily put down the shapes onto it.

Shape Drawing. Draw your shape using one of the draw tools in the upper right corner of the map preview. Here is a quick tutorial on how to draw a shape using a drawing tool:

1. Click on the icon of the required toolin the upper right corner of the map preview.
2. Click the map to begin drawing a shape.
3. Click the final point to complete the shape.
4. To add a new point within the shape, click on a small point between two large nodes.
5. To delete your shape and draw a new one, click the created shape and use the Trash icon on the upper right corner of the map.

Shape Styles. You can change the style of the shape using these settings. To edit styles, draw a new shape using the draw tools in the upper right corner of the map or select an existing shape. Once you have, the changes will immediately appear in the map preview.

Custom Fields

Using the custom fields builder, you can easily control the types of custom fields, edit their text information, and change their order in the popup.

Creating custom fields

1. Navigate to the Treweler menu in the admin panel.
2. Click Custom Fields, and then click the Add New button at the top of the page.
3. Select a custom field type and set the name of your custom field. If necessary, activate the Show Field Name switcher to display the custom field name in your marker popups.
4. Specify default field values if required.
5. Click the Publish button to save the custom field.

Adding custom fields to the marker popup

1. Once you have created the custom fields, navigate to the Custom Fields tab on the Marker Settings page.
2. Activate the Show Custom Fields switcher.
3. Use the dropdown list and click the Add Fields button in the same row to add custom fields as you need.
4. By default, all custom fields are filled with their default values. To add a custom value for a specific field, click on the required lock icon on the right side of the row.
5. Fill in the required fields and if necessary, change the order of the custom fields.
6. Make sure the Show Popup switcher in the Popup tab is activated.
7. Click the Save button to display the custom fields in your marker popup.

Marker Templates

Making a large number of markers in the same style is made so convenient by creating a marker template with your chosen marker style, popup and image settings, text labels, and custom fields settings.

Creating marker templates

1. Navigate to the Treweler menu in the Admin panel.
2. Click Templates and click the Add New button at the top of the page.
3. Set the name of the template you are creating, and then, choose and edit your desired template settings in the Template Details section.
4. Click the Publish button to save the new template.

Applying the template to a marker

1. After creating a template, navigate to the Template tab on the Marker Settings page.
2. Select the name of the template you would like to use from the drop-down list. All marker settings will now follow the settings set in the template.
3. To add a custom value for a specific field, click on the lock icon on the right side of the row and set the custom value you would like to add.
4. Click the Save button to apply the changes to the marker.

Maps Publishing

Depending on your ideas or project needs, there are two ways to publish a map.

Publishing via Shortcode

Copy the shortcode with the necessary settings from the specific Map page and paste it on the page where you feel the need to place the map. Save the changes and check if that the map is displayed correctly.

Such problems can be caused by complex page structure or other theme settings. In this case, make sure that you insert the shortcode into the main container of the template, and not inside other elements.

The most common solution when the map embedded via the shortcode is not displayed is to update the WordPress permalinks. In order to update the WordPress permalinks:

1. Login to your WordPress admin panel.
2. Navigate to the Settings menu and go to the Permalinks page.
3. Click on the button Save Changes at the bottom of the page without any other changes.

This will surely help to avoid problems with the map displaying.

Publishing via Page Settings

This method allows you to display a full-screen map using a WordPress Page. Select or create the page you need to use for a full-screen map. In the page settings, find the Treweler Fullscreen Map drop-down list and select the map that should be displayed at the page URL. Save the changes and check that the map is displayed correctly.

Activate the Custom Settings checkbox if you need to set a custom initial point or initial zoom level.

Save the changes and check that the map is displayed correctly.

List of Credits

Finally, we would like to thank the people who placed their trust in us and made our dreams come true with their credible products. Treweler, most certainly, would not have been possible, if not for their stupendous contributions!

1. Mapbox
2. Bootstrap
3. jQuery
4. Akrobat Font by Fontfabric
5. Select2
6. Color Picker
7. FontIconPicker
8. Fancybox

Plugin Support

We highly appreciate you reading through this documentation! If you have any more questions related to the plugin, please feel free to contact our support team using the Support tab on the plugin page.

We will be more than happy to assist you!

Developed by Aisconverse