Canvas: GeoWorld Map with D3 modules
Last updated
Last updated
var width = 960;
var height = 500;
var renderer = i2d.canvasLayer('#myCanvas', {}, {});
var projection = d3.geoMercator()
.translate([width/2, height/2])
.center([-80, 60]);
var path = d3.geoPath()
.projection(projection);
var worldmap = d3.json("./../data/world.geo.json");
Promise.all([worldmap]).then(function(values) {
let path_ = renderer.createEl({
el: 'path',
attr: {
d: path(values[0])
},
style: {
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowColor: '#333333',
fillStyle: 'rgba(255, 130, 130, 1)'
}
})
.on('mouseover', function() {
this.setStyle('fillStyle', 'rgba(250, 60, 60, 1)');
}).on('mouseout', function() {
this.setStyle('fillStyle', 'rgba(255, 130, 130, 1)');
});
});