Setup
Manual installation

Manual installation

Download the files from your CodeCanyon downloads (opens in a new tab) 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.

    SetupUsage