view = {
const origin = vl.selectPoint().fields('origin')
.on('mouseover').nearest(true);
const id = vl.selectPoint().on('mouseover').fields('origin').nearest(false);
const foreign = vl.data(capitals).key('CountryCode').fields('latitude', 'longitude', 'member', 'CountryCode');
const map = vl.markGeoshape({stroke: '#fff', strokeWidth: 1.25, zindex:0})
.data(europe)
.transform(
vl.lookup('id').from(foreign.fields('member')),
)
.encode(
vl.color().fieldN('member').legend(null).scale({range: ['#f0f0f3','#3d6a9a']}),
);
const routes = vl.markRule({color: '#00ffff', opacity: 0.6})
.data(linesCapitals)
.transform(
vl.filter(origin.empty(false)),
vl.lookup('origin').from(foreign.fields('latitude', 'longitude')).as('latitude', 'longitude'),
vl.lookup('destination').from(foreign.fields('latitude', 'longitude')).as('lat2', 'lon2')
)
.encode(
vl.latitude().field('latitude'),
vl.longitude().field('longitude'),
vl.latitude2().field('lat2'),
vl.longitude2().field('lon2')
);
const points = vl.markCircle()
.data(linesCapitals)
.transform(
vl.lookup('origin').from(foreign.fields('Country', 'City', 'Address', 'latitude', 'longitude'))
)
.params(origin)
.encode(
vl.latitude().fieldQ('latitude'),
vl.longitude().fieldQ('longitude'),
vl.size().value(20).if(origin, vl.size().value(100)),
vl.color().value('#00ffff'),
vl.tooltip(['City',"Country","Address"])
);
return vl.layer(map, routes, points)
.project(vl.projection('conicEquidistant')
.rotate([-20.0, 0.0])
.center([0, 53])
.parallels([35.0, 65.0])
.scale(780))
.width(800)
.height(600)
.config({view: {stroke: null}})
.render({renderer: 'svg'});
}