To add an HTML map to a site running on Drupal, we need:
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.
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.”
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.
After that, you can copy the files with the map to the same folder.
There you can also create a “start_map.js” js-file to initialize the map:
After creating the module, you can proceed directly to adding a map to the post. There are several options:
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.
While creating new content, you will also need to select the type of this content:
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"> </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).
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:
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.
This article describes how to add an interactive HTML map to a site that uses the Drupal content management system.