Recently, I created a custom map using datamaps developed by @markmarkoh
I'm thrilled with how it turned out, but I am eager to add functionality that allows the map to rotate when dragged with a cursor. My inspiration comes from examples like the ones found here and here.
Below is a snippet of the code I used:
//basic map configuration with custom fills, mercator projection
// JavaScript code here...
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="http://unilogue.github.io/js/map/datamaps.world.min.js"></script>
<div id="world" style="fill-opacity:0.7; height: 600px; width: 500px; margin-top:-100px;"></div>After learning about the 'done' callback that enables event usage, I experimented with creating a zoom/pan feature. Now, I'm looking for guidance on implementing d3.behavior.drag and Euler angles to achieve the desired rotation effect.
var map = new Datamap({
done: function(datamap) {
// Zoom/pan experimentation code here...
},
Exploring potential solutions, I stumbled upon a promising example found here. Unfortunately, my attempt to incorporate this method into a 'done' callback didn't yield the expected results. Any suggestions?
var dragBehaviour = d3.behavior.drag()
.on('drag', function(){
// Drag behavior logic here...
// More JavaScript code continues...
})