How to Make Clickable HTML Image Map with Shadow and Highlight Effect

Clickable Maps are a very useful resource in building a responsive website. Some like to call them html image maps. Basically they are images in jpeg, png, tif or jif format and a corresponding html file with co-ordinates of image areas. You can find a lot on them on the web but building a visually appealing map and adding shadow and highlight effect with jQuery is what I will be discussing in this blog today.

Before you read further it will be good to see the map in action, just go over to Clickable jQuery Map of Mexico, Caribbean and Latin America.

There are different ways in which clickable maps can be made. The latest HTML5 can also be used. I use Illustrator CS6 and Avenza MAPublisher Plugin to create my maps. The Avenza MAPublisher plugin is good to import GIS data in ESRI Shapefile format, MapInfo TAB format and many other. It also has built in feature to export any map as HTML5 zoomable map. However it has fixed specifications for the exported map and lacks simple animation which can be added using jQuery which the client insisted. He also wanted that the map should have four clickable links; Mexico, Central America, South America and Caribbean.

Adobe Illustrator in the previous versions of CS3, CS4 could export any map as HTML Map, but from CS6, this facility has been withdrawn. So how to get the co-ordinates of the shapes without CS6? I had already developed the map in Illustrator CS6 with MAPublisher, but now I could not export the map as HTML Map and further I had to join all the countries to generate four regions.

So in a nutshell, there were three requirements for making the clickable HTML Image map:-

• First    :   Create four regions from the countries
• Two     :   Find a suitable software program to export as HTML Image Map
• Three  :   Use jQuery for shadow, hover and clickable effect

The first was the simplest of the three requirements, which I could easily do with Avenza MAPublisher’s  geoprocessing function of joining the areas. But here I added another attribute field wherein the countries were suitably categorised into four regions. Then I ran the geoprocessor function of merging the areas by region attribute. This now could be exported as a Shape file to be used in any GIS program.

The second requirement was to find a suitable software program to export as HTML Image Map. And QGIS, an open source GIS work horse came to my rescue here. I highly recommend you to download the latest version of QGIS today itself. A quick Google Search got me a HTML Image Map Creator plugin for QGIS.

So now I used the exported Shapefile from MAPublisher with four regions to create the HTML Image Map. It created a very simple image map as I used a simple fill in the shape file. It also generated the four regions in HTML file.

The QGIS created Image is shown on the left and for the HTML file, I used the HREF attribute for the link. Yes, I almost forgot, you can configure the mouseover, mouseclick and click effects in the QGIS HTML Image map plugin. So I had added the four links in the HREF field which I had already created in MAPublisher before exporting the merged countries as Shapefile.

The QGIS Plugin can add simple scripts for simple mouse over and mouse click effects, but I wanted to use jQuery for much complex shadow effect. The task was becoming much complex when I saw the HTML file generated by the QGIS. The screen shot is below…

The href attribute is correctly generated but it has further attribute of onMouseOver and what I needed was a title attribute. Another problem with jQuery map that I wanted to make was that jQuery accepted single quotes (‘) whereas this html file had double quotes (“) only. So this is handled very simply by replace function of Texpad. The final html file looked something like this:-

I added the jQuery Script and other details and replaced various parameters for clickable HTML Image map with shadow and highlight.

Now came the final major requirement and that was replacing the simple file generated by QGIS with a beautiful looking map prepared with Illustrator and MAPublisher. So for this I measured the map pixels and calculated the DPI (dots per inch) required to export a jpg file from the .ai Illustrator file. Then to adjust it accurately I used Adobe Photoshop and placed the newly created map image accurately on top of the single color map produced with QGIS. You can also use layer opacity function to review if the QGIS generated map and actual full color map matched accurately. Here it is important to note that the co-ordinates generated and placed in the coords attribute have the origin at the left top corner. So even if you truncate the image on the right or bottom, it will not effect the areas. Therefore it is relatively easy to match the image with QGIS generated image.

So with this the Image map with jQuery was completed and you can review it once again here Clickable HTML Image Map with jQuery.

If you need more information on how to make a map like this, you can surely contact me on promapper@gmail.com. And please do give your reviews and comments on the above work flow to make such a clickable map.

Thanks for reading.

Powerpoint Maps

The US Army Brigadier General H. R. McMaster may be averse to Powerpoint presentations as he famously declared “powerpoint makes us stupid”, but the larger part of corporate world, educationists, bankers, student community, graphic artists and so on have to use Presentations for whole gamut of reasons. The idea of a crisp presentation to bring home crux issues is central to its popularity and that is not going to slacken even in the next century. Rather the presentations of today have tons of multimedia components; videos, images, maps, sounds, linked content.

Now all such diverse content needs to be managed and amalgamated in a free flowing, themed presentation which becomes a tough task for graphics designers and content managers and especially so when the budgets are shrinking daily. The graphics designers in any company can handle most of the tasks easily except developing thematic maps. But the general thinking is that you just browse the net with Google Image search and choose a suitable image map for the presentation. But be warned here that many of the images though freely downloadable do have copyright and a company would not like to get into legal hassles for a map image. So you end up paying hundreds of dollars for few map images which are designed to match the corporate theme of the powerpoint.

Blank Alabama County Map Slide

Here the freeform editable powerpoint maps come to your rescue. These are made with editable vector lines, polygons, points and text; all of it editable in powerpoint software like the open office or MS Powerpoint. These freeforms are so easy to manipulate that even a five year old can learn within minutes. However there is one catch, making these freeforms do take a lot of time if done manually. Though one can use geographic data like Esri Shape files in GIS software like QGIS, ArcGIS or even Illustrator with Avenza MAPublisher plugin to generate these files. The latest Powerpoint also has the facility to import SVG vector files. But all maps are not available as SVG vector and handling geospatial data in GIS programs to make editable maps can be tough for the un-initiated in the geospatial field. So it will be good idea to download such editable powerpoint maps from many of the websites. There are many offering such maps for $49.95 per map or more and many websites give access to such maps with subscriptions ranging in hundreds of dollars, which means you do not own the content.

County Names Pasted from Names Slide

But I say why pay $49.95 for one map, why not free. Well these need expensive software and time but do they take so much time to justify such a price for one stock map. Well not at all, these maps do not take so much time that each download should cost $49.95. Now I have one map fully editable absolutely free for you to try. It is a map of Alabama Counties made fully by editable freeforms. You can download it from Gumroad link Alabama Editable Free PPT. The freeform county shapes can be easily edited for color, transparency and they can be easily zoomed without any pixelization. So you can show just one county map and in the color combination that you choose in powerpoint.

Shelby County Highlighted

Or you can show the whole state of Alabama with one county Shelby only. There is no limit to creativity with freeform powerpoint maps. All of this you can try at no cost, with a fabulous free Alabama vector editable counties map PPT which you can download from Alabama Editable Free PPT and you don’t have to share your email with me. I don’t want to spam you with unessential mails or product information. I believe if something is essential then you sure will find the right place and right person to do your job.

I also have a great bundle of all the 50 US States Counties Freeform presentations, yes all the fifty states which have the following freeform editable slides:-

• Blank map of each state
• All state counties editable
• All state county names
• All state counties and names

And these slides are made to such accuracy that you select and copy any county freeform, paste it into the full state, then select and paste the name of the county. I give you hundred percent guarantee that it will position at the correct geographical location. You have Alabama free presentation map, just try it and then only order the full bundle.

Now such functionality, such accuracy and not a dozen, not two dozen but all the fifty states with editable vector Counties, this should cost you at least five hundred dollars. If you purchase each state county map at $49.95 from the presentation map companies, it will cost you more than two thousand dollars, yes $2000.

But is it justified, no, it is not. These websites are just fleecing you and you are paying too much money. Now what is the worth of this content, well it sure is in hundreds of dollars, yes, it is but never thousands of dollars. So I ask you a fair price, absolutely justified price of just $249.95 for fifty, yes all the fifty presentations of the States of USA. You can pay and download from Gumroad link 50 US States County PPT Maps Presentation

If you want to purchase single State Map PPTs, just send me a mail and for just $15 per presentation file, you can have a mini-GIS with you to make that impact in your sales presentation or board meeting.

I would love your comments, please do let me know about the free Alabama PPT map as to how to improve it. How to add more value to it and if you want some additional layers, yes bang on target, absolutely positioned layer, just punch in your comments or write to me on mohansanjay@gmail.com

Thanks for reading.

USA Editable PPT Map

This project I undertook when a client approached me for developing a USA map with its four census regions, further subdivided into nine regions, you can always find the details of these regions on US Census Regions. I did this project in Adobe Illustrator with Avenza MAPublisher plugin and supplied the maps to the client. There was a full map with four main regions and also a blown up map with both four and nine regions.

Then the client came up with another requirement that all these maps should be imported in Powerpoint presentation, but the rider was that it should not be an image. The requirement got me into a big fix and I tried everything but all the images that you could get into Powerpoint could not be converted to vector. Then while trying with Enhanced Meta Format or EMF file, I learnt that it can be easily converted to vector or freeforms. So I exported all the maps as EMF files and then imported into individual slides. The freeform slides are in the gallery below:-

Blank US Map

State Abbreviations

State Names and State Freeforms

Simple Style Using Click and Fill

A very different fill look

Four Census Regions

State Abbreviations Added on Top

Blown Apart Census Regions

Census Regions Further Divided into 9 Sub Regions

Then I realised that there was no requirement to do the maps in Illustrator as once the basic USA States map is imported as freeform vector all the states are individual freeform vectors which can be manipulated separately. The ease with which these freeforms can be styled can be utilised as an inexpensive Geospatial workflow to create thematic maps. You can see more of it on my website page Freeform Advantage in Powerpoint.

If you think you could use the USA freeform fully editable map, just review the same on Gumroad USA Freeform 50 States Powerpoint Map.