Manual installation

Download the files from your CodeCanyon downloads page. The package contains two projects.

mapplic: frontend that should be deployed to your site.
mapplic-admin: map builder that should be used for map editing on a secure (usually local) enviromnent.

Experienced users have the option to utilize package managers such as npm, pnpm or yarn to make modifications and rebuild the code.

⚠️

Using a web server is required because browsers enforce the Cross-Origin Resource Sharing (CORS) policy, restricting web pages from fetching data from domains other than their own.

Frontend

- - data.json
  - index.html
  - mapplic.js
  - mapplic.css
- index.html
- package.json

Upload files

Upload the content of dist folder to your host (index.html is optional).

Link core files

Include mapplic.js and mapplic.css within the <head> section of your webpage:

index


<head>
  <!-- existing content here -->
  <script type="module" src="./mapplic.js"></script>
  <link rel="stylesheet" href="./mapplic.css">
</head>
<body>
  <!-- existing content here -->
</body>

Embed the map

Use the <mapplic-map /> element anywhere in your page making sure that the data-json attribute is either a path to a map data.json file or a stringified JSON object.


<mapplic-map data-json="data.json" />

Map builder

- - data.json
  - index.html
  - save.js
- index.html
- package.json

Set up environment

Set up a local or a protected live environment for the dist folder. The map builder will render but changes cannot be saved yet.

⚠️

For security reasons, it’s crucial to restrict the use of the map builder to local environments or password-protected pages. Never deploy the builder on a public page, as anyone with access to it can make modifications to the map.

Start `save.js`

To enable map saving, make sure that Node.js is installed. Then access your folder through a terminal and run the following command:

Terminal


node save.js

Build map

Use the map builder to configure your map. Move files like maps, images or CSVs to the assets directory from where you can reference them.

Deploy

Once the map is finished, move the .json file and assets folder to mapplic/dist and deploy.