8

Github GitHub - kaosdev/map.js: A lightweight javascript library to create inter...

 3 years ago
source link: https://github.com/kaosdev/map.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

map.js

A lightweight library to create interactive maps.

Report Bug · Request Feature

About the Project

Maps are great to learn and understand a concept, and they are even better if you can interact with them.

I created this library because I have not found another library to create maps the way I wanted.

HTML not canvas

This library create the map as html, and not a canvas. This is because crawlers (like googlebot) do not understand canvas elements. Plus canvas are not really accessible.

Lightweight

This library is also lightweight, just 7kb minified and gzipped.

Are you curious to see hot it looks like? Read this introduction to RxJS built with this library

Installation

map.js is published as an esm module. It can be installed via npm, using a cdn, or hosting it yourself.

Install it with npm if you use a module bundler like webpack or rollup.

npm install @kaosdev/map-js

CDN or hosted

You can also install map.js from a CDN or by downloading the dist files and hosting them yourself.

In the html you need to add a script of type module, and inside this script you can import map.js

<script type="module">
  /**
   *  Here we import from unpkg,
   *  But the url can be changed
   *  to match your hosting.
   */
  import { SketchMap } from "https://unpkg.com/@kaosdev/[email protected]/esm/map.min.js";

  // use SketchMap
</script>

Styles

Once installed you can choose to import the default styles or theme the components yourself.

If you are using webpack, you can use css-loader and mini-css-extract-plugin to import the css directly in your js/ts scripts.

import "map-js/css/styles.css";

Else you can add a link in the head of the html to import the css from unpkg or your hosting.

<head>
  ...

  <link
    href="https://unpkg.com/@kaosdev/[email protected]/css/styles.css"
    rel="stylesheet"
  />

  ...
</head>

Usage

Create a placeholder div in the html.

<div class="roadmap"></div>

Then you can create a new SketchMap passing the definitions of the labels and arrows.

// Get a reference of the previously created div
const sketchmap = document.querySelector(".roadmap");

// Define the labels
const labels = [
  {
    id: "label1", // every label must have a unique id
    content: "Label 1",
    top: 100,
    left: 100,
    width: 100,
    height: 35,
  },
  {
    id: "label2",
    content: `Label 2`,
    top: 150,
    left: 100,
    width: 100,
    height: 35,
    style: "secondary",
  },
];

// Define the arrows that connect the labels
const arrows = [
  {
    from: "label1", // 'from' and 'to' reference the label ids
    fromDir: "bottom",
    to: "label2",
    toDir: "top",
    style: "dotted",
  },
];

// Instantiate a new sketchmap
new SketchMap(sketchmap, { labels, arrows, width: 512 });

Contributing

We appreciate every contribution.

Make sure to read these:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK