An Effective Guide to an Interactive Map on Your Drupal Site

Contents

Summary of the article

To add an HTML map to a site running on Drupal, we need:

1. Upload the map files via FTP to the server
2. Place the HTML code in the article for connecting these files.

We can accomplish step 1 by creating a custom module with files. The second part is achieved by selecting the "HTML" content type for the article, clicking the "source" button, and inserting the div, link, and script tags there.

Creating a module and uploading files

To do this, we connect to the site using the file manager via FTP or SFTP protocols or go to the control panel file manager. Next, go to the “modules” folder of the Drupal CMS and create a subdirectory in it with the name of the module - "flamap.”

Creating a directory for a module

Then go to this folder and create a file “flamap.libraries.yml” in it. Inside it, we will describe the structure of the future module.

Creating the flamap.libraries.yml file and its contents

After that, you can copy the files with the map to the same folder.

Copying map files to the folder with the module

There you can also create a “start_map.js” js-file to initialize the map:

Creating the map initialization file start_map.js

Creating a post or navigating to an already created one

After creating the module, you can proceed directly to adding a map to the post. There are several options:

1. Adding to an existing post;
2. Creating a post;
3. Adding to an existing page (basic page);
4. Creating a page (basic page).

These methods differ mainly in how to create/enable editing of a post/page.

To create or edit a post or a page, go to the “Content” section (1) and either click the “Add Content” button (2) to create new content or click on the title (3) of the content to edit it.

A page that can be used to create or edit content on the site

While creating new content, you will also need to select the type of this content:

Content type selection page

Adding a map to the post

After the desired post or page is open or created, you can select the “full html” format (1), click the “Source Code” button in the editor (2), insert the following code where the map should appear (3):

<div id="map_container">&nbsp;</div>
<link href="/modules/flamap/map.css" rel="stylesheet"/>
<script src="/modules/flamap/raphael.min.js"></script>
<script src="/modules/flamap/settings.js"></script>
<script src="/modules/flamap/paths.js"></script>
<script src="/modules/flamap/map.js"></script>
<script src="/modules/flamap/start_map.js"></script>

And then, you can click the save button (4).

Adding a map to the post

Viewing the results

After saving if the “Published” checkbox was selected when editing the post, the article will be published. Then, if everything has gone well, you will see something like this:

Display the added map on the site page

Here you can see that the post has been published, and the map has appeared in it.

Configuration of map settings is available in the "settings.js" file, and you can also use the US map editor online.

Conclusions

This article describes how to add an interactive HTML map to a site that uses the Drupal content management system.