The libraries starter guide, examples, and documentation can be viewed here: https://jameskokoska.github.io/Map-Connections/
In the head tag in your HTML, import the Map Connections library and CSS styles:
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jameskokoska/Map-Connections@latest/pub/mapConnectionsLibrary/mapConnectionsStyles.css">
<script defer type="text/javascript" src='https://cdn.jsdelivr.net/gh/jameskokoska/Map-Connections@latest/pub/mapConnectionsLibrary/mapConnections.js'></script>
...
</head>There are no other dependencies required.
Add the HTML to your body, pass in the div ID when creating the map with JavaScript.
<div id="map-div"></div>const map = new MapConnections({ divId:'map-div', width:400 })
map.addMarker({ top:200, left:100, title:"Marker Title", description:"Some description here." })
map.addMarkerApproxLongLat({ longitude:27, latitude:108 })
map.addConnection({
markerIndexStart: 0,
markerIndexEnd: 1,
animationDuration: 5000,
iconColor: 'red',
title: "Connection Title",
description: "Some description here."
})Starter Guide available here: https://jameskokoska.github.io/Map-Connections/starter-guide.html
API Documentation available here: https://jameskokoska.github.io/Map-Connections/api-documentation.html
- World map image from https://mapsvg.com/maps/world
- Package icon from Chanut-is-Industries https://www.flaticon.com
- Navigation route icon (modified) from Freepik https://www.flaticon.com
- Airplane icon from Freepik https://www.flaticon.com
- Car icon (modified) from Freepik https://www.flaticon.com
- Cruise icon (modified) from Freepik https://www.flaticon.com
- HighlightJS from https://highlightjs.org/ for syntax highlighting
- This library has moved away from Heroku from due to recent changes: https://blog.heroku.com/next-chapter
- The library is available on GitHub: https://raw.githubusercontent.com/jameskokoska/Map-Connections/main/pub/mapConnectionsLibrary/mapConnections.js
- With the styles: https://raw.githubusercontent.com/jameskokoska/Map-Connections/main/pub/mapConnectionsLibrary/mapConnectionsStyles.css
- To use in a project however, you cannot use GitHub as a CDN since GitHub provides
text/plain, notapplication/javascriptortext/javascript - As a work around, you can use https://www.jsdelivr.com/rawgit