Creating a municipality map of Portugal with Raphael.js

Coming from one of the poorest regions of Portugal myself, I wondered if the “right” places were the ones indeed taking advantage of this measure and trying to attract people to live there. After a bit of research, I found that my local town didn’t use this measure but some neighbouring places did. I searched for a map so that I could visualize where this was happening and by how much (municipalities can give back up to 5% of the tax to the be collected). I didn’t find any so I thought I would create one.

Step 2 — Creating a Javascript map with Raphael.js

After some time I had a map that correctly represented all of the councils with names and real borders. In order to use this in JavaScript I created a file, concelhosSVG.js , and I created the following:

Finally, we define concelhosSVG which will hold an index with the name of the council and the path to append to our map variable.

Step 3 — Adding our map to html

Now that we have a map we can create a simple HTML page to include the map.

I’ve gone ahead and added a simple style to our CSS file

And here’s the result

Step 4 — Adding our tax information

We’ll create a new JavaScript file called concelhosIRS.js and we’ll create an array inside it with all the information needed.

Step 5 — Styling our map with the tax information

Finally, we just need to syle our map based on this information. In order to do that we’ll create a new JavaScript file named main.js and we’ll add the following code to it.

We’ll start by adding our initial style, our style when hovering the mouse over a council and the style for each of the tax brackets. I chose to create six tax brackets between 0% and 5%. The councils that don’t offer any tax benefit will not have a colour and will just show as grey.

Next, we add a function to change the styling based on the tax benefit that the council provides.

And we wrap everything together by adding our main code that initialises the map colours and adds our event listeners for when we hover our mouse over a council and move out.

Final result and notes

After a few updates to our HTML file, we end up with the following map.

Much nicer right?

I’ll throw some additional notes just so you’re aware of them:

Related posts:

Would you just stand-by and watch as you see one of your loved ones embrace a life you quit long ago? Would you accept the birth of a relationship between two people that seems so against nature? But…

Sudah sejak lama saya mempunyai ketertarikan dengan isu-isu lingkungan. Media instagram pun saya manfaatkan untuk mengikuti beberapa akun yang fokus terhadap lingkungan. Algoritma instagram membuat…

Cushioning materials are a great way to show that you care about items arriving safely at the proper destination. They can also help solidify your brand identity, if you’re able to personalize it…