Mapplic is a custom map plugin that empowers users to create fully interactive maps from static vector (SVG) or image (PNG, JPG) files. With its impressive list of features including a filterable directory, CSV support and many more, it is a versatile tool that can help users achieve their mapping goals easier than ever. Featuring a real-time map builder, version 8 represents a complete overhaul of Mapplic using the latest technologies.
The structure of the download package is as follows:
To render the mall demo map, you need to publish and access the mapplic/dist folder using a web server, either live or local. This means that you cannot simply open the index.html file in a web browser directly from your computer. Instead, you will need to use a web server to serve the files, which will allow you to access them through a URL.
This folder contains everything that is needed to publish a map for production.
In order to add a map to an existing project:
<script type="module" src="./mapplic.js"></script>
<link rel="stylesheet" href="./mapplic.css">
<mapplic-map data-json="data.json"/>
That's all! Your map should show up if you imported the two files (js and css) correctly.
If you're having issues, check the JavaScript console for any error message.
Using older versions of the plugin is still safe and upgrading is not necessary as long as the plugin functions as expected. However, when starting a new project, we highly recommend using version 8 or higher
The use of a web server is necessary due to security reasons. Browsers implement a security feature called Cross-Origin Resource Sharing (CORS) policy which restricts web pages from making requests to a different domain than the one that served the web page.
Version 8 introduces the new map builder, which greatly simplifies map editing and makes it more user-friendly.
The builder can be accessed from mapplic-admin/dist folder served through a web server, either live or local.
Through the left side panel, you can begin to modify the map, but it cannot be saved yet as saving files requires a backend script with the capability to modify and save files.
For map saving to work, you need to have Node.js installed. Nagivate to this folder using a terminal and run the following command:
node save.js
If "Mapplic save script running." shows up, you can save your modifications with the map builder.
In order to load a different demo map, add the ?map=[TARGET-DATA].json parameter to your URL.
For example, if you're running the admin on http://localhost/mapplic-admin-test/, modifying the url to http://localhost/mapplic-admin-test/?map=data-us.json should load the United States map.
You can duplicate and rename any of these .json files to start a new map.
The Maps popup can also be used to switch maps or generate data file for built-in geograhpic maps. The save.js script must be running in order to generate new jsons.
Anyone with access to the map builder can modify the map so it should only be used on local environments or password protected pages. Never publish the builder on a page with public access!
The most basic building block of a map is the layer. At least one layer is required, but you can define multiple layers, which is useful for multi-level maps (like a building with multiple floors).
Layer attributes
You can select which layer to display by default.
The width and height (in pixels) of your map file must be defined manually. If the dimensions are not set, the map will not render. If the dimensions are incorrect, the locations will render on the wrong position.
Maps (in web mercator projection) can be geocalibrated by setting the map extent. Geocalibrating a map is an advanced task and requires GIS skills.
Locations can be customized using a list of attributes.
Locations can inherit attributes from another location set as SAMPLE. Default location values can also be set.
Locations can be imported from and exported as CSV. Export your locations to see the correct structure of a Mapplic compatible CSV file.
The advanced directory mode can be accessed starting from version 8.1 or later. It allows for the listing of various types of locations (in either list or grid format) in both landscape mode (with a sidebar) and portrait mode. The number of columns can be adjusted to suit preferences. By utilizing screen breakpoints from the Settings panel, different layouts can be achieved.
You can fine tune your map with a list of settings available on the Settings panel. Changes are applied immediately.
You can define reusable location styles which are added as CSS classes to a marker or an svg element. Styles can control the background and stroke colors of base, hover and active states as well as stroke width and text color.
If a style is assigned to a location, it will overwrite its color attribute.
The map's primary color can be customized to match your website's design.
Use the Custom CSS field for advanced styling.
You can make certain parts of an SVG file interactive, such as a region of a geographic map or a room of a building. This feature is only available when using SVG as base map (PNG and JPG based maps can only have location markers).
Groups that begin with the name MLOC- are detected by Mapplic, and their named child elements are considered interactive elements.
Using the above structure, there will be 3 interactive elements and you can link a location to any of those elements by setting the location ID to u01, u02 or u03. Please ensure that location IDs always start with a letter and not a number or a special character.
Keeping your SVG map files clean and lightweight is crucial to ensure optimal performance. Overly large files can negatively impact the performance of the map.
Version 8 of Mapplic was completely rebuilt using React, the most widely used JavaScript library. It is packaged in a way that makes it compatible with any website.