Interactive vector map of Russia JQVMap. Ya.Maps and SVG

Now we will step by step figure out how to make any image on the site interactive, that is, so that all parts of the image can be selected by hovering the mouse and clicking on them. An example of this kind of images can be photos on real estate sites, sites with maps where you can click on parts of them to go to another page or to launch certain action or to enable animation on the site. Let's begin!

STEP 1. Preparing basic HTML markup

Add the code below:

After you add this code, don't be alarmed if you don't see your picture that you connected. Scroll down the page a little, it will be there. The image you included has moved down because of the svg element that was added in front of it. We wrote down the dimensions of our picture in it and it now takes up the same space as original image. Note: In the viewBox attribute of the svg element you need to specify the size of your image that you will make
interactive.

STEP 2. Create SVG elements

For further work you need to install a program that allows you to work with svg graphics Inkscape. After installing the program, feel free to run it. Open your image in this program in the “file” tab and “open...”. In my case, this is an image of a world map. Then click on the button in the lower right corner “View and edit XML“. After clicking on this button, the corresponding widget will appear on the right side of the screen.

After selection, select the appeared line of the part of the image you selected in the xml editor. Then select field d of this element and copy its contents a little lower.

The d field will contain a fairly large volume of coordinates. Copy and paste all of this in your HTML code into the d attribute of the path element.

After adding coordinates, you can refresh the page. You will see that the black projection of the image that you traced earlier has appeared.

STEP 3. Adding styles

In order for this whole thing to be displayed normally, we need to add the following styles to our elements:

Map ( position: relative; text-align: center; ) svg ( position: absolute; top: 0; left: 0; height: 100%; width: 100%; ) path ( opacity: 0.4; fill: orange; cursor: pointer; transition: 0.3s; ) path:hover ( opacity: 0.8; transition: 0.3s; )

Depending on what kind of image you used, you will have a little different type Images. For example, this is how it turned out for me. I drew the outlines of the picture rather crookedly, but for me the main thing was to show what came out in the end) I did not make the entire map interactive and more accurate because it would have taken much more time, but the result would have been the same. The main thing is that you understand how it works and how to implement it.

Note: You can add links to such interactive pictures, connect various scripts to increase overall functionality. You are not limited to your imagination.

All! Now you've made your first interactive svg map.

Tutorial

Let's create an interactive map. Something. What does interactive mean? Well, it needs to interact with the user and the data on the web page it's on. I think this is enough to consider it interactive.

Well, let's take SVG. Why? Yes, because it is easy to work with for a person familiar with HTML. SVG is vector format, based on XML. That is, an SVG image has its own DOM, CSS rules can be applied to various elements and controlled by good old JavaScript.

So, shall we begin?

The most impatient people can immediately watch the demo, but I suggest reading about everything in order.

Preparing the map First, we need the essence. That is, the card itself. If Google doesn’t help, then you can draw it yourself, even though it’s not difficult to do it in Inkscape.

For example, I’ll take a map of one round country (source on Wikimedia Commons)

Since, according to my plan, the areas of the map should not have different colors, then first I cut out the fill and stroke styles from the tags that interest me, but in return I give these elements the class and id I need. For example, class="area" for regions and class="city" for cities.

Next, in the image section we place the painfully familiar:
.area ( stroke: black; stroke-width: 2px; fill: #E9FFE9; ) .city ( stroke: black; stroke-width: 2px; fill: red; )
Here is the CSS I promised in action. In principle, this is already enough. Diff.

Result:

Inserting SVG into HTML This process was covered in sufficient detail in the habratopic On the issue of cross-browser use of SVG.

We will use HTML5 and use the simplest, most humane and standard way:

All browsers that support SVG will “eat” it correctly and display it. And they will even let us work with him. Under one condition: if the web server serves it with the MIME type image/svg+xml. A different MIME type can be very confusing Google Chrome(but not Opera, which firmly knows from the tag that it is following SVG and does not give in to provocations).

Second correct method- insert SVG code directly into HTML. Great from a scripting point of view, but browser support is still worse. By the way, note that SVG inserted into “liberal” HTML still remains “harsh” XML. So quotes and closing tags are required.

Underwater rake But not everything is so simple. You can immediately notice that browsers stubbornly do not want to scale our map, and if it does not fit, then they show scroll bars, like this:

To get browsers to work with SVG the way we expect, we should remove the width and height attributes from the tag in the SVG file (or set them to 100%), and insert a viewBox attribute specially designed for browsers with values for the coordinates of the upper left and lower right image angles:
viewBox="0 0 493 416" Diff .

After this, the situation improves significantly, but Google Chrome gives us another rake: it persistently strives to scale the image in height to the height of the element, and not increase the height according to the width of the tag and the proportions of the image, as other browsers behave.

It's a pity. You'll have to use JavaScript and adjust the element's height manually.
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" "); var aspectRatio = viewBox/viewBox; svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio);

Result:

Diff.

Interacting with SVG We don't need anything to interact with SVG written directly into HTML - it's already part of the DOM of the web page.
It's a little more difficult to access SVGs inserted via: jQuery(window).load(function () ( // We need to wait until all the graphics (and our map too) are loaded, so we use window.onload, var svgobject = document.getElementById("svgmap"); // Find the tag if ("contentDocument" in svgobject) ( // Do we really have something there? var svgdom = jQuery(svgobject.contentDocument); // Access object model
Yes, jQuery works with SVG, but only partially. For example, I noticed that the addClass and removeClass functions, as well as class search (jQuery(".class"), do not work. We have to pervert.

Note that I'm using the window.onload event since we need to wait full load pages, along with all related elements (including our map). However, here too Google Chrome is in a hurry to screw us over: if the script with window.onload is in the html code before the tag, then the code in the handler is executed BEFORE the map is actually loaded. Therefore, the tag must be placed after our map. Sad but true.

Interactivity one: select areas on the map by clicking on the checkbox on the page. For this interaction, we will need checkboxes in each row of the table with areas, as well as matching or similar ids for the table rows and areas on the map.

Here, when you click on a checkbox, we will set or remove the selected class from the corresponding area on the map, and from the line itself. It is not difficult:
$("#areas input").change(function() ( var row = $(this).parent().parent(); var id = row.attr("id"); if (this.checked) ( row.addClass("selected"); $("#"+id, svgdom).myAddClass("selected"); else ( row.removeClass("selected"); $("#"+id, svgdom). myRemoveClass("selected");
Accordingly, you need to add style definitions for this class. I leave it to you to do this yourself, according to your tastes and preferences. Diff.

The second interactivity: we open/show the names on the map by clicking on the checkbox on the page. This interaction is made even easier. We insert a little JavaScript into the page, which adds/removes the class hidden (visibility: hidden;) to all elements associated with names on the map:
$("#titleswitch").change(function () ( var elements = $(svgdom.getElementsByClassName("areatitle")) .add($(svgdom.getElementsByClassName("citytitle"))) .add($(svgdom. getElementsByClassName("titlebox"))) .add($(svgdom.getElementsByClassName("titleline"))); if (this.checked) ( elements.myAddClass("hidden"); ) else ( elements.myRemoveClass("hidden" ); ) ));
Like this .

Interactivity three: highlight areas on the map when you hover over a table row (and vice versa) To do this, you need to hang onhover event handlers like on a table:
// Highlight the region on the map when you hover the mouse over the corresponding one. table row. $("#areas tr").hover(function () ( var id = $(this).attr("id"); $("#"+id, svgdom).myAddClass("highlight"); ), function () ( var id = $(this).attr("id"); $("#"+id, svgdom).myRemoveClass("highlight"); ));
...and to areas on the map:
// Highlight a row in the table when you hover the mouse over the corresponding one. region on the map $(svgdom.getElementsByClassName("area")).hover(function () ( var id = $(this).attr("id"); $("#areas #"+id).addClass(" highlight"); ), function () ( var id = $(this).attr("id"); $("#areas #"+id).removeClass("highlight"); ));
In order for us to see this, we will add the corresponding CSS rules to the page:
tr.highlight, tr:hover, tr:nth-child(even):hover ( background: lightyellow; ) ...and to the SVG map: .highlight, .area:hover ( fill: lightyellow; stroke: black; )
When you hover the mouse over a row of the table (or over an area on the map), the class required for highlighting is added to the corresponding area on the map (on the row of the table). For the above code to work, the areas on the map and the rows in the table must have the same (or similar) id. Diff.

Interactivity Four: Displaying data from a page on a map Well, the banal assignment of classes is probably already boring. Let the map show us some data.

First things first: data. Let’s add a couple of columns to our table, for example “People” and “Money”. Attention: The data is taken from a fool and has nothing to do with the real Amestris. And also radio buttons that we will use to switch what data to show.

Secondly, we need a place on the map where the data will be displayed. Let's add five blocks to the map (one for each region, correlating their ids with the regions) and the corresponding styles in:

Well, the JavaScript code that will take data from table cells and place it in blocks of text:
$("input").change(function () ( var descnum = $(this).parent().prevAll().length+1; $("#areas tbody tr").each(function() ( var id = $(this).attr("id").substring(4); var value = $(this).children(":nth-child("+descnum+")").text(); #text"+id, svgdom).text(value); )); ));
And by switching the radio buttons, the card will show the required numbers. Voila!

Interactivity fifth: tooltips This may be too much, but let it be. For good measure.

For of this interaction Let's take the jQuery.tooltip plugin and bind it to the areas on the map. We will take the text for the hints, of course, from the table:
$(svgdom.getElementsByClassName("area")).tooltip(( bodyHandler: function() ( var id = $(this).attr("id"); var area = $("#areas #"+id+" td :nth-child(2)").text(); var result = $("

").append($("").text(area)); $("#areas #"+id+" td:nth-child(2)").nextAll().each(function())( var pos = $(this).prevAll().length+1; var title = $("#areas thead th:nth-child("+pos+")").text(); var value = $(this).text (); result.append($("

").text(title + ": " + value)); )); return result; ) ));

Diff.

And so on... Of course, the possibilities of interacting with SVG are not limited to this. You can do anything. Shuffle the DOM, change the page and SVG using AJAX requests and much, much more. Go for it. Result

Remaining pitfalls From known issues For now, it can be noted that Google Chrome does not print SVG images. This is either its bug or a bug of WebKit in general. Backward compatibility Almost everything modern browsers support SVG: IE 9+, Opera 8+, Firefox 3+ (Firefox 1.5+ has partial support), Chrome all versions, Safari 3.2+ (more complete list)

But alas, the bright future still won’t come at all and we still have to think about supporting old browsers.

The standard and easiest way if the SVG is just an image: insert the replacement content (rendered in PNG image and a paragraph of text) inside the tag.

Sorry, you are using outdated version browser that does not support the interactive map.

If the browser does not support SVG, a PNG image and text will be shown notifying users that their browser is out of date. No interactivity. However, it may not be really needed. True, there is one drawback - as I noticed, modern browsers stubbornly download a replacement png image, despite the fact that they still won’t display it.

Those interested can take advantage of SVG support detection using Modernizr and create something more complex in JavaScript.

For more complex cases, numerous solutions using Flash, VML or Canvas (or all of them) can help you. The list can be found here: HTML5 Crossbrowser Polyfills, but the solutions that I tried, unfortunately, did not help me. Perhaps because the SVG with CSS that I sketched on my knee turned out to be too tough for them.

Converting SVG to PNG There are many places online where you can convert an SVG image to something else. I will suggest using the rsvg-convert command from the librsvg2-bin package. Something like this:
cat map.svg | rsvg-convert > map.png
However, it can convert to other formats, as well as enlarge/reduce the image, see --help.
For mass conversions, you can create a more complex command or see examples in Add tags

Tutorial

Well, let's take SVG. Why? Yes, because it is easy to work with for a person familiar with HTML. SVG is a vector format based on XML. That is, an SVG image has its own DOM, CSS rules can be applied to various elements and controlled by good old JavaScript.

So, shall we begin?

The most impatient people can immediately watch the demo, but I suggest reading about everything in order.

Preparing the map First, we need the essence. That is, the card itself. If Google doesn’t help, then you can draw it yourself, even though it’s not difficult to do it in Inkscape.

For example, I’ll take a map of one round country (source on Wikimedia Commons)

Result:

Inserting SVG into HTML This process was covered in sufficient detail in the habratopic.

We will use HTML5 and use the simplest, most humane and standard way:

All browsers that support SVG will “eat” it correctly and display it. And they will even let us work with him. Under one condition: if the web server serves it with the MIME type image/svg+xml. Another MIME type can greatly confuse Google Chrome (but not Opera, which firmly knows from the tag that it goes after SVG and does not give in to provocations).

The second correct method is to insert the SVG code directly into the HTML. Great from a scripting point of view, but browser support is still worse. By the way, note that SVG inserted into “liberal” HTML still remains “harsh” XML. So quotes and closing tags are required.

Underwater rake But not everything is so simple. You can immediately notice that browsers stubbornly do not want to scale our map, and if it does not fit, then they show scroll bars, like this:

Result:

Diff.

Interacting with SVG We don't need anything to interact with SVG written directly into HTML - it's already part of the DOM of the web page.
jQuery(window).load(function () ( // We need to wait until all the graphics (and our map too) are loaded, so we use window.onload, var svgobject = document.getElementById("svgmap"); // Find the tag if ("contentDocument" in svgobject) ( // Do we really have something there? var svgdom = jQuery(svgobject.contentDocument); // Access the SVG file's object model // Now do our job, for example: jQuery ("#figure1", svgdom).attr("fill", "red"); // Find the tag with id="figure1" in the SVG DOM and fill it with red ) ));
Yes, jQuery works with SVG, but only partially. For example, I noticed that the addClass and removeClass functions, as well as class search (jQuery(".class"), do not work. We have to pervert.

Note that I'm using the window.onload event because we need to wait for the page to fully load, along with all associated elements (including our map). However, here too Google Chrome is in a hurry to screw us over: if the script with window.onload is in the html code before the tag, then the code in the handler is executed BEFORE the map is actually loaded. Therefore, the tag must be placed after our map. Sad but true.

Interactivity Four: Displaying data from a page on a map Well, the banal assignment of classes is probably already boring. Let the map show us some data.

Secondly, we need a place on the map where the data will be displayed. Let's add five blocks to the map (one for each region, correlating their ids with the regions) and the corresponding styles in:

Interactivity fifth: tooltips This may be too much, but let it be. For good measure.

For this interaction, let's take the jQuery.tooltip plugin and bind it to areas on the map. We will take the text for the hints, of course, from the table:
$(svgdom.getElementsByClassName("area")).tooltip(( bodyHandler: function() ( var id = $(this).attr("id"); var area = $("#areas #"+id+" td :nth-child(2)").text(); var result = $("

").text(title + ": " + value)); )); return result; ) ));

Diff.

Remaining pitfalls Among the known problems so far, it can be noted that Google Chrome does not print SVG images. This is either its bug or a WebKit bug in general. Backward compatibility Almost all modern browsers support SVG: IE 9+, Opera 8+, Firefox 3+ (Firefox 1.5+ has partial support), Chrome all versions, Safari 3.2+ (more complete list )

But alas, the bright future still won’t come at all and we still have to think about supporting old browsers.

The standard and easiest way, if the SVG is just an image: insert the replacement content (a PNG-rendered image and a paragraph of text) inside the tag.

Unfortunately, you are using an outdated version of the browser that does not support the interactive map.

Those interested can take advantage of SVG support detection using Modernizr and create something more complex in JavaScript.

Converting SVG to PNG There are many places online where you can convert an SVG image to something else. I will suggest using the rsvg-convert command from the librsvg2-bin package. Something like this:
cat map.svg | rsvg-convert > map.png
However, it can convert to other formats, as well as enlarge/reduce the image, see --help.
For mass transformations, you can compose a more complex command or look at examples in the forum thread interactive map Add tags

I want to be able to draw on the map myself using SVG.