Content Attributes
The creation of interactive maps is undoubtedly a typical feature of many websites, starting from ad sites (which show ads by geographical area, for example) and ending with those that generally catalog products or services by area. A clickable map with attached actions or links, after all, is undoubtedly very useful for users: in this article, we will see the various ways to create it, with some further precautions to be taken in case the maps need to be responsive (in which case, as we will see, some reasoning on the most suitable viewport will be needed, in order to make the distinct areas sufficiently distant from each other).
The interactivity of a digital geographic map can be understood in several ways: for the purposes of this article we will talk about what is expressed especially on the front-end of the site, and which allows you to create colored/overlapping regions, make them clickable or activate particular events on them (on mouseover, trivially). Specifically, I will refer to interactive geographical maps, but with a few more steps it would be possible to extend the discussion, for example, to maps of buildings or places.
In this case, then, there is the obligation to premise that there are no trivial solutions to the problem, in the sense that such a job to be truly noteworthy should, in my humble opinion, be carried out by a professional.
How to create an interactive map on our website?
Use Google Maps
The first possibility to consider is to make use of Google Maps, which certainly has a very high update rate of the map contents, in addition to the support of a very large community of developers and users. Creating an interactive map with Google Maps will almost certainly require you to make use of the well-known (and highly developed) API available for Javascript as for Android and iOS. On Github and Stackoverflow there are many live and working examples for everything we need, although some features are paid.
- Pros: easy to start, well-structured code, far too many options available
- Cons: in many circumstances paid service, highlighting or coloring areas such as regions and provinces may not be trivial
Use Image Mapster
It is a jQuery library that allows you to activate, create and edit maps without resorting to the old Flash (which in this post, for brevity, I will avoid taking into consideration). The latest version is from 2013 so we are not talking about a very updated library, which may not work for some newer browser features. However, it remains one of the main reference points in the sector.
- Pros: consolidated library, single file to be included, also allows you to create generic non-geographical maps
- Cons: not updated (latest version of 2013), it must be programmed in jQuery + HTML
Use jVectorMap
This is the top library, probably the best one in circulation today, to manage maps of all kinds in detail: it is possible to freely exploit the library itself, which has both the API and the actual map. It allows you to associate events with clicks and mouse-over and, in short, it is the recommended choice for those who need to create an interactive map.
- Pros: very updated and functional library
- Cons: not too simple to use, it must be programmed in jQuery + HTML
Use WordPress Vector Maps
Enrico Urbinati has developed a plugin solution for WordPress (free) that is based on jVectorMap, with the possibility of including maps by paying a small contribution from the official website. Arrived at version 5.0 it is the ideal solution for creating interactive maps in WP, with the possibility of highlighting both areas and points and with fair interactivity. In practice, the plugin and the base maps are free, the specialized ones or the ones divided in particular cost about 10 euros each and can be bought from the official website of the project.
- Pros: updated and functional library, user-friendly, no need to know how to manipulate jQuery + HTML
- Cons: none
Use: MapBox
Mapbox is a solution to create interactive maps certainly to consider: it is very user-friendly and does not require programming skills, apparently. The basic version (up to 50,000 map views) is free, while the others are paid according to the use you make of it. The free version supports up to 600 geolocation requests per minute with 1 GB of available space, so it is a candidate to be more suitable for more advanced applications of the front-end of a site.
- Pros: easy to start, well-structured code, many options available, also ideal for non-programmers
- Cons: none
How to create interactive maps?
On this we should discuss separately, so you will forgive if I brutally simplify the problem: if the responsive is not supported – and this applies to older libraries, at least in theory: but in general an interactive map is not suitable for occupying only a part screen, and it should at least be able to put itself in the foreground to facilitate user interaction – it is necessary to have it at least on two levels.
These levels are:
- ( markup ) one at the level of ( div ) container of the map, which should be put on a single line (the col-MD-12 class of Bootstrap, for example) to ensure maximum expansion, with the foresight not to exceed the classics 300px wide;
- ( script ) a second at Javascript (or jQuery) level, in the sense that the viewport must be calibrated to 10 mm (the finger size in terms of minimal touch), according to Android even 7 mm: this serves to prevent two links they can be pressed unintentionally, or that you cannot press on the desired link. For more information on this delicate problem, I suggest Google’s guide on the subject and to do numerous tests to make sure that the maps can work properly even on the smallest screens.