Create A Map With Clickable Provinces/states Using SVG, HTML/CSS, ImageMap


Answer :

jQuery plugin for decorating image maps (highlights, select areas, tooltips):



http://www.outsharked.com/imagemapster/



Disclosure: I wrote it.



Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.



A couple of options if you need something more advanced:




  • http://jqvmap.com/

  • http://jvectormap.com/

  • http://polymaps.org/



I think it's better to divide my answer to 2 parts:





A-Create everything from scratch (using SVG, JavaScript, and HTML5):




  1. Create a new HTML5 page

  2. Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
    (I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)

  3. Add mouseover and click events to your polygons one by one

    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
        onmouseover="mouseOverHandler(evt)"
        onclick="clickHandler(evt)" />

  4. Add a handler for each event in your JavaScript code and add your desired code to the handler

    function mouseOverHandler(evt) {};
    function clickHandler(evt) {};

  5. Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)

  6. Upload the files to your server





B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):




  1. Create an empty project and choose your map image as your base image when creating the new project

  2. Add a Polygon element (from the Shape menu) for each province

  3. For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
    also change the shape opacity to 0 to make it invisible

  4. Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.





Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch



You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.



Comments

Post a Comment

Popular posts from this blog

Converting A String To Int In Groovy

Answer : Use the toInteger() method to convert a String to an Integer , e.g. int value = "99".toInteger() An alternative, which avoids using a deprecated method (see below) is int value = "66" as Integer If you need to check whether the String can be converted before performing the conversion, use String number = "66" if (number.isInteger()) { int value = number as Integer } Deprecation Update In recent versions of Groovy one of the toInteger() methods has been deprecated. The following is taken from org.codehaus.groovy.runtime.StringGroovyMethods in Groovy 2.4.4 /** * Parse a CharSequence into an Integer * * @param self a CharSequence * @return an Integer * @since 1.8.2 */ public static Integer toInteger(CharSequence self) { return Integer.valueOf(self.toString().trim()); } /** * @deprecated Use the CharSequence version * @see #toInteger(CharSequence) */ @Deprecated public static Integer toInteger(String self) { return toInteg
Read more

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Answer : if anyone pass through here, this is shorter solution: sudo chown -R $USER $HOME/.composer it seems to me the group information is missing in your command sudo chown -R <user> /home/<user>/.composer/cache/repo/https---packagist.org Shoud be sudo chown -R <user>:<group> /home/<user>/.composer/cache/repo/https---packagist.org But to avoid other permission issues, I would rather advise: sudo chown -R <user>:<group> /home/<user>/.composer/cache (you'll need access to other folders in there) and sudo chown <user>:<group> /home/<user>/.composer To make sure your user has permissions enough on the global composer folder. Mind the missing recursion so the user don't own keys created by root. If you need to find out the group: groups <user>
Read more

Android How Can I Convert A String To A Editable

Answer : As you probably found out, Editable is an interface so you cannot call new Editable() . However an Editable is nothing more than a String with Spannables, so use SpannableStringBuilder: Editable editable = new SpannableStringBuilder("Pass a string here"); If you only want to change the Spannables, never the text itself, you can use a basic SpannableString. Use Editable.Factory.getInstance().newEditable(str) From the android documentation: Returns a new SpannedStringBuilder from the specified CharSequence. You can override this to provide a different kind of Spanned.
Read more