You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
6.5 KiB
199 lines
6.5 KiB
/*=========================================================================================
|
|
File Name: links-between-plotted-cities.js
|
|
Description: Links between plotted cities mapael vetor map example
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
// Links between plotted cities mapael vetor map
|
|
// ---------------------------------------------
|
|
|
|
$(window).on("load", function(){
|
|
|
|
$(".links-between-plotted-cities").mapael({
|
|
map: {
|
|
name: "world_countries",
|
|
defaultArea: {
|
|
attrs: {
|
|
fill: "#FECEA8",
|
|
stroke: "#FFFFFF"
|
|
}
|
|
},
|
|
// Default attributes can be set for all links
|
|
defaultLink: {
|
|
factor: 0.4,
|
|
attrsHover: {
|
|
stroke: "#99B898"
|
|
}
|
|
},
|
|
defaultPlot: {
|
|
text: {
|
|
attrs: {
|
|
fill: "#2A363B"
|
|
},
|
|
attrsHover: {
|
|
fill: "#000"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plots: {
|
|
'paris': {
|
|
latitude: 48.86,
|
|
longitude: 2.3444,
|
|
tooltip: {content: "Paris<br />Population: 500000000"}
|
|
},
|
|
'newyork': {
|
|
latitude: 40.667,
|
|
longitude: -73.833,
|
|
tooltip: {content: "New york<br />Population: 200001"}
|
|
},
|
|
'sanfrancisco': {
|
|
latitude: 37.792032,
|
|
longitude: -122.394613,
|
|
tooltip: {content: "San Francisco"}
|
|
},
|
|
'brasilia': {
|
|
latitude: -15.781682,
|
|
longitude: -47.924195,
|
|
tooltip: {content: "Brasilia<br />Population: 200000001"}
|
|
},
|
|
'roma': {
|
|
latitude: 41.827637,
|
|
longitude: 12.462732,
|
|
tooltip: {content: "Roma"}
|
|
},
|
|
'miami': {
|
|
latitude: 25.789125,
|
|
longitude: -80.205674,
|
|
tooltip: {content: "Miami"}
|
|
},
|
|
|
|
// Size=0 in order to make plots invisible
|
|
'tokyo': {
|
|
latitude: 35.687418,
|
|
longitude: 139.692306,
|
|
size: 0,
|
|
text: {content: 'Tokyo'}
|
|
},
|
|
'sydney': {
|
|
latitude: -33.917,
|
|
longitude: 151.167,
|
|
size: 0,
|
|
text: {content: 'Sydney'}
|
|
},
|
|
'plot1': {
|
|
latitude: 22.906561,
|
|
longitude: 86.840170,
|
|
size: 0,
|
|
text: {content: 'Plot1', position: 'left', margin: 5}
|
|
},
|
|
'plot2': {
|
|
latitude: -0.390553,
|
|
longitude: 115.586762,
|
|
size: 0,
|
|
text: {content: 'Plot2'}
|
|
},
|
|
'plot3': {
|
|
latitude: 44.065626,
|
|
longitude: 94.576079,
|
|
size: 0,
|
|
text: {content: 'Plot3'}
|
|
}
|
|
},
|
|
// Links allow you to connect plots between them
|
|
links: {
|
|
'link1': {
|
|
factor: -0.3,
|
|
// The source and the destination of the link can be set with a latitude and a longitude or a x and a y ...
|
|
between: [{latitude: 24.708785, longitude: -5.402427}, {x: 560, y: 280}],
|
|
attrs: {
|
|
"stroke-width": 2
|
|
},
|
|
tooltip: {content: "Link"}
|
|
},
|
|
'parisnewyork': {
|
|
// ... Or with IDs of plotted points
|
|
factor: -0.3,
|
|
between: ['paris', 'newyork'],
|
|
attrs: {
|
|
"stroke-width": 2
|
|
},
|
|
tooltip: {content: "Paris - New-York"}
|
|
},
|
|
'parissanfrancisco': {
|
|
// The curve can be inverted by setting a negative factor
|
|
factor: -0.5,
|
|
between: ['paris', 'sanfrancisco'],
|
|
attrs: {
|
|
"stroke-width": 4
|
|
},
|
|
tooltip: {content: "Paris - San - Francisco"}
|
|
},
|
|
'parisbrasilia': {
|
|
factor: -0.8,
|
|
between: ['paris', 'brasilia'],
|
|
attrs: {
|
|
"stroke-width": 1
|
|
},
|
|
tooltip: {content: "Paris - Brasilia"}
|
|
},
|
|
'romamiami': {
|
|
factor: 0.2,
|
|
between: ['roma', 'miami'],
|
|
attrs: {
|
|
"stroke-width": 4
|
|
},
|
|
tooltip: {content: "Roma - Miami"}
|
|
},
|
|
'sydneyplot1': {
|
|
factor: -0.2,
|
|
between: ['sydney', 'plot1'],
|
|
attrs: {
|
|
stroke: "#99B898",
|
|
"stroke-width": 3,
|
|
"stroke-linecap": "round",
|
|
opacity: 0.8
|
|
},
|
|
tooltip: {content: "Sydney - Plot1"}
|
|
},
|
|
'sydneyplot2': {
|
|
factor: -0.1,
|
|
between: ['sydney', 'plot2'],
|
|
attrs: {
|
|
stroke: "#99B898",
|
|
"stroke-width": 8,
|
|
"stroke-linecap": "round",
|
|
opacity: 0.8
|
|
},
|
|
tooltip: {content: "Sydney - Plot2"}
|
|
},
|
|
'sydneyplot3': {
|
|
factor: 0.2,
|
|
between: ['sydney', 'plot3'],
|
|
attrs: {
|
|
stroke: "#99B898",
|
|
"stroke-width": 4,
|
|
"stroke-linecap": "round",
|
|
opacity: 0.8
|
|
},
|
|
tooltip: {content: "Sydney - Plot3"}
|
|
},
|
|
'sydneytokyo': {
|
|
factor: 0.2,
|
|
between: ['sydney', 'tokyo'],
|
|
attrs: {
|
|
stroke: "#99B898",
|
|
"stroke-width": 6,
|
|
"stroke-linecap": "round",
|
|
opacity: 0.8
|
|
},
|
|
tooltip: {content: "Sydney - Plot2"}
|
|
}
|
|
}
|
|
});
|
|
|
|
}); |