If you do not yet have a site set up with the Grav CMS (content management system) or are unfamiliar with using Grav, check out the information on this site for setting up Grav. That section also includes information on installing Leaflet Tour.

Add Datasets

There are two ways you can add datasets to Leaflet Tour. If you already have some geospatial data, you can upload a file to the plugin configuration to generate a dataset page automatically. The second option for adding geographic data is to create the dataset page directly from the admin panel. More information for both options can be found on the Create Dataset Pages guide.

Upload a Dataset File

If you already have you geospatial data in a file and want to use that to automatically create a new page, follow the steps below.

  1. Prepare the dataset file
  2. Upload the file

Create a New Page

If you want to manually create a new dataset page and add features to it, follow the steps below.

  1. Go to the Pages tab.
  2. Create datasets folder if it does not exist (recommended):
    1. Open the dropdown next to the Add button and choose Add Folder.
    2. Name the folder datasets.
    3. Save.
  3. Click Add.
    1. For Parent Page, select your datasets folder (recommended).
    2. For Page Template, choose either "Point dataset" (for points) or "Shape dataset" (for lines or polygons).
    3. Click Continue.
  4. If you chose to create a shape dataset, make sure to select the correct feature type (LineString or Polygon recommended).
  5. On the dataset page's Features tab, add features to the list at the bottom of the page. For now, you only need to worry about providing the coordinates and a custom name for the feature.
  6. If you are planning to include multiple datasets in a tour, add a short blurb to the Legend Summary field. This could be as simple as the dataset's name. You may want to include the same text in the Description for Legend field.
  7. Save the dataset page.

You can find additonal information on adding features on the Update Dataset Pages guide. You can also check the dataset configuration options page for a detailed list of all available options.

Configure Features

You will probably want to customize how your features look. The process is slightly different for point datasets vs. shape datasets.

Point Dataset Features

  1. Go Leaflet Tour's plugin configuration page on the admin panel.
  2. Upload one or more images to use for points on the map (to the Image Marker Files field).
  3. Save the plugin config.
  4. Go to the dataset page's Icon Options tab.
  5. Select the image you want to use (in the Icon Image File field).
  6. Save the dataset page.

More information can be found on the icon configuration options page.

Shape Dataset Features

  1. Go the dataset page's Shape Options tab.
  2. Pick a color for the stroke.
  3. Pick a color for the border.
  4. Use a color contrast checker to make sure the two colors you have selected have sufficient contrast.
  5. Save the dataset page.

More information can be found on the shape configuration options page.

Add a Tour

Most of the content you create with Leaflet Tour will be centered around tours. A tour displays a column of narrative content (text, images, etc.) on one side of the page and a map on the other. The content is a combination of content added to the tour and content added to views within the tour (described in the next step on adding views).

Of course, you can still create regular pages of content on your site, too. The Leaflet Tour plugin will not impact these pages at all.

  1. Go to the Pages tab.
  2. Select Add and choose "Tour" for the page template.
  3. Add content.
    • This is the same process as adding content to a regular page.
    • Note that as with other pages, the title will automatically be added as a level one heading (h1), so any headings you add in the content should start with level two headings (## A Level Two Heading).
    • Keep in mind that this will not be the full content of the page. Any views you add will also have content that will be added to the narrative column immediately after this content.
  4. Go to the Tour tab's first section (Tour Datasets) and add one or more datasets. A dropdown will allow you to pick any valid dataset you have created.
  5. In the General Options section, select a tile server if you do not want to use the default. I personally recommend Stamen Watercolor.

You can read about other tour configuration options on the relevant page.

Add Views

Tours are considered "modular" pages, which means they create webpages composed of content from more than one page. Views are the "modules" that are added to tours. To make the most of a tour, you will need to add several views. View content will be added to the narrative column of the page, while other view settings will determine how the map behaves when that section of content is entered.

As modules, views are not considered "real" pages: They will not receive their own webpages on the site, and they cannot be added in quite the same way as tours (though the process is not very different).

  1. Go to the tour page you want to add a view to.
  2. Instead of clicking the Add button to add a new page, click the dropdown arrow next to the button and select Add Module. Choose "View" for the page template.
    • Note: If you ignored step one, make sure to set the parent page. After selecting the tour you want to add the view to, you may find that the displayed parent page in the dialog box has not updated. Don't worry about this: In the worst case you can fix the view's parent page after using the Advanced tab after creating the view.
  3. Add content.
    • This is the same process as adding content to a regular page.
    • Note that for views, the title will automatically be added as a level two heading (h2), so any headings you add in the content should start with level three headings (### A Level Three Heading).
    • Any content added will be included on the tour page's narrative column.
  4. Add features to define the view's start position (using the View tab).
    • Features are useful for some other settings, but you don't need to worry about that when you are just getting started.
    • The map will make sure all view features are visible when the view is entered, so this is often the easiest and safest way to define a good start view start position.
  5. On the Advanced tab you may want to enable folder numeric prefix (under Ordering). This will allow you to easily determine the correct order of your views within the tour.

You can read about other view configuration options on the relevant page.

Finish

Once you have added your first tour and its initial views you can play around with its settings until it is the way you want. You can also add more datasets, tours, views, and even ordinary (default) pages to your site.

Check out the other pages on this site if you want to delve further into the various options available to you.