Create a div to attach the map to. Pass in the id and width size (in pixels) when creating a map in your JavaScript. Create the map by creating a MapConnections object.
new MapConnections({
divId: string,
width: int,
whiteMap: bool? = false,
mapType: string? = "outline" : "outline" | "outlineFilled" | "filled",
imgFilter: string? = "" : CSS Filter,
})Will create the map below with width 400px:
<div id="my-map"></div>const map = new MapConnections({ divId:'my-map', width:400 })You can add markers by calling addMarker or addMarkerApproxLongLat
MapConnections.addMarker({
top: int,
left: int,
title: string?,
description: string?,
color: string? (color),
})MapConnections.addMarkerApproxLongLat({
top: int,
left: int,
title: string?,
description: string?,
color: string? (color),
})You can add connections by calling addConnection
Specify 2 marker indices (start and end), if you want an animation initially (optional), the custom icon id (optional - leave as empty string if none), and the animation duration (milliseconds)
MapConnections.addConnection({
markerIndexStart: int,
markerIndexEnd: int,
animation: bool? = true,
iconId: string? : div ID for custom icon,
animationDuration: int? = 2500,
rotateIcon: bool? = false,
width: int? = 5,
title: string?,
description: string?,
color: string? (color),
iconColor: string? (color),
})Will create the map below with 2 markers (with a relative location points, and at a longitude/latitude point) and a connection line (with a dot animating along the path):
map.addMarker({ top:200, left:100 })
map.addMarkerApproxLongLat({ longitude:27, latitude:108 })
map.addConnection({ markerIndexStart:0, markerIndexEnd:1 })
To get a list of all the generated marker objects, access the class variable markers (list of objects).
To get a list of all the generated connection objects, access the class variable connections (list of objects).
//Get number of current markers
console.log(map.markers.length)
>> 2
// Get number of current connections
console.log(map.connections.length)
>> 1
// Get all marker objects
console.log(map.connections)
// Get all connection objects
console.log(map.connections)
You can visually display the indices of the connections and the markers by using the functions showMarkerIndex showAllMarkerIndices showConnectionIndex showAllConnectionIndices. This can help indicate which markers to specify for a specific connection.
To remove the indices you can use the functions hideMarkerIndex hideAllMarkerIndices hideConnectionIndex hideAllConnectionIndices
MapConnections.showAllMarkerIndices()
MapConnections.showMarkerIndex({ markerIndex: int })
MapConnections.showAllConnectionIndices()
MapConnections.showConnectionIndex({ connectionIndex: int })MapConnections.hideAllMarkerIndices()
MapConnections.hideMarkerIndex({ markerIndex: int })
MapConnections.hideAllConnectionIndices()
MapConnections.hideConnectionIndex({ connectionIndex: int })Will create the map below showing the connection and index vertices (while hiding the 0th marker index):
map.showAllConnectionIndices()
map.showAllMarkerIndices()
map.hideMarkerIndex({ markerIndex: 0 })
You can start and stop the animation by calling the function startAnimation and stopAnimation respectively
MapConnections.startAnimation({ connectionIndex: int })
MapConnections.stopAnimation({ connectionIndex: int })or you can disable the animation initially by setting animation to false when adding a connection
MapConnections.addConnection({
markerIndexStart: int,
markerIndexEnd: int,
animation: bool? = true,
iconId: string? : div ID for custom icon,
animationDuration: int? = 2500,
rotateIcon: bool? = false,
width: int? = 5,
title: string?,
description: string?,
color: string? (color),
iconColor: string? (color),
})map.startAnimation({ connectionIndex:0 })map.stopAnimation({ connectionIndex:0 })You can add a title and description for markers and connections. When a user hovers over either, this information will be shown. Use the functions setMarkerInfo and setConnectionInfo to set this information. If it is undefined, it will not show a tooltip.
MapConnections.setMarkerInfo({ markerIndex: int, title: string?, description: string? })
MapConnections.setConnectionInfo({ connectionIndex: int, title: string?, description: string? })You can also initialize titles and descriptions (by initializing the parameter title and/or description) for markers and connections when they are created.
MapConnections.addMarker({
top: int,
left: int,
title: string?,
description: string?,
color: string? (color),
})
MapConnections.addConnection({
markerIndexStart: int,
markerIndexEnd: int,
animation: bool? = true,
iconId: string? : div ID for custom icon,
animationDuration: int? = 2500,
rotateIcon: bool? = false,
width: int? = 5,
title: string?,
description: string?,
color: string? (color),
})Will create the map below with hover information (hover over the markers and connection line to see the title and descriptions!):
map.setConnectionInfo({ connectionIndex:0, title:"Connection Title", description:"Some description here." })
map.setMarkerInfo({ markerIndex:0, title:"Marker Title", description:"Some description here." })To see more detailed examples of how customizations can be applied, see the Practical example below.
Set the background color of the map, color of markers, color of connection path, and the color of the default icon that animates along the path.
MapConnections.setBackgroundColor({ color: string (color) })
MapConnections.setMarkerColor({ markerIndex: int, color: string (color) })
MapConnections.setConnectionColor({ connectionIndex: int, color: string (color) })
MapConnections.setConnectionIconColor({ connectionIndex: int, color: string (color) })
Invert the map to use a white outline in the constructor of your map (set the whiteMap parameter to true).
new MapConnections({
divId: string,
width: int,
whiteMap: bool? = false,
mapType: string? = "outline" : "outline" | "outlineFilled" | "filled",
imgFilter: string? = "" : CSS Filter,
})Set the map crop size (in pixels), shift the map to show a specific area, or zoom into an area of the map image by increasing its scale.
Note: You should set the zoom level before setting points. The width and height of the map can change, causing the calculations for marker positions to become offset.
MapConnections.setCropSize({ width: int, height: int })
MapConnections.setMapShift({ x: int, y: int })
MapConnections.setMapZoom({ zoom: int })To create a custom icon to overwrite the default moving dot, add the icon to the HTML body and pass in the custom icon id when a connection is made
Will create the map below with a custom package icon moving along the connection line. Set rotateIcon to rotate the icon to face along the connection line path.
<img id="package-icon-example" src="package.png" width="30px" height="30px"></img>mapGettingStarted6.addConnection({ markerIndexStart:0, markerIndexEnd:1, iconId:"package-icon-example", duration:5000, rotateIcon: true })
When adding a connection, specify the animation duration. Set the value of the animationDuration parameter
MapConnections.addConnection({
markerIndexStart: int,
markerIndexEnd: int,
animation: bool? = true,
iconId: string? : div ID for custom icon,
animationDuration: int? = 2500,
rotateIcon: bool? = false,
width: int? = 5,
title: string?,
description: string?,
color: string? (color),
})Show an automatically generated legend based on the parameters entered into the map by calling the function:
MapConnections.showLegend()map.setMarkerInfo({ markerIndex:1, title:"Marker 2" })
map.setMarkerColor({ markerIndex: 0, color:"#2E326E" })
map.setMarkerColor({ markerIndex: 1, color:"#9B53EE" })
map.setConnectionColor({ connectionIndex: 0, color:"#FF2424" })
map.showLegend()