API Documentation

Initializing The Map Class Object

Create a div to attach the map to. Pass in the div id and width size (in pixels) when creating a map in your JavaScript. Create the map by creating a MapConnections object.

To get the CSS filter to change the maps image to any color, use this tool: https://codepen.io/sosuke/pen/Pjoqqp

new MapConnections({
  divId: string,
  width: int,
  whiteMap: bool? = false,
  mapType: string? = "outline" : "outline" | "outlineFilled" | "filled",
  imgFilter: string? = "" : CSS Filter,
})

divId: The div's ID from HTML to attach the map to.

width: The width of the map (in pixels). The height will automatically be sized based on the ratio of the map.

whiteMap: The color of the map image to white, if set to true.

mapType: The type of map to use for the image. There are 3 different maps: "outline" | "outlineFilled" | "filled"

imgFilter: The CSS filter to apply to the map image. Useful for changing the maps color. To get the CSS filter to change the maps image to any color, use this tool: https://codepen.io/sosuke/pen/Pjoqqp.

Functions

All the functions available to use, called on the instance of the map class.

Add Marker: `addMarker`

MapConnections.addMarker({
  top: double,
  left: double,
  title: string?,
  description: string?,
  color: string? (color),
})

top: The distance relative from the top of the map image to place the marker.

left: The distance relative from the left of the map image to place the marker.

title: The title to show when the user hovers over the marker, and to show in the legend.

description: The description to show when the user hovers over the marker.

color: The color to set the marker line to. Follows CSS standards.

Add Marker At Longitude/Latitude: `addMarkerApproxLongLat`

MapConnections.addMarkerApproxLongLat({
  longitude: double,
  latitude: double,
  title: string?,
  description: string?,
  color: string? (color),
})

longitude: The latitude measurement for the marker point.

latitude: The longitude measurement for the marker point.

title: The title to show when the user hovers over the marker, and to show in the legend.

description: The description to show when the user hovers over the marker.

color: The color to set the marker line to. Follows CSS standards.

Set Marker Info: `setMarkerInfo`

MapConnections.setMarkerInfo({
  markerIndex: int,
  title: string?,
  description: string?,
})

markerIndex: The index of the marker in the marker list of marker objects.

title: The title to show when the user hovers over the marker, and to show in the legend.

description: The description to show when the user hovers over the marker.

Set Marker Color: `setMarkerColor`

MapConnections.setMarkerColor({
  markerIndex: int,
  color: string (color),
})

markerIndex: The index of the marker in the marker list of marker objects.

color: The color to set the marker line to. Follows CSS standards.

Add Connection: `addConnection`

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),
})

markerIndexStart: The first index as the starting point for the connection. The index of the marker in the markers list of marker objects.

markerIndexEnd: The last index as the ending point for the connection. The index of the marker in the markers list of marker objects.

animation: Determines if a dot or icon should be animated along the connection line.

iconId: The custom icon div's ID from HTML.

animationDuration: The length of the icons animation along the connection path in milliseconds.

rotateIcon: Determines if the icon should be rotated to face along the direction of the connection line.

width: How thick the connection line should be.

title: The title to show when the user hovers over the connection, and to show in the legend.

description: The description to show when the user hovers over the connection.

color: The color to set the connection line to. Follows CSS standards.

iconColor: The color to set the connection line's animated dot icon to. Follows CSS standards.

Set Connection Info: `setConnectionInfo`

MapConnections.setConnectionInfo({
  connectionIndex: int,
  title: string?,
  description: string?,
})

connectionIndex: The index of the connection in the connections list of connection objects.

title: The title to show when the user hovers over the connection, and to show in the legend.

description: The description to show when the user hovers over the connection.

Set Connection Color: `setConnectionColor`

MapConnections.setConnectionColor({
  connectionIndex: int,
  color: string (color),
})

connectionIndex: The index of the connection in the connections list of connection objects.

color: The color to set the connection line to. Follows CSS standards.

Set Connection Moving Dot Icon Color: `setConnectionIconColor`

MapConnections.setConnectionIconColor({
  connectionIndex: int,
  color: string (color),
})

connectionIndex: The index of the connection in the connections list of connection objects.

color: The color to set the icon to. Follows CSS standards.

Legend

Show a legend underneath the map. The labels are based off the titles specified for markers and connections. The colors are based off the colors specified for markers and connections.

Show and Enable the Legend: `showLegend`

MapConnections.showLegend()

Animations

Start Animation: `startAnimation`

MapConnections.startAnimation({
  connectionIndex: int,
})

connectionIndex: The index of the connection in the connections list of connection objects.

Stop Animation: `stopAnimation`

MapConnections.stopAnimation({
  connectionIndex: int,
})

connectionIndex: The index of the connection in the connections list of connection objects.

Map Customization

Map customizations should be set before any markers or connections are added.

Map Background Color: `setBackgroundColor`

MapConnections.setBackgroundColor({
  color: string (color),
})

color: The color to set the background to. Follows CSS standards.

Crop Size: `setCropSize`

MapConnections.setCropSize({
  width: int,
  height: int,
})

width: The width to set the crop size to, of the map.

height: The height to set the crop size to, of the map.

Map Shift: `setMapShift`

MapConnections.setMapShift({
  x: int,
  y: int,
})

x: The amount to shift by to the right.

y: The amount to shift by to the bottom.

Map Zoom: `setMapZoom`

MapConnections.setMapZoom({
  zoom: double,
})

zoom: The amount to zoom the map image in.

CSS Styles

These styles can be changed using CSS and the respective selector in HTML.

Map Marker Icon: `.map-marker-icon`

The default styles are listed below, and can be changed by overwriting the respective CSS selector to style according to preferences.

.map-marker-icon{
  transform: translateY(-14px) rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  background-color: white;
  width: 19px;
  height: 19px;
  box-shadow: 3px 2px 7px 2px #46464773;
  text-align: center;
  font-weight: 600;
  text-indent: 0;
}

Map Connection Line: `.map-marker-icon`

The default styles are listed below, and can be changed by overwriting the respective CSS selector to style according to preferences.

.map-connection{
  height:5px;
  background-color: #ffffff;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 3px 1px 7px 2px #46464773;
  transition: transform 0.5s;
  cursor: pointer;
  text-indent: 0;
  text-align: center;
  font-weight: 600;
  text-shadow: 0px 0px 4px white;
  font-size: 20px;
}

Marker Hover Container: `.map-marker-label`

The default styles are listed below, and can be changed by overwriting the respective CSS selector to style according to preferences.

.map-marker-label{
  pointer-events: none;
  background-color: #ffffff;
  color: black;
  text-align: center;
  border-radius: 7px;
  font-size: 20px;
  position: absolute;
  z-index: 5;
  text-indent: 0;
  transition: opacity 0.5s;
  transform: translateX(calc(-50% + 10px)) translateY(-50%) scale(0.5);
  width: 200px;
  padding:5px;
  opacity:0;
}

.map-marker-label p{
  margin:10px;
  margin-top: 0px;
}

.map-marker-label h3{
  margin:10px;
  margin-bottom: 5px;
}

Connection Hover Container: `#map-connection-popup`

The default styles are listed below, and can be changed by overwriting the respective CSS selector to style according to preferences.

#map-connection-popup{
  pointer-events: none;
  background-color: #ffffff;
  color: black;
  text-align: center;
  border-radius: 7px;
  position: absolute;
  z-index: 5;
  text-indent: 0;
  padding: 5px;
  box-shadow: 3px 1px 7px 2px #46464773;
  opacity: 0;
  transition: opacity 0.25s;
  font-size: 16px;
  max-width: 400px;
}

#map-connection-popup p{
  margin:10px;
  margin-top: 0px;
}

#map-connection-popup h3{
  margin:10px;
  margin-bottom: 5px;
}

Legend Container: `.legend-box`

The default styles are listed below, and can be changed by overwriting the respective CSS selector to style according to preferences.

.legend-box{
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 2px 5px 5px 2px #46464748;
  padding:15px;
  display: inline-block;
}

Debugging Tools

Markers List: `markers`

To get a list of all the generated marker objects, access the class variable markers (list of objects).

MapConnections.markers

Connections List: `connections`

To get a list of all the generated connection objects, access the class variable connections (list of objects).

MapConnections.connections

Show All Marker Indices: `showAllMarkerIndices`

MapConnections.showAllMarkerIndices()

Show Marker Index: `showMarkerIndex`

MapConnections.showMarkerIndex({
  markerIndex: int,
})

markerIndex: The index of the marker in the markers list of marker objects.

Show All Connection Indices: `showAllConnectionIndices`

MapConnections.showAllConnectionIndices()

Show Connection Index: `showConnectionIndex`

MapConnections.showConnectionIndex({
  connectionIndex: int,
})

connectionIndex: The index of the connection in the connections list of connection objects.

Hide All Marker Indices: `hideAllMarkerIndices`

MapConnections.hideAllMarkerIndices()

Hide Marker Index: `hideMarkerIndex`

MapConnections.hideMarkerIndex({
  markerIndex: int,
})

markerIndex: The index of the marker in the markers list of marker objects.

Hide All Connection Indices: `hideAllConnectionIndices`

MapConnections.hideAllConnectionIndices()

Hide Connection Index: `hideConnectionIndex`

MapConnections.hideConnectionIndex({
  connectionIndex: int,
})

connectionIndex: The index of the connection in the connections list of connection objects.

◄ Examples

Map Connections

API Documentation

Initializing The Map Class Object

Functions

Add Marker: addMarker

Add Marker At Longitude/Latitude: addMarkerApproxLongLat

Set Marker Info: setMarkerInfo

Set Marker Color: setMarkerColor

Add Connection: addConnection

Set Connection Info: setConnectionInfo

Set Connection Color: setConnectionColor

Set Connection Moving Dot Icon Color: setConnectionIconColor

Legend

Show and Enable the Legend: showLegend

Animations

Start Animation: startAnimation

Stop Animation: stopAnimation

Map Customization

Map Background Color: setBackgroundColor

Crop Size: setCropSize

Map Shift: setMapShift

Map Zoom: setMapZoom

CSS Styles

Map Marker Icon: .map-marker-icon

Map Connection Line: .map-marker-icon

Marker Hover Container: .map-marker-label

Connection Hover Container: #map-connection-popup

Legend Container: .legend-box

Debugging Tools

Markers List: markers

Connections List: connections

Show All Marker Indices: showAllMarkerIndices

Show Marker Index: showMarkerIndex

Show All Connection Indices: showAllConnectionIndices

Show Connection Index: showConnectionIndex

Hide All Marker Indices: hideAllMarkerIndices

Hide Marker Index: hideMarkerIndex

Hide All Connection Indices: hideAllConnectionIndices

Hide Connection Index: hideConnectionIndex

Add Marker: `addMarker`

Add Marker At Longitude/Latitude: `addMarkerApproxLongLat`

Set Marker Info: `setMarkerInfo`

Set Marker Color: `setMarkerColor`

Add Connection: `addConnection`

Set Connection Info: `setConnectionInfo`

Set Connection Color: `setConnectionColor`

Set Connection Moving Dot Icon Color: `setConnectionIconColor`

Show and Enable the Legend: `showLegend`

Start Animation: `startAnimation`

Stop Animation: `stopAnimation`

Map Background Color: `setBackgroundColor`

Crop Size: `setCropSize`

Map Shift: `setMapShift`

Map Zoom: `setMapZoom`

Map Marker Icon: `.map-marker-icon`

Map Connection Line: `.map-marker-icon`

Marker Hover Container: `.map-marker-label`

Connection Hover Container: `#map-connection-popup`

Legend Container: `.legend-box`

Markers List: `markers`

Connections List: `connections`

Show All Marker Indices: `showAllMarkerIndices`

Show Marker Index: `showMarkerIndex`

Show All Connection Indices: `showAllConnectionIndices`

Show Connection Index: `showConnectionIndex`

Hide All Marker Indices: `hideAllMarkerIndices`

Hide Marker Index: `hideMarkerIndex`

Hide All Connection Indices: `hideAllConnectionIndices`

Hide Connection Index: `hideConnectionIndex`