I2Djs-v3
  • Introduction to I2Djs
  • Getting Started
    • Installation
    • Quick Start
    • Resources
  • Guide
    • Canvas: Create-animate
    • SVG: Create-animate
    • WebGL: Create-animate
    • Data Join-Action
    • Animation-Chaining
    • Canvas: Textures & Sprite animation
    • Canvas: Heatmap
    • WebGL: Heatmap
    • WebGL: Custom Shaders
    • Canvas: GeoWorld Map with D3 modules
    • Canvas: Clipping, Masking, Pattern
    • SVG: Clipping, Masking, Pattern
    • I2Djs + Physics Engine - MatterJs
  • API Reference
    • Layers
      • Canvas Layer
      • SVG Layer
      • WebGL Layer
    • Elements API
    • Canvas additional features
    • WebGL additional features
      • Custom Shader
      • Geometry
      • Render Target
      • Texture Object
    • Join Action
    • Animation
    • Chaining
    • Path
    • Events
    • Behaviour
      • Zoom and Pan
      • Drag
  • Examples
    • Canvas
    • SVG
    • WebGL
Powered by GitBook
On this page

Was this helpful?

  1. Guide

Canvas: GeoWorld Map with D3 modules

PreviousWebGL: Custom ShadersNextCanvas: Clipping, Masking, Pattern

Last updated 5 years ago

Was this helpful?

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)');
	});
});