Interactive Drill Down World Map -- Clickable Continents/Countries and Clickable Cities

Buy Now $169 100% Money Back Guarantee

Zoomable SVG World Map -- Clickable Continents/Countries and Clickable Cities

This world map template allows you to create your own custom interactive world map with clickable continents and drill down to a larger view of each continent with clickable countries. also to add unlimited number of clickable cities anywhere on main world map level and on the each zoomed continent level then embed it in your website and link each clickable continent/country or city to any webpage.

Features of the Map

  • Total 6 clickable continents and 200+ clickable countries/islands/nations (here is the full list), and 60+ default pins of the largest cities in the world and you can add/remove unlimited number of clicakble cities anywhere on the map.
  • Just single installation to get the world map with its 6 detailed continent views. Note: Antarctica is not included in this map.
  • Activate/deactivate any continent/country or city individually.
  • Each continent/country or city can be linked to any webpage.
  • Each city can be customized individually (shape, size, position, colors, hover content, URL, etc).
  • Easily customized through simple JavaScript files ( NO Javascript knowledge required ).
  • Not a WordPress plugin but can be integrated in WordPress website using HTML Snippets plugin. A step by step installation guide is included in the documentation files.
  • Responsive and fully resizable.
  • SVG (Scalable Vector Graphics) based, so it can be enlarged as much as you want while preserving the quality.
  • Works perfectly on desktop along with mobile devices including Smartphones: iPhone, iPad, Tablets, etc.
  • 100% hand drawn SVG anchor by anchor in Adobe Illustrator for highest quality and best optimization.
    Note: We can customize the map for your own needs (private work).
  • Small file size > Faster load speed > Better for SEO and Google ranking.
  • If you read to this line, then you are eligible for a 10% discount as a reward, click this link to get it.
  • Compatible with all major browsers including Google Chrome, Firefox, IE9+, Safari and Opera.
  • Full documentation is included with a step by step installation instructions.

Customization of the Main World Map

You will be able to customize the parameters of each of the 6 continents and add/remove pins through one simple javascript file, like this:
hover:
e.g 'AFRICA', continent hover content (You can write text and load images).
enable:
true/false to enable/disable this continent.
upColor:
continent color when page loads.
overColor:
continent color when mouse hover.
downColor:
continent color when mouse clicking.
zoom:
yes/no to zoom in to a detailed view of this continent or to link it directly to a webpage.
url:
in case you don't want to zoom it in, you can add a URL here to open a webpage.
target:
open link in the "same window", "new window" or "none".
Trick: Using 'none' is very useful if you have enough content in the hover popup and you don't want to link this continent to other pages.
Note: You can add clickable pins on the main world map and on each zoomed continent view.

Customization of the 2nd zoom level of the map (Countries)

You will be able to customize the parameters of each zoomed continent view through a simple config file for each continent ("africa.js", "asia.js", etc), and you will see the following options in each continent file:

A - General Style

borderColor:
outline color of the countries.
shortName:
color of the shortnames 2 digit code.

B - Parameters of Each Country

hover:
e.g 'GERMANY', country hover content (You can write text and load images).
enable:
true/false to enable/disable this country.
upColor:
country color when page loads.
overColor:
country color when mouse hover.
downColor:
country color when mouse clicking.
url:
link it to any webpage.
target:
open link in the "same window", "new window" or "none".
Trick: Using 'none' is very useful if you have enough content in the hover popup and you don't want to link this country to other pages.

C - Customization of the cities

You can add unlimited number of clickable cities anywhere on each map view and each city has the following parameters:

hover:
the content of the hover popup (You can write text and load images).
shape:
choose the shape of this pin;"circle" or "rectangle".
width:
width (if rectangle).
height:
height (if rectangle).
diameter:
diameter (if circle).
outline:
outline color of the city (can be transparent).
upColor:
color of this city when map loads.
overColor:
color of this city when mouse hover.
downColor:
color of this city when clicked.
url:
link this city to any webpage.
target:
open it in the "same window", "new window" or "none".
Trick: Using 'none' is very useful if you have enough content in the hover popup and you don't want to link this city to other pages).
pos_X:
location of the city on X axis.(Get the value using the included easy to use XY coordinates guide like this)
pos_Y:
location of the city on Y axis.(Get the value using the included easy to use XY coordinates guide like this)
enable:
true/false to enable/disable this pin. in case you want to put inactive pins or temporary disable any of them.

Files included

Once you make the purchase, you will be redirected to the download page to download a compressed zip file containing the map files: HTML, JS, CSS, plus a detailed documentation and a step by step installation guide.

Buy Now $169
  The License and refund policy

FAQ

How to embed this interactive zoomable world map in my website?

The purchased file includes a detailed documentation. But simply upload all the purchased map files including the Javascript and the CSS files to your server, and copy the HTML code from the map.html file and paste it into your website anywhere you want to place the map.

How to insert this map in a WordPress site?

There are 2 simple methods to insert the map in your WordPress site, either using HTML snippet plugin, a step by step guide is included in the downloaded file. Also you can use iframe plugin to embed the map in your wp site.

Is this map resizable?

Yes, the map is responsive and fully resizable and you can adjust the map size as you want simply through the included map-style.css file .

How to add/remove markers on the map?

You can do that by copy/paste of the default code in the included files, then adjust colors, content, links ..etc of each pin.

How to get the X, Y coordinate of pins on the map?

The purchased files includes an interactive guide that helps you to get the accurate coordinates on the map, all what you need to do is to click anywhere on the map guide to get the X, Y coordinate values and use it in your map. You can see this video screencast to see how it works.

Does this map work on iPhone and iPad?

Yes. It works on smartphones: iPhone and iPad, etc

Are you available for freelance work?

Yes, we can make a map customization or create a custom map for you from scratch on a freelance basis.

COPYRIGHT © All rights reserved to HTML5InteractiveMaps.com - Art101