A lightweight library to create interactive maps.
Report Bug
·
Request Feature
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.
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.
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
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-jsYou 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>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>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 });We appreciate every contribution.
Make sure to read these: