How to install SimpleMaps with Require.js - HTML5/JavaScript Interactive Map Documentation

RequireJS Installation | Documentation

RequireJS is a modular JavaScript file loader that some sites use to organize and optimize their JavaScript files. If your website (or platform) is using it, rest assured that SimpleMaps will still work. Although SimpleMaps is not AMD aware, you can easily install SimpleMaps as a legacy third-party library.

Here's what you need to do (example):

Choose the map you want to install:
Add your map files: mapdata.js and usmap.js to the RequireJS library folder as defined by baseUrl in the configuration file. In this example, this is the lib directory. Also, add the require.js to this directory.
In the RequireJS app.js file, use shim within the config method to include the mapdata.js and usmap.js files. Here is what our example configuration looks like:

requirejs.config({
      baseUrl: 'lib',
      paths: {
          app: '../app'
      },
      shim: {
        'mapdata': {
          exports: 'simplemaps_usmap_mapdata'
        },
        'usmap': {
          exports: 'simplemaps_usmap'
        }
      }
  });

At the end of the app.js file, load another JavaScript file, app/main.js, which will contain the application logic.

requirejs(['app/main']);

In the main.js file, require both mapdata and usmap:

define(function (require) {
      require('mapdata');    
      require('usmap');
  });

On your webpage, add the following code within the <head>:

 <script data-main="app" src="lib/require.js"></script>

On your webpage, add this snippet where you want the map to appear:

<div id="map"></div>

That's it the map should be working! If you are having trouble, download an example with our USA map.

Download US Example

RequireJS Installation | Documentation

HTML5 Map Documentation v4.4

Customization

Installation

How can I...

Troubleshooting

JavaScript API

Other common FAQs