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.

SVG with RaphaelJS - Creating Interactive Maps Part 1

Welcome to this section of the weekly series SVG with RaphaelJS. This week we will be going into the creation of interactive maps.

My country of focus for this will be Liberia. Liberia has suffered from the scourge of the Ebola virus and has been in the news. To this end, I have decided to do this tutorial with a focus on Liberia. The principles here can be extended to any country of your choice.

First Things First

You must understand the process of creating an interactive map of a country is classed under Data Visualization. As a result, I will use the process of creating Data Visualization to explain what I am doing.

The process of Data Visualization is listed below:

1. Acquire
2. Parse
3. Filter
4. Mine
5. Represent
6. Refine
7. Interact

Acquire

We start the process of Data Visualization by obtaining the data we want to visualize. In our case, we what to visualize Counties in Liberia. This is a lot like saying State in Nigeria or Regions in Ghana. To do this, we must do a Google search for SVG map of the Counties in Liberia.

Fortunately, the first result is what I am looking for. You click on the link and you should see this page.

It contains a link to all the SVG files for the 15 Counties in Liberia. So what you need to do is open each of the maps in a new tab. I prefer to do this because the SVG maps are coloured and their counties are named. I prefer to do this because the SVG maps are coloured and as a result you could quickly look at the markup and find which county fits which by looking at the SVG file.

Please remember that SVG is an image file represented by text. So by studying the styling of the maps, you can guess which one belongs to a particular county.

When you open any of the tabs for the maps, you should see the following:

So click on the download link and select full resolution from the popup displayed.

Once you have all 15 county maps on your machine, the hardwork starts. Do remember that your files must be in the SVG format. Please read up on the SVG format if you don't understand it.

Parse

Here the goal is to provide some structure into the data's meaning and order it into categories. For our purposes, parsing will be done manually. Open all the 15 SVG files using your text editor and view the source code that generates the images.

Personally this is the hard part. You want to look at all the 15 files and try to isolate their commonalities. What you really want to watch out for is the style attribute. In each of the maps, one county is red. The goal is to understand the structure of the SVG file.

In order to extract a path, we need to get the values of each path for the county. To do this, use the browser window to extract the source of the SVG image by clicking on the map.

Of particular interest in unraveling the secret of this map is to look for the attribute for a path. This is shown below:

Copy your d value for the county in question and save it in a file called path.js. Use the following format.

pathNumber:{

name: "",

path: ""

}

Filter

The goal is to remove all but the data of interest. For our map, we intend to isolate only the paths that will give us the counties. This is where the data is unique to this project. Find the path value for the red outlined SVG shape and select it. Note that each path belongs to a County in Liberia. So note the County name and associate it with the path it belongs to.

Follow the format given above for all the 15 counties in Liberia. In the end, we have a path file which has the paths for all the Counties in Liberia. With this file, we will create the map of Liberia. Next time, we will look at making the map interactive.

The complete path file for Liberia is available at the GitHub repository for this course. You can download it from there.

Next week, we will use this file to create an interactive map of Liberia.

Conclusion

So we have come to the end of this week's section of the SVG with RaphaelJS series. We have learned how to extract the paths the administrative divisions of a country.

My challenge to you is to use this knowledge and create the path file for your country. 

Have a great week.

Exporting For Android On The Godot Game Engine

The Godot Game Engine is an open-source alternative to the Unity game engine. It can be used to create both 2D and 3D games for a variety of platforms as shown below.

I got introduced to it last week Saturday and I am making these notes to document how to configure the engine to export to Android. The export to the Linux, Mac OSX and Windows Desktop are straight forward.

To configure the engine to export to Android, follow the following steps:

1. Download and install the Java 6 SDK.
2. Download and install the Android SDK
3. Generate a debug key for signing your APK use this command in your command prompt:  keytool -keyalg RSA -genkeypair -alias androiddebugkey -keypass android -keystore debug.keystore -storepass android -dname "CN=Android Debug,O=Android,C=US" -validity 9999
4. Launch the Godot game engine, then go to Settings. Choose install Export templates and load in the export template zip file which is available on the Godot website
   
5. Now click on Editor Settings and fill in the values for your Adb, Jarsigner and Debug Keystore
   

For the purpose of reference, mine are
Adb: C:/Program Files (x86)/Android/android-sdk/platform-tools/adb.exe
Jarsigner: C:/Program Files (x86)/Java/jdk1.6.0_45/bin/jarsigner.exe
Debug Keystore: C:/Users/Truston Ailende/debug.keystore

How I Created My First Android Game Using The Corona SDK

I developed my first game in 2010 for the Samsung Application Developers Contest. I came 2nd in the Casual Games Puzzles Category.

In the years to come I would go through a lot of tools in my quest to find one suitable with my reality. This year, that search ended as I found the Corona SDK.

On the 20th of March this year, I downloaded the Corona SDK. I spent the weekend looking through the sample code and by the next week I was convinced that I had found a tool that would enable me create 2D games with the only limit being my imagination.

The following reasons are why I settled on the Corona SDK. They are:

1. Free
2. Low hardware requirements
3. Easy to use and learn
4. Rapid application development
5. Cloud compilation of applications

The above features matter because of the hardware I have. As you know, the Android SDK is slow. However, on a Windows machine it is plain disgusting. With that in mind, having a cloud compilation tool meant that I would avoid using the Android emulator.

The Corona SDK simulator is quite fast even on machines with low hardware specifications. This means that I could use my machine to develop the applications.

The cloud build needs JDK 6 on a Windows machine. Once it is installed, you are good to go. However, you must sign the application with a key. To do this, type the following into your command prompt:

keytool -genkey -v -keystore project_name.keystore -alias project_name -keyalg RSA -validity 999999

Replace project_name with the name of your project. You need this keystore before you can do your build.

Testing on my machine was done using BlueStacks which allows you to run Android apps on your machine. Once I finished the Corona SDK cloud build, I tested the results on my BlueStacks installation. It was a moment of baited breath as I watched the installation begin.

Finally the installation concluded and I watched the game launch on BlueStacks. Once I didn't have any problems, I tested it on an actual device.

At last it was time to go to the Google Play store. It was a moment of anxiety wondering if my credit card would be rejected because of my nationality.

In the end, the application go published. Without the Corona SDK, I wouldn't have come this far.

You can download Broom Of Justice here -> https://play.google.com/store/apps/developer?id=Dreamquest+Multimedia&hl=en