Thursday 26 November 2015

SVG with RaphaelJS - Conclusion

So we have reached the end. The bulk of this series was written after I had an accident in January and had to learn how to walk again in February. Writing this series took my mind off the pain. I pulled through okay and was back on my feet again.

I have covered what I know with Scalable Vector Graphics (SVG). I wish I knew more but this covers the limits of my knowledge.

There is so much I didn't cover. On where to go from here, please check out Snap.svg as its the latest library from the creator of RaphaelJS.

Today is Black Friday 34 days from now we will be in a new year. Thank you for sticking with me through this series.

 I wish you health, wealth and happiness in this great gift called life.

Tuesday 17 November 2015

SVG with RaphaelJS - Creating Interactive Maps Part 2

Welcome to a new month.

Its been a while since I last posted anything on this blog. This month, I intend to bring this series to a close. We ended with a pathfile for the interactive map for Liberia.

This month, we bring this to an end. Before we start, you can view all our files from our repository. In looking at our repository, we have obtained our path.js file.

Our task now is to parse the path.js file and display our interactive map. The code to do this is shown below:

$(function(){ var r = Raphael('map', 500, 500),
    attributes = {
      fill: '#fff',
      stroke: '#3899E6',
      'stroke-width': 1,
      'stroke-linejoin': 'round'
    },
    arr = new Array();

  for (var region in paths) {
    var obj = r.path(paths[region].path);
    obj.attr(attributes);
    arr[obj.id] = region;

    obj
    .hover(function(){
      this.animate({
        fill: '#1669AD'
      }, 300);
    }, function(){
      this.animate({
      fill: '#FFFFFF'
      }, 300);
    });

    $(obj.node).qtip({
      content: { text: 'Name: ' + paths[arr[obj.id]].name },
      style: {
        background: '#000000',
        color: '#ffffff',
        border: { width: 6, radius: 3, color: '#ff0000' }
       },
      position: {
        my: 'left center',
        at: 'bottom center',
        target: 'mouse',
        adjust: { x: 20, y: 25 }
      }
    });
  }
 
r.setViewBox(0, 0, 1000, 1000, true);
});

In total, we have 44 lines of code. I will walk you through it. On line 1 we instantiate jQuery. jQuery is an excellent way to get access to the DOM elements of a webpage.

Next we declare our paper as a variable r. The code snippet to do this is shown below:

var r = Raphael('map', 500, 500),

attributes = { fill: '#fff',
stroke: '#3899E6',
'stroke-width': 1,
'stroke-linejoin': 'round'
},
arr = new Array();
Next we loop through the paths array. The for loop iterates through each and every object that makes up the interactive map.

obj .hover(function(){
this.animate({
fill: '#1669AD'
}, 300);
}, function(){
this.animate({
fill: '#FFFFFF'
}, 300);
});

The above block of code makes the particular object in the map change colour when the mouse is placed over it.
$(obj.node).qtip({ content: { text: 'Name: ' + paths[arr[obj.id]].name },
style: {
background: '#000000',
color: '#ffffff',
border: { width: 6, radius: 3, color: '#ff0000' }
},
position: {
my: 'left center',
at: 'bottom center',
target: 'mouse',
adjust: { x: 20, y: 25 }
}
});
}

The above code uses the Qtip library to place a tooltip on the object on mouse over.

Finally, we resize the map on the paper by reducting its size. The code to do this is shown below:

r.setViewBox(0, 0, 1000, 1000, true);

At the end, we have an interactive map of Liberia. You can view it here. So we have reached the end.