Find all products for your country

How to Install HTML5 Maps on a Website

All of our products are divided into two major categories. There are WordPress plugins with HTML5 maps and HTML5 maps for non-WordPress sites. If your website uses WP, then you do not need to code anything yourself, and installation and configuration of the map are done similarly to any other WP plugins.
If your site does not use WordPress, and is a plain HTML website, or if it uses Joomla, Drupal or other CMS except WordPress, then you need to read this guide.

Map Insertion with settings.js

In this example, we use the demo version of the HTML5 US map. To proceed, you need to be able to upload files to the server, for example, via FTP. Also, you need to be able to insert the code to the page. Simply include the necessary scripts and styles in your code, and create a new map object as follows:
<div id='map-container'></div>
  <link href="map.css" rel="stylesheet">
  <script src="raphael.min.js"></script>
  <script src="settings.js"></script>
  <script src="map.js"></script>
  <script>
    var map = new FlaMap(map_cfg);
    map.drawOnDomReady('map-container');
  </script>
	
Here, we create an empty DIV container. The map object we create in the last (embedded) script renders the map directly into this div by calling drawOnDomReady(). A JavaScript settings object must be passed (in JSON), called settings.js above. It is passed into the draw function through a variable within that file called map_cfg. This object contains the basic map data, such as state names, and their associated codes. The file is included in the download. If you want, you can change these settings to alter the appearance of the map. All available settings can be found here [API reference].

Creating a Map with Embedded Settings

If you would like to quickly create a map and insert it into a page, it is possible to do so even without the settings.js file. The map constructor can accept settings parameters, so these can be supplied when a new map object is created. The following example illustrates this feature:
<!-- start Fla-shop.com HTML5 Map -->
  <div id='map-container'></div>
  <link href="map.css" rel="stylesheet">
  <script src="raphael.min.js"></script>
  <script src="map.js"></script>
  <script>
   var map = new FlaMap(
   {
    "mapWidth": "100%",
    "shadowAllow": false,
   //
   // many other settings are available, please see the documentation
   //
    "map_data": {
     "st1": {
     "id": 1,
     "name": "Alabama",
     "shortname": "AL",
     "link": "//www.fla-shop.com/howto/insert-map-on-website/",
     "comment": "Some content in tooltip",
     "color": "#ff5959",
     "color_over": "#f00001"
    },
   // 
   // region ID's st2-st50 are omitted here for brevity
   // 
    "st51": {
     "id": 51,
     "name": "Wyoming",
     "shortname": "WY",
     "link": "",
     "comment": "",
     "color": "#7798BA",
     "color_over": "#366CA3"
    }
    }
   });
  map.drawOnDomReady('map-container');
  </script>
<!-- end HTML5 Map -->
	
The map is created in the same way as in the first example. Basic scripts and styles are included. But instead of passing in map_cfg, the settings are defined explicitly. The maximum width is set via mapWidth, and shadowing is turned off for selected areas, with shadowAllow. The region data is then defined, under map_data. The first region (st1), is given the name of Alabama, the abbreviation, and color settings. This continues through the region 51. The directive map.drawOnDomReady is then called. We pass the map container to it to actually display the map.
Many additional settings are available, so we encourage you to have a look at the API documentation to learn more about possibilities the map gives to you.


Privacy policy   |   Terms of Use

Home  |  Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Support  |  Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for Websites
Follow us Follow us on Twitter Follow us on Facebook