Interactive vector map of Russia JQVMap. Retrieving geographic data

All tips

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. Examples of this kind of images include photos on real estate websites, sites with maps where you can click on parts of them to go to another page or to trigger a specific action or to turn on 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 entered the dimensions of our picture in it and it now occupies the same space as the 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 have made your first interactive svg map.

Tutorial

Let's create 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, so various elements you can apply CSS rules and control 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.

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:

To get browsers to work with SVG the way we expect, we should remove the tag from the SVG file. width attributes and height (or set them to 100%), and insert a viewBox attribute specially designed for browsers with the coordinate values of the upper left and lower right corners of the image:
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); Diff.

Result:

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 SVG file // Now we do our work, 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 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 map will show the numbers you need. 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 transformations, you can compose a more complex command or look at examples in the forum thread interactive map Add tags

When I need to create maps, the first thing I do is turn to Google Charts or any other specialized library. But sometimes I may need specific features that I can't find there. This is where SVG images turn out to be very valuable (useful).

Recently, I needed to design a report page that could show a map of Italy in which each region would have a different color based on some sample values from the database. Thanks to SVG, this task has become very easy.

Create an SVG Map in Illustrator

First of all, I drew a map of Italy in Adobe Illustrator:

Each region was drawn as separate object, which was placed on its own layer, with the name matching the code used in the database to define the related data (for example, "tos" for Tuscany).

Finally, the map must be saved in SVG format. You should pay attention to set the "CSS property" option in the "Style Elements" column in Illustrator as shown below:

When you open the file you just created, you will see that it contains a set of g tags whose IDs match the names of the levels in Illustrator.

Building our HTML file A

Each element contained in the g tags has a class st0, so that the CSS stroke and fill properties are stroke and fill:

If you try to change these values, the map will change too:

Now we can use this code to create our HTML file with inline SVG, as shown below (the code has been shortened for convenience):

Map Sample .map svg ( height: auto; width: 350px; ) .map g ( fill: #ccc; stroke: #333; stroke-width: 1; )

It can be noticed that style attribute from the svg tag was moved to the head section, and all g elements were initially filled with a light gray color.

The st0 class is no longer used (it can be removed from your code) and has been replaced by the .map g selector. In any case, this was not a required action - you can use any CSS selectors- at your discretion.

The second step is to link our map to the data obtained from external source. IN in this example we will paint regions in colors depending on the population of these regions.

Adding JSON data and JavaScript

We receive data in JSON format, and insert them into the HTML file directly (in real conditions, we, of course, will receive data via Ajax, or a similar method).

Our page will now contain JSON inside our JavaScript file, which will look something like this:

Var regions=[ ( "region_name": "Lombardia", "region_code": "lom", "population": 9794525 ), ( "region_name": "Campania", "region_code": "cam", "population": 5769750 ), // etc ... ];

After that we select the color (in in this case- #0b68aa), and take it as the color of the region with the largest population. The remaining regions will be colored in tones of the main color in proportion to the percentage of population (relative to the maximum population).

The first step is to determine the region with the largest population. This can be done with a few lines of code.

Once we have compiled an array with population size values, we can get from it maximum value using the Math.max method:

Var temp_array= regions.map(function(item) ( return item.population; )); var highest_value = Math.max.apply(Math, temp_array);

$(function() ( for(i=0; i< regions.length; i++) { $("#"+ regions[i].region_code).css({"fill": "rgba(11, 104, 170," + regions[i].population/highest_value + ")"}); } });

And here is the result:

Add interactivity with using CSS and jQuery

The map could be improved by adding a little interactivity. We would like to show the population size when hovering over a region.

First let's add CSS rules for the g:hover selector and the info_panel class to style the info popup block:

Map g:hover ( fill: #fc0 !important; cursor: help; ) .info_panel ( background-color: rgba(255,255,255, .7); padding: .3em; font-size: .8em; font-family: Helvetica, Arial, sans-serif; position: absolute; ) .info_panel::first-line ( font-weight: bold; )

The!important modifier in the g:hover .map selector is needed to override the fill property, otherwise the element's inline CSS rule will be used.

We also need to modify for loop, defined earlier to add a data attribute that will store the value displayed on hover:

For (i = 0; i< regions.length; i++) { $("#"+ regions[i].region_code) .css({"fill": "rgba(11, 104, 170," + regions[i].population/highest_value +")"}).data("region", regions[i]); }

And finally, let's diversify our script by adding some hover effects:

$(".map g").mouseover(function (e) ( var region_data=$(this).data("region"); $("" + region_data.region_name + "
" + "Population: " + region_data.population.toLocaleString("en-UK") + "").appendTo("body"); )).mouseleave(function () ( $(".info_panel").remove( ); )).mousemove(function(e) ( var mouseX = e.pageX, // X coordinates of mouse mouseY = e.pageY; // Y coordinates of mouse $(".info_panel").css(( top: mouseY-50, left: mouseX - ($(".info_panel").width() / 2) )); ));

How it works:

using mouseover we added div element, containing the information to be displayed (region name and population). A div is created whenever the g element is hovered, and is added to the body element of the document;
mouseleave removes this div when the cursor leaves the region;
The last method, mousemove, gets the mouse coordinates and applies them to the generated divs.

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 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 On the issue of cross-browser use of SVG.

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 .

Result:

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 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.

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 conversions, you can create a more complex command or see examples in Add tags

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