Login

HTML5 Drill-Down Map - FAQ

Q: Drill-down map? What is it?

A: Drill-down map allows you to input all necessary information in two levels of detail. First level – is the map with several large areas (for example, continents in the case of World map). Second level - is the division of the selected area map into several subregions (for example, countries in the case of World map). Each level of detail can be customized separately.

Q: How can I use this interactive map?

A: Drill-down interactive map can be used on the websites with different subjects: corporate websites with large department structure, real-estate websites and so on.

Q: What browsers does the map support?

A: HTML5 Drill-Down Map works in all modern browsers. Basically, if a browser is newer than 3 years old, it has everything to display our maps correctly.

Q: Will it work on mobile devices?

Yes. The map displays on iOS devices including iPhone, iPad, iPod touch, and on Android devices with Android 3.2 or higher.

Q: Are HTML5 Drill-Down Maps responsive?

A: Yes. To make a map responsive, set the mapWidth parameter in the settings.js file to 0 (zero).

Q: How to place multiple maps on the same page?

A: You need to create multiple map objects and configure them individually:

// First map, responsive, 100% scale
    <div id='container'></div>
    <script>
    var map = new FlaMap({pathToJson: "data1/", mapWidth: 0});
    map.drawOnDomReady('container');
    </script>

// Second map, fixed size
    <div id='container2'></div>
    <script>
    var map2 = new FlaMap({pathToJson: "data2/", mapWidth: 500});
    map2.drawOnDomReady('container2');
    </script>

In this example both maps each map has it's own data directory with different setups. You can modify individual settings of each map by modifying any *.cfg.js files in data directories. We set the mapWidth property to zero to make the first map responsive, and make the second map fixed size by assigning a specific value to this property.

Note, that we use different divs to place each map to. The first one goes to container, the second one goes to container2. Also make sure each map object uses its own variable – map and map2 in our case.

You can also use single data directory, but specify different start cfg files:

    <div id='container3'></div>
    <script>
    var map = new FlaMap({pathToJson: "data1/", mapWidth: 0, mainCfg: "main2.cfg.js"});
    map.drawOnDomReady('container3');
    </script>

And for main2.cfg.js specify different config files for each region: cont_eu.cfg.js change to cont_eu2.cfg.js and so on.

Q: Can I run the demo of the map in my local browser?

A: The demo of this map will not work when viewing it locally (except in Firefox) due to communication restrictions between the browser and the desktop‏. Some browsers implement strong security measures to prevent downloaded webpages from accessing arbitrary files on the file system. If you want to test the map in other browsers, you should use XAMPP to run local web server that allows to make Ajax calls. Also you can test the demo on your web server.

Last updated on 17th Jan 2015