Documentation

Installation

Follow these steps to add the JSMaps plugin to your site.

Files

Start by including the jsmaps and maps folders in the root of your project i.e. the same directory as the html file that will hold your map.

Map scripts

Include the following css file in the head section of your page:

<link href="jsmaps/jsmaps.css" rel="stylesheet" type="text/css" />

Jquery is required for this map to work, if jquery is already included in your page you don't need to include it again. If not, include the following script before the closing </body> tag of your page:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Include the following javascript tags before the closing </body> tag of your page (after jQuery):

<script src="jsmaps/jsmaps-libs.js" type="text/javascript"></script>
<script src="jsmaps/jsmaps-panzoom.js" type="text/javascript"></script>
<script src="jsmaps/jsmaps.min.js" type="text/javascript"></script></script>

Include the JSMaps plugin javascript files, make sure to update the map to the one you want to use if it's not the world map:

//Use any map as named in the maps folder e.g. maps/usa.js
<script src="maps/world.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
   $('#world-map').JSMaps({
     map: 'world' //Use any map as named in the maps folder e.g. usa
   });
  });
</script>

Note: jsmaps-panzoom.js is used by the pan/zoom functionality, if you don’t use this option, you don’t have to load this file.

Note: maps/world.js is the location of the map data, it can be any map and the location is up to you, but it must be loaded last.

Map markup

Add the following HTML in the body tag of your page where you want to include the map. Note that the map size will be defined by its parent container size:

<div class="jsmaps-wrapper" id="world-map"></div>

Note: the jsmaps-wrapper class is required, you may choose any id when initiating the map plugin e.g. $('#my-id').JSMaps({...});

Settings

Global properties

Here is a list of the global settings and their default values, you can override these when initiating the plugin, see below the list for an example:

Individual state/region/pin settings

All the state/region/pin settings for the map are located in maps/{mapName}.js and need to be altered in that file:

Events

The map includes custom events which you can trigger externally:

Callbacks

The map will dispatch event callbacks so you can add custom interactivity to your project, see below for the full list.