Creating Interactive Maps in WordPress with MapSVG

The MapSVG WordPress plugin allows you to quickly and easily create feature-rich interactive maps. Interactive maps are a common requirement for projects when you need to visualize the impact of a specific location. If you are already using WordPress, this powerful plugin might be your solution to make maps that can be put into production.

Recall your last experience of implementing or planning an interactive map. You might estimate that it will take a lot of time to map data from the original source into JSON and then connect it to a visual framework (such as D3). Next is to configure how users interact with the map itself. These are quite a lot of development efforts.

Next is a question about how to manage map data. Is the data stored in an external file? Do I need to call the API regularly to get data? Managing this data directly in your website's WordPress admin panel is much easier, just like managing all other website content. No need to open the code editor and maintain the map separately!

These, along with many other common map features are built into the MapSVG plugin, where you can create multiple unique maps to suit your visual needs. We will dig into this plugin and use it to build an interactive SVG-based map in WordPress.

Options to create a new map

Once installed, MapSVG provides five options to create new maps based on vector, image, or Google Maps features. For the purpose of this article, I will focus on the SVG functionality.

In the New SVG Map option, there are nearly 200 geocalibrated and uncalibrated country and region vector maps. MapSVG Lite, a free version of this plug-in, allows site administrators to create interactive maps with tooltips, customizable details views, and markers placed through latitude and longitude coordinates. Upgrading to the paid version ($46) will provide the following support: map catalog, integrated search, location filter, detailed view of map areas, integration with WordPress articles and advanced custom fields, custom tooltips and contour maps, and other advanced features.

Create a new map

OK, we chose to create a new SVG-based map. Select an option from the drop-down menu to create a vector map. Choose a geocalibrated map instead of an uncalibrated map when possible. Geocalibration map updated with region title. Additionally, they allow you to add map markers by geographic coordinates (i.e. longitude and latitude) or by entering addresses that are automatically converted to coordinates.

If you use your own custom SVG file, select the Upload SVG option. After uploading, your custom file will be displayed under <kbd>user-uploads/your-file-name.svg</kbd> in the New SVG Map drop-down menu. Before uploading the file to the plugin map, I suggest you perform some extra steps to optimize the file:

1. Areas containing multiple vector paths, such as Hawaii, need to be grouped as composite paths in Illustrator. In Illustrator, you can do this by selecting the relevant path and then going to Object > Composite Path > Create (or CMD 8 ).
2. Make sure your layer has a clear, unique name. The layer name will be used as the area for template and organizational purposes {{id}}.
3. Next, open your SVG file in a text editor and give each path a title attribute. This will be used as the area in the template {{title}}.

The id and title fields are default properties extracted from the file and are used to associate them with individual paths. Starting with the latest version of the plugin (currently 5.3.7), you can edit the SVG file directly in the WordPress admin panel to set the id and title values ​​for each path, as well as adjust the path definition and draw new paths. I personally prefer the controls for editing in Illustrator and code editor, but this is still a good choice.

Let's continue to use the geocalibration map provided by the plugin and create a demo using the entry from https://www.php.cn/link/e74b103532a9337cc42f051774ac49d4 this year to visualize the data (parts) of technical conferences from around the world this year.

Setting map style

Now that we are ready and select the SVG file, the plugin interface will open the Settings panel. Here we set the map name, define the size and size, and enable tooltips and other main settings.

In addition to the Settings tab, you will also see tabs for controlling and setting specific map features. Switch to the next tab color , where we set the map theme.

As shown above, we can control the fill and stroke values ​​of the map and the various active states of each path. The benefits of using vector-based maps! So if I create a custom map file, I prefer to leave the fill and stroke values ​​as undefined in Illustrator. However, the stroke width cannot be adjusted effectively in the UI (because it requires editing the SVG and changing the value of each path), so it is best to set it in Illustrator and re-upload the file.

Below are the color options for containers (such as directories, filters, sidebars, etc.), as well as the minimum and maximum color values ​​for the contour map (more on this later!). Container styles can also be set globally in your theme style sheet or in the CSS tab of settings.

Set map data

By default, the Area tab will pre-fill the area based on the path of the selected SVG, showing its id and title values. You can edit and create your own area fields as needed. The same is true for the Database tab—where you can enter map data and associate it with the map area.

For zone and database entries, you can choose to manually create fields and content in the UI, or upload data from a CSV file.

Note the final dataset in the screenshot above, especially the custom area fields for the meeting details, the meeting details, and the fields that upload an image showing the flags of each country in the database. We can go a step further by separating the content from the map itself and pulling it in as article data for any WordPress post type. This is where advanced custom fields can help create fields of these data in the article editor and associate submitted data with values ​​in the map. Of course, this is not necessary, but for the sake of separation of concerns, it is nice to have this option.

Show map data

When displaying information about regions or database objects on the map, we must set the template in the plugin. There are five types of templates: pop-ups, tooltips, details views, directories, and tags.

The template accepts plain text, HTML, and Handlebar tags to display region and database variable values. If you pull in the article data through the article database field, you will have access to the standard WordPress field, post.id, post.post_title, post.post_content, post.url, and any custom fields created using this syntax: post.acf.my_field_name. Whenever you need to render a rich text field (such as post.post_content), you must use Handlebars' {{{triple-stash}}} syntax to output the rendered HTML.

The use of Handlebar syntax also means that we can build conditional logic into templates to create dynamic template views based on region and database values. In MapSVG 5.0 and later, the template options are pre-populated with HTML comments and the start tags for the default zone and database fields. Very useful!

Add a map to a page

MapSVG contains a shortcode for embedding maps into any page or article. Place a Gutenberg shortcode block on the page and call MapSVG with the map ID to embed: [mapsvg].

For users who work in the classic WordPress editor or use a plug-in version earlier than 5.0, the map icon is added to the TinyMCE toolbar, which injects a shortcode into your article content, using a map ID. Map ID can be found in the MapSVG editor dashboard or in the top breadcrumbs of the activity map. The convenient Copy to clipboard button is contained next to two instances of the shortcode for grabbing it for use in the article editor.

Demo

After completing the data entry and switching some extra MapSVG settings, we get a fully functional interactive and responsive map! Note that we have little exposure to much code during this process.

View the full demo

Beyond the map

The advantage of the SVG functionality of the plugin is that, fundamentally, SVG can be anything we want. Can you create interactive "maps" from vector paths of almost anything: architectural floor plans, infographics, or interactive timelines of your career? It's more than just a map!

Not on WordPress? no problem. MapSVG is also available as a jQuery plugin, and it is also worth trying to use interactive maps outside of WordPress.

resource

• MapSVG website (including real-time demonstration of management interface)
• MapSVG Tutorial
• MapSVG Documentation
• MapSVG Lite (WordPress plugin directory)
• MapSVG Video Tutorial Archive (YouTube)

The above is the detailed content of Creating Interactive Maps in WordPress with MapSVG. For more information, please follow other related articles on the PHP Chinese website!