Folding map effect using Oridomi

Half gob smacked I’ll just throw out one more post today. I’ve discovered Oridomi today. In a matter of minutes, I was able to add a cool feature to my page.

First, I added a static Google Map image to my page using the Google Map API for position and markers.

var customShapes = [];

 <img src="https://maps.googleapis.com/maps/api/staticmap?center=59.273544,11.096837&zoom=15&size=600x400&markers=color:blue%7C59.273544,11.096837&maptype=hybrid" />

Then I put this image inside a div element that when executed folds the map up like a… yes, map ;)

Check out the code…

var customShapes = [];

var oriDomi = new OriDomi('.myoridommi', {
    vPanels: 5,     // number of panels when folding left or right (vertically oriented)
    hPanels: 3,     // number of panels when folding top or bottom
    speed: 3200,  // folding duration in ms
    ripple: 2,     // backwards ripple effect when animating
    shadingIntesity: .5,    // lessen the shading effect
    perspective: 800,   // smaller values exaggerate 3D distortion
    maxAngle: 40,    // keep the user's folds within a range of -40 to 40 degrees
    shading: 'soft' // change the shading type
});
var unfolded = false;
function effect() {
  //  unfolded ? jQuery(".myoridommi").hide() : jQuery(".myoridommi").slideToggle(500);
    unfolded ? oriDomi.foldUp() : oriDomi.unfold();
    unfolded = !unfolded;
}
effect();
document.getElementById('CanvasLoc').addEventListener('click', effect);
...
...