AmchartsTravelMap

index.html

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<div id="chartdiv"></div>

script.js

var chart = am4core.create("chartdiv", am4maps.MapChart);

chart.geodata = am4geodata_worldLow;

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");

polygonSeries.exclude = ["AQ"]

// Add line series
var lineSeries = chart.series.push(new am4maps.MapLineSeries());lineSeries.data = [{
  "multiGeoLine": [
    [
      { "latitude": 48.856614, "longitude": 2.352222 },
      { "latitude": 36.1173924, "longitude": -86.7850536 }
    ],

   [
      { "latitude": 49.282729, "longitude": -123.120738 },
      { "latitude": 36.1173924, "longitude": -86.7850536 }
    ],
    [
      { "latitude": 35.0427945, "longitude": -106.6129123 },
      { "latitude": 36.1173924, "longitude": -86.7850536 }
    ]

  ]
}];

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());

// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#B27799");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{name}";

// Set property fields
imageSeriesTemplate.propertyFields.latitude = "lat";
imageSeriesTemplate.propertyFields.longitude = "lon";

// Add data for the three cities
imageSeries.data = [
{"name":"Nashville","id":"Nashville","lat":36.1626638,"lon":-86.7816016},
{"name":"Albuquerque","id":"Albuquerque","lat":35.0843859,"lon":-106.650422},
{"name":"Denver","id":"Denver","lat":39.7392358,"lon":-104.990251},
{"name":"Santa Monica","id":"Santa Monica","lat":34.0194543,"lon":-118.4911912},
{"name":"Irvine","id":"Irvine","lat":33.6845673,"lon":-117.8265049},
{"name":"Orvieto","id":"Orvieto","lat":42.7185068,"lon":12.1107446},
{"name":"Bologna","id":"Bologna","lat":44.494887,"lon":11.3426162},
{"name":"Montepulciano","id":"Montepulciano","lat":43.0986938,"lon":11.7872467},
{"name":"Stockholm","id":"Stockholm","lat":59.3293235,"lon":18.0685808},
{"name":"Leksand Municipality","id":"Leksand Municipality","lat":60.7366289,"lon":14.8600482},
{"name":"Gotland","id":"Gotland","lat":57.4684121,"lon":18.4867447},
{"name":"Walt Disney World Resort","id":"Walt Disney World Resort","lat":28.385233,"lon":-81.563874},
{"name":"Minneapolis","id":"Minneapolis","lat":44.977753,"lon":-93.2650108},
{"name":"Boston","id":"Boston","lat":42.3600825,"lon":-71.0588801},
{"name":"Frankfurt","id":"Frankfurt","lat":50.1109221,"lon":8.6821267},
{"name":"Soufriere","id":"Soufriere","lat":13.8570986,"lon":-61.0573248},
];

style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 98vh;
}

zeqbwq.markdown

AmchartsTravelMap

A Pen by Brady Kent on CodePen.

License.