Make line maps your way!
LineMapper is a powerful topology map-making library compatible with both desktops & mobile devices.
So basically, LineMapper can:
Generate abranched line map for you. And it's easy. Just draw a main line and you can branch as many waypoints as you want. Heck, you can even use it as an event timeline!
Make your map interactive. Tired of static branched maps? You can script a custom function to your waypoints to make them interactive. Make them shine!
Make everything customizable. Custom waypoint styles, line design, you name it! LineMapper is very modular and therefore you can customize anything you'd ever need.
Projects using LineMapper:
Noobish's interactive Minecraft Nether Highway map!
This map works as a virtual Minecraft top-down view map. It uses interactive waypoint behavior along with custom content.
Did you know that your project can be featured here as well...? 😎
But how do you set it up?
First, download LineMapper by clicking HERE or install it using npm.
// Installation via npm
npm install linemapper.js
Afterwards, you can import it to your project via this code:
// Import via HTML in case you don't use a package manager
<script src="linemapper.js"></script>
// Import via npm into your project in case you use it
const lineMapper = require('linemapper.js');
Now you need to do is to set up the container where the map will be drawn.
// Put a canvas inside a container with the linemapper class (set your own width/height)
<div class="linemapper">
<canvas id="your-custom-id"></canvas> // your-custom-id will be used for canvas init
</div>It's time to initialize LineMapper!
// Call this at any time you need (after loading the library itself)
lineMapper.init({
canvasId: 'your-custom-id', // the ID we have used in our canvas tag
// settings for the main line - coordinates 0 / 0 indicate the middle of the canvas
mainLine: {
startPosX: '-512', // start position on X axis
startPosY: '0', // start position on Y axis
endPosX: '512', // end position on X axis (only used for horizontal lines)
endPosY: '512', // end position on Y axis (only used for vertical lines)
color: '#bada55', // color (can be in any format - rgb, rgba, hex...)
branchSquareColor: 'white', // color of the square that indicates branching
orientation: 'vertical', // orientation of the line (can be either horizontal or vertical)
width: 20 // thickness in pixels
},
});
Customize your settings!
Custom shapes:
We store custom styles for your waypoints as an object.
You can call them using this parameter in the init function.
// Inside of lineMapper.init()
shapes: shapesData
Here's an example of a custom shape:
// An external const with objects (example)
const shapesData = [
{
name: 'importantHexagon', // the name of the shape (will be used in your waypoints)
size: 20, // size in pixels
shape: 'hexagon', // shape - can either be circle / hexagon / square
color: 'white', // color - any hex/rgb/rgba/words are supported
fontSize: 24 // font size in pixels
},
];
Custom waypoints:
Setting your custom waypoints is easy! The amount of required options is very low and you can add your own that you can use with your own functions.
// Inside of lineMapper.init()
waypoints: waypointsData
Here's an example of a custom waypoint:
// An external const with objects (example)
const waypointsData = [
{
name: 'My waypoint!',
type: 'importantHexagon',
x: -256,
y: 128,
textposition: 'left' // optional - defaults to bottom
floatingwaypoint: true // optional - defaults to false
},
];
Time for a demo!
In this showcase you will be able to see a very simple map. Settings on the left, result on the right. It's as simple as that.
Demo settings:
// The init function - you can find the settings for waypoints and shapes in the next code-block.
lineMapper.init({
canvasId: 'demoCanvas',
canvasWidth: 1000,
canvasHeight: 2000,
defaultZoom: 0.5,
shapes: customShapes,
waypoints: customWaypoints,
font: 'Titillium Web',
mainLine: {
startPosX: -768,
startPosY: 0,
endPosX: 768,
color: 'rgba(235, 138, 212, .6)',
branchSquareColor: 'pink',
orientation: 'horizontal',
width: 20
},
});
// Shapes & waypoint settings:
const customShapes = [
{
name: 'pinkCircle',
size: 25,
shape: 'circle',
color: 'pink',
fontSize: 24
}
];
const customWaypoints = [
{
name: 'My waypoint!',
type: 'pinkCircle',
x: -256,
y: 128,
textposition: 'left'
},
{
name: 'My other waypoint...',
type: 'pinkCircle',
x: 256,
y: -128,
textposition: 'right',
floatingwaypoint: true
},
];
Custom settings & defaults:
As our demo didn't use all the custom base settings that you can use on init, here are the options with their default values:
// Inside of lineMapper.init()
// Virtual canvas size
canvasWidth: 10000,
canvasHeight: 10000,
// Zoom and pan speeds
touchZoomFactor: 0.1,
panSpeed: 1,
// Position and zoom size on load
defaultZoom: 0.5,
defaultX: 0,
defaultY: 0,
// Shapes and waypoints are an empty object by defualt. See above for examples to fill them
shapes: {},
waypoints: {},
font: sans-serif, // Default font, you can use any imported font
By using the handlers object, you can define what will happen on clicking a waypoint or you can define your own behavior for printing coordinates if needed.
// Inside of lineMapper.init()
handlers: {
waypointClick: function (waypoint) {
customBehavior(waypoint);
},
showCoordinates: function(x,y) {
customBehavior(x,y);
},
waypointClickOutside: function(waypoint) {
customBehavior(waypoint);
}
},