@kaosdev/map-js
v0.3.1
Published
A JavaScript library to create interactive maps
Readme
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.
Demo
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.
npm
Install it with npm if you use a module bundler like webpack or rollup.
npm install @kaosdev/map-jsCDN 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: