Login

HTML5 Locator Map - FAQ

Q: What browsers does the map support?

A: HTML5 Locator 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 Locator Maps responsive?

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

Q: Does the map support pinch-zoom?

A: Yes. If zooming is enabled for the map, pinch-zoom will work as well.

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>
    map_cfg.mapWidth = 0;
    var map = new FlaMap(map_cfg);
    map.drawOnDomReady('container');
    </script>

// Second map, fixed size
    <div id='container2'></div>
    <script>
    map_cfg.mapWidth = 400;
    var map2 = new FlaMap(map_cfg);
    map2.drawOnDomReady('container2');
    </script>

In this example both maps use the same settings.js file and therefore share the same map_cfg variable. You can modify individual settings of each map by modifying map_cfg variable directly, right before creating a map object. 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 multiple setting files. Make a copy of the settings.js file with a new name, for example settings2.js. Open the new file in a text editor and change the name of the variable:

var map_cfg2 = {
    mapWidth        : 540,
    mapHeight        : 410,
    ...

Also, apply all changes to map parameters you want. Save the file and upload it to your website. Make sure you load this new file too in the section:

<head>
    <title>My beautiful map page </title>
<!-- start Fla-shop.com HTML5 Map header section -->
    <link href="map.css" rel="stylesheet">
    <script src="raphael-min.js"></script>
    <script src="settings.js"></script>
    <script src="settings2.js"></script>
    <script src="map.js"></script>
<!-- end HTML5 Map header section -->

</head>

Now, you can create multiple instances of the map using the first settings file, or the second one by choosing between map_cfg and map_cfg2 variables passed to the map object constructor:

// First map, uses map_cfg from settings.js
    <div id='container'></div>
    <script>
    var map = new FlaMap(map_cfg);
    map.drawOnDomReady('container');
    </script>

// Second map, uses map_cfg2 from settings2.js
    <div id='container2'></div>
    <script>
    var map2 = new FlaMap(map_cfg2);
    map2.drawOnDomReady('container2');
    </script>
Last updated on 9th Dec 2014