Note: Because the map loads its settings dynamically, webkit browsers such as chrome may prevent this request locally thus preventing the map from working. This is only a local issue and the map will work in all browsers once uploaded on your server, if you have this issue use a non-webkit browser to test locally such as Firefox.


All our maps come with a working example in your download, refer to these files for examples.


Start by including the lg-map folder in the root of your project i.e. the same directory as the html file that will hold your map.


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 in the head section of your page:

<script src="" type="text/javascript"></script>

Map scripts

Include the following map files in the head section of your page:

<link href="lg-map/lg-map.css" rel="stylesheet" type="text/css" />
<script src="lg-map/lg-map-libs.js" type="text/javascript"></script>
<script src="lg-map/lg-map-panzoom.js" type="text/javascript"></script>
<script src="lg-map/lg-map.min.js" type="text/javascript"></script>

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

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, so if you have a responsive website, include the following markup directly inside a responsive container.

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

Note: the lg-map-wrapper class is required, you may choose any id to use as a target when initiating the map plugin.


Add the following javascript just before the closing body tag:

  <script type="text/javascript">

    $(function() {

        map: 'world'




Global settings

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:

"mapWidth" : 800
"mapHeight" : 600
These are the original svg dimensions and are there purely so the plugin knows the map ratio when resizing the map. Do not change these values. The map will always fill the space available in the container you put it in, so to change the size of the map, change the size of its container.

"responsive" : true
If true, will trigger a window resize listener

"offColor" : '#ccc'
Color when a state is disabled

"strokeColor" : '#24221f'
Stroke color for states

"offStrokeColor" : '#444'
Stroke color for disabled states

"strokeWidth": 1
Size of te stroke in pixels

"abbreviationColor" : '#f2f2f2'
Text color of state abbreviations

"abbreviationFontSize" : 12
Font size of state abbreviations

"displayAbbreviations" : true
Show/hide abbreviations on states

"displayAbbreviationOnDisabledStates": false
Show/hide abbreviations on disabled states

"stateClickAction" : "text"
Action to take when state is clicked, can be either text, url or none

"textPosition" : "right"
Position of textarea if stateClickAction is set to text, can be either left, right or bottom

"hrefTarget": '_blank'
href target when state is clicked if using urls

"textAreaWidth" : 300
Width of text area if to the right of the map, if bottom textarea will be width of map

"textAreaHeight" : 300
Height of textarea if at bottom, if to the right height will be height of the map

"pinSize" : 10
Size of pins on the map

"displayMousePosition": false
If true, displays current mouse position on screen to help position pins

"enablePanZoom": false
Enable pan/zoom functionality

"mapFolder": "maps/"
Path to the folder containing the map, useful in a CMS where you need to specify an absolute path

"initialZoom": 1
The initial zoom level of the map, default is 1 which is the minimum, any number greater will zoom deeper

"initialMapX": 0
The initial part of the map to be displayed in the center X of the view if initialZoom is greater than 1, to obtain this number, set the displayMousePosition option to true and hover over the map, use the "Map X" number displayed in the top left of the screen. The minimum is -(mapWidth/2) and maximum is mapWidth/2

"initialMapY": 0
The initial part of the map to be displayed in the center Y of the view if initialZoom is greater than 1, to obtain this number, set the displayMousePosition option to true and hover over the map, use the "Map Y" number displayed in the top left of the screen. The minimum is -(mapHeight/2) and maximum is mapHeight/2


Overriding global settings

To override global settings, include the property and your value when initiating the plugin:

  <script type="text/javascript">

    $(function() {

        map: 'world',
        offColor : '#333',
        displayAbbreviations : false,
        enablePanZoom: true


Additionally global setting may be overridden in maps/{mapName}.js config:

  "config": {
    "mapWidth": 920,
    "mapHeight": 450,
    "displayAbbreviations": false,
    "textPosition": "bottom",
    "defaultText": "<h1>World</h1><br /><p>Lorem ipsum</p>",
    "displayMousePosition": false,
    "enablePanZoom": true


Individual state/region settings

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

"enable": true
Set to false if you don't want the state/region to respond to mouse events

"name": "Bangladesh"
Text displayed in tooltip, supports html

"abbreviation": ""
Abbreviation (if available) displayed on the state/region

"textX": 0
Abbreviation X position, set the global displayMousePosition option to true, mouse over the map and use the X value displayed in the top left of the screen

"textY": 0
Abbreviation Y position, set the global displayMousePosition option to true, mouse over the map and use the Y value displayed in the top left of the screen

"color": "#59798e"
Default state/region background color

"hoverColor": "#E32F02"
State/region hover background color

"selectedColor": "#feb41c"
State/region selected background color

"url": ""
URL to redirect to when State/region is clicked (if global stateClickAction = url)

"text": "<h1>Bangladesh</h1><br /><p>Lorem ipsum dolor sit amet.</p>"
Text displayed in textarea when State/region is clicked (if global stateClickAction = text)


Adding pins

An example pin is included in your download, they are set in maps/{mapName}.js with a similar structure to states/regions, you can add more pins by adding more pin objects separated by a comma, as described below:

  "pins": [
      // Text displayed in tooltip
      "name": "Guangzhou",
      // Pin X position (see global displayMousePosition to figure out this value)
      "xPos": 594,
      // Pin Y position (see global displayMousePosition to figure out this value)
      "yPos": 592,
      // Default pin background color
      "color": "#ffc90e",
      // Pin hover background color
      "hoverColor": "#E32F02",
      // Pin selected background color
      "selectedColor": "#feb41c",
      // URL to redirect to when pin is clicked (if global stateClickAction = url)
      "url": "",
      // Text displayed in textarea when pin is clicked (if global stateClickAction = text)
      "text": "<h1>Paris</h1><br /><p>Lorem ipsum dolor sit amet.</p>"


Creating groups

You can create groups of states/regions in the map config either when initiating the map or directly in the maps/{mapName}.js file’s config, here is an example:

Note: The members list for each group must contain the names of the state/region to include in the group as defined in the paths config for each state and is case sensitive.

  <script type="text/javascript">

    $(function() {

        "map": "world",
        "groups": [
            "enable": true,
            "name": "Western Europe",
            "members": ["France", "Spain", "Italy", "United Kingdom"],
            "abbreviation": "",
            "textX": 0,
            "textY": 0,
            "color": "#59798e",
            "hoverColor": "#E32F02",
            "selectedColor": "#feb41c",
            "url": "",
            "text": "<h1>Western Europe</h1><br /><p>Lorem ipsum dolor sit amet.</p>"
            "enable": true,
            "name": "Eastern Europe",
            "members": ["Ukraine", "Belarus", "Lithuania", "Poland"],
            "abbreviation": "",
            "textX": 0,
            "textY": 0,
            "color": "#59798e",
            "hoverColor": "#E32F02",
            "selectedColor": "#feb41c",
            "url": "",
            "text": "<h1>Eastern Europe<</h1><br /><p>Lorem ipsum dolor sit amet.</p>"



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

  <script type="text/javascript">

    $(function() {

        map: 'world',
        onReady: function() {
          // The map is fully rendered and ready for interactions
        onStateClick: function(data) {
          // A state/region has been clicked, data is passed to the listener which includes all data defined for the state/region in maps/{mapName}.js
        onStateOver: function(data) {
          // The mouse enters a state, data is passed to the listener which includes all data defined for the state/region in maps/{mapName}.js
        onStateOut: function(data) {
          // The mouse leaves a state, data is passed to the listener which includes all data defined for the state/region in maps/{mapName}.js




Can I dynamically click states with external code?

Trigger the stateClick event passing the state/region name (name defined in maps/{mapName}.js) as argument:

  $('#world-map').trigger('stateClick', 'France');

Here is an example of how you would create interaction with an external select element:

  <select id="world-map-select">
   <option selected>Choose an option</option>
   <option value="France">France</option>
   <option value="China">China</option>

    map: 'world',
    enablePanZoom: true,
    onReady: function() {
      $('#world-map-select').on('change', function() {
        $('#world-map').trigger('stateClick', this.value);
    onStateClick: function(data) {


Can I use images as pins?

Yes! Use the following configuration for pins:

var pins = [
    //text displayed in tooltip
    name: 'Casino de Monte-Carlo',
    //pin x position
    xPos: 324,
    //pin y position
    yPos: 294,
    //pin source if using an image
    src: '',
    //pin source image width
    srcWidth: 68,
    //pin source image height
    srcHeight: 102,
    //pin width
    pinWidth: 34,
    //pin height
    pinHeight: 51,
    //pin fill color
    color: '#ffc90e',
    //pin hover color
    hoverColor: '#E32F02',
    //pin selected color
    selectedColor: '#feb41c',
    //pin url is stateClickAction = url
    url: '',
    //text displayed in textarea when pin is clicked and stateClickAction = text
    text: '<h1>Casino de Monte-Carlo</h1><br /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>'



How can I insert the map in wordpress?

Our maps are jQuery plugins, but they can be used in wordpress. This website is served by wordpress and we used the following method to create the demo page:

1) Install a wordpress plugin to add head/body script to any page, we use SOGO
2) Upload your working map to any folder on your server for example map-folder
3) Add the map css in the header of your page, update the following code with the correct domain name and map folder:
<link href="" rel="stylesheet" type="text/css" />               
4) Add the map js in the footer of your page, update the following code with the correct domain name and map folder:
<script src="" type="text/javascript">
<script src="" type="text/javascript">
<script src="" type="text/javascript">   
<script type="text/javascript">

    jQuery(function() {

        map: 'world',
        mapFolder: '',
        textPosition: 'bottom',
        textAreaWidth: 250,
        strokeWidth: 0.5

5) Finally add the markup to your page using the wordpress page/post editor:
<div id="world-map" class="lg-map-wrapper"></div>             
By | 2017-08-16T13:49:44+00:00 May 21st, 2017|Support|39 Comments

About the Author:


  1. Sooraj June 7, 2017 at 11:13 am - Reply

    Thanks for the map plugin. It was very helpful during my project development. I am presently stuck in lat long conversion to X,Y coordinate conversion. I have been trying different formula available online, however, none of the gives expected result. May you please help me with the lat long to x,y conversion which works with this map.

    Thanks & Regards,

    • June 7, 2017 at 1:13 pm - Reply

      Looks like there is no perfect algorithm for this. But you can set the displayMousePosition setting on the map to true and it will display the X/Y position of the mouse as you move it, in the top/left corner of the window, so you can position your pins that way.

  2. jack June 9, 2017 at 1:51 pm - Reply


    Is there a way of placing an image as the fill path, when clicked? I’m thinking of building an API that fetches an image of the country and then filling it.


    • June 9, 2017 at 3:37 pm - Reply


      The maps use the raphael.js library and the fill property does support images so yes with a bit of customization in the click handlers in lg-map.js it shouldn’t be too hard, google “raphael js fill image” for some examples.

  3. Bad14 June 22, 2017 at 8:26 pm - Reply

    I’m using Codeigniter 3.x for the project, where have I to place de “maps” folder to use it? because in the controller home the maps is show without problem, but when I change the controller o the method the map isn’t.
    I have already copy the maps folder in the root folder project, in application, views and controller but doesn’t function.


    • June 23, 2017 at 8:43 am - Reply

      I recently added a new mapFolder property in the map global settings, which supports absolute paths so you could have your maps folder anywhere, this is how the demo map on this website is setup. You will need to re-download your map and use the latest lg-map.min.js

  4. Federico June 25, 2017 at 5:10 pm - Reply

    Hi, can I use it in WordPress?

    • June 26, 2017 at 7:35 am - Reply


      I added a How can I insert the map in wordpress? section to the FAQs on this page.

  5. Vincent Dauer June 28, 2017 at 8:45 pm - Reply

    I’m getting errors when setting useText to false. On page load, I get TypeError: Cannot read property ‘length’ of undefined
    Any thoughts on what I’m doing wrong? Thanks.

    • June 29, 2017 at 6:51 am - Reply

      There was a bug which has now been fixed, re-download your map and update your lg-map.min.js

      • Vincent Dauer June 29, 2017 at 3:14 pm - Reply

        Great! Thanks very much for the quick fix.

  6. Madhu July 4, 2017 at 6:46 am - Reply


    How can we use this in Joomla websites ?

  7. marc July 14, 2017 at 12:34 am - Reply

    Good morning,

    I have downloaded js maps 3 times now but can’t possibly find config.js. There is however a europe.js with in the top lines this:

    “config”: {
    “mapWidth”: 800,
    “mapHeight”: 600,
    “displayAbbreviations”: false,
    “defaultText”: “EuropeEurope bla bla”

    I am using the index file for the moment which came with the download.

    All works ok.

    Now, I want to make the maps clickable, include a hyperlink to the relevant webpage so I followed the instructions AND tried all possible combinations.

    Nothing worked, usually after re-load the map didn’t show, the page just stayed blank.

    I added the ‘href’ in the config, exactly as per instructions. Then the page after re.load stays blank too.

    “config”: {
    “mapWidth”: 800,
    “mapHeight”: 600,
    “displayAbbreviations”: false,
    “hrefTarget”: ‘_blank’
    “defaultText”: “EuropeEurope bla bla”

    I also included a link to eurocartridge, as a test

    “enable”: true,
    “name”: “Iceland”,
    “abbreviation”: “”,
    “textX”: 0,
    “textY”: 0,
    “color”: “#cc0099”,
    “hoverColor”: “#E32F02”,
    “selectedColor”: “#feb41c”,
    “url”: “”,
    “text”: “Icelandiii”,
    “path”: “numbers deleted for this post only},

    Again, the link doesn’t work, everything stays blank.

    As soon as I remove the href in the config above and the url all works fine again.

    I tried with an without www. in the link but I think the config is wrong somehow. Am i doing something wrong and if so what?

    thank you,

    Marc from Holland

    • July 14, 2017 at 8:38 am - Reply


      Yes the “config” file for the map is the file called after the country/region name, so in your case europe.js, there is no config.js. First of all I see you have added some “defaultText” in the top config of europe.js, but you cannot use the text option at the same time as the url option. If you want to use urls, set the “useText” property to false in the config of europe.js, then the urls will work. Also note that if you are seeing a blank page locally, it may be your browser stopping the request to the map config, so use the browser Firefox locally. Everything will work in all browsers once uploaded on your server.

      • Marc July 14, 2017 at 3:38 pm - Reply

        Eh …… I still got something to ask!

        1. In the europe.js

        “mapWidth”: 1000,
        “mapHeight”: 760,

        The bigger I set these values, the SMALLER the map.

        2. in the lg-map.css

        I have replaced ALL ‘left’ with ‘right’. And STILL the maps (after having uploaded all of course) an the LEFT in my screen. I even put the map in a table, positioned right in my screen and even that didn’t help. So there no no ‘lefts’ anywhere in the CSS, only ‘right’ and no matter what, the map come sup left ……. (Aarghhh!!!!)

        3. Setting the values to, for example, “mapWidth”: 1000,”mapHeight”: 760, doesnt make the map wider than it is taller. You can set the values however you like but it’s always square. My screen isn’t, none are ……. how to make it fill the screen? Now I am thinking ……………..if I could do that there is no need to position it in the middle/center anymore either …….

        • July 14, 2017 at 3:57 pm - Reply

          You shouldn’t change these values, they are the original map size values. Even if you were to change them, you should keep the original ratio, otherwise it would get distorted. The map is responsive, it will resize to whatever the size of its container is, so if you want the map to be 100% width of the screen, put it in a container that is 100% width and it will fill all the space.

          • Marc July 14, 2017 at 4:49 pm

            Thank you. I have changed it all back and all works fine now. I did set the pixels in the container and that works fine too. However, when set to a large value (for instance 1000 pix) or in percentage (100%) the screen does fill up nicely but half the map is out of sight. You do need to scroll up or down. When set at 80% most of the screen if fille dup (looks ok to me) but you still need to scroll down. What value should I ad in the below CSS to make it RECTANGULAR so more according to what screens are like? I did try height 50% in the CSS and no width, also in pix but it always comes out as a square. I don’t mind at all if Europe is stretched out – so a distorted, yes.

            .container {
            width: 100%;
            margin: 20px auto;
            position: relative

          • July 14, 2017 at 4:59 pm

            Sorry this plugin doesn’t support distorting the original map ratio, so it will never fill up the screen both in width and height without having to scroll. One way you could achieve a similar effect would be to have the map container be 100% height of the screen, so the map always fills up the screen vertically, and center it horizontally, then use some background image or color to fill the empty space either side of the map.

          • Marc July 20, 2017 at 11:30 pm


            Ok, it’s on the right now and the ‘Atlantic’ is just black. It looks quite good and on the mobile it shows well too.

            Thank you for your time.

  8. Marc July 14, 2017 at 12:00 pm - Reply

    Hello again,

    I uploaded all to my server each time so that was not the issue.

    I now put in the Europe.js (and still used your original index.html to test)

    window.LGMaps.maps.europe = {
    “config”: {
    “mapWidth”: 920,
    “mapHeight”: 450,
    “displayAbbreviations”: false,
    “useText” : false,
    “hrefTarget”: ‘_blank’,

    I changed Iceland a bit (as it is the first country in the file) to:

    “paths”: [
    “enable”: true,
    “name”: “Iceland”,
    “abbreviation”: “”,
    “textX”: 0,
    “textY”: 0,
    “color”: “#cc0099”,
    “hoverColor”: “#E32F02”,
    “selectedColor”: “#feb41c”,
    “url”: “”,
    “text”: “Icelandtest”,

    And it works! yes, it WORKS!!!! Boy, I am so happy, I worked until 5 am this morning and only saw blurry scribbles on my screen. It works, yeah ……..great, a big THANK YOU sir!

    I hope this helps others too who may got stuck.

    Have a great day and if I can help you with some compatible ink cartridges let me know.- I can send you some (only do compatibles though – not originals) anywhere in Europe, let me know.


  9. Matt July 21, 2017 at 2:54 am - Reply

    1) I think I may be misunderstanding the expected functionality of initialMapX and initialMapY, I’m trying to offset the map so it starts positioned further “north” than would otherwise be. For example, on the Japan map I would like to display Japan without Hokkaido (I have removed the path from japan.js) but would like to shift the rest of the country upwards. I thought these settings would do it, but doesn’t seem to be adjusting.

    2) Looks like enablePanZoom true and displayMousePosition true may not both be compatiable as only the mouse position is displayed. Is this intended?

    3) Thanks – this is a great project.

    • July 21, 2017 at 10:43 am - Reply


      1) Indeed that is not the functionality of initialMapX/initialMapY – These properties work in conjunction with the pan/zoom, so you could for example set a default zoom and by default the map would be positioned at initialMapX/initialMapY = 0, meaning in the center, so the center of the map would be in the center of the screen, but by adjusting these values you can change the part of the map that shows in the center of the screen, this only works if initialZoom is greater than 1. If initialZoom is 1, then you cannot move the map, svg is drawn using a set of coordinates relative to a registration point (top/left of the canvas), so you can’t move svg path without changing the svg coordinates. You could try and adjust the mapHeight, but I can’t guarantee the result, or I guess you could hack it somehow, put your map in a container with overflow: hidden, and move the map upwards using css negative margin or top.

      2) Correct, displayMousePosition is sort of a developer mode and to get accurate values the map must not be resized hence the resize/pan/zoom functionalities are disabled.

      3) You’re welcome.

      • Matt July 21, 2017 at 8:30 pm - Reply

        Thanks for the reply.

        Is there a non-minified version of lgmap? I figure I can shift the Japan map northward via CSS but it looks like some of that might be done in via js rather than the stylesheets. Was considering making some changes here to shift the map, also considering adding a different line weight for map groups. Inspired 🙂

        Also, I noticed all the TextX TextY for the Japan map are set to 0. Looks like this is what is used to display the location of the abbreviation (if you turn it on). Is this the case for all maps (e.g. I need to manually update) or is this something missing from the Japan map?

        • July 22, 2017 at 9:32 am - Reply

          The whole project is on github, source code for lg-map.js is here:

          Yes the abbreviations have to be added manually if they are not there by default – I tried doing it with JS, adding them in the center of the shape, but that doesn’t actually give consistent results as sometimes the center of the shape is not where you’d want the abbreviation. You can use the displayMousePosition option and use the X/Y values to figure out the position. The reason why I don’t do this myself on all maps, apart from being lazy, is that on some maps some states/regions are too small to hold the letters and I don’t think it looks good if the letters overlap the shape boundaries. But you can add them, make sure to set displayAbbreviations to true or even remove that setting from japan.js config.

  10. Jay July 31, 2017 at 9:21 am - Reply


    Can I place an image along with text in the tooltip?


    • July 31, 2017 at 10:56 am - Reply


      The tooltip supports HTML so you can add whatever you want.


  11. Guilherme August 10, 2017 at 2:39 am - Reply

    Thank you for your post. I have faced a problem relatet to groups. No configuration about it is possible to change. I would like to change the tool tip if possible. I am using the world shape. Is there any problem?

    • August 15, 2017 at 10:18 am - Reply


      I just tried with the example in the documentation and it works as expected, what are you trying to do exactly?

  12. Billy August 10, 2017 at 7:29 pm - Reply

    I have the 5 boroughs map, How do I remove the text stuff on the side of the map when you click on a borough?

    • August 15, 2017 at 10:14 am - Reply


      Just set the useText setting to false, see the Global settings documentation above.

  13. Scompa August 14, 2017 at 8:41 pm - Reply

    Hello! How do I disable the anchor after clicking on the region?

    • August 15, 2017 at 10:02 am - Reply


      Not sure exactly what you mean, please give a precise example.

      • Scompa August 15, 2017 at 1:08 pm - Reply

        Sorry, I guess I was not that precise. When I click on a map region an anchor is triggered, I would like to disable this anchor. When I click on this region I want nothing to happen.

        • August 15, 2017 at 4:58 pm - Reply

          Ok, so just to confirm this is so you can handle the event yourself right? I will add this functionality tomorrow.

          • Scompa August 15, 2017 at 5:17 pm

            That`s okay!

          • August 16, 2017 at 1:55 pm


            I added this functionality now, re-download your map and update the js/lg-map.min.js – Basically I updated the way the action on state clicked is set in the config, there is a new stateClickAction option which can be either text, url or none, so use that option when creating your map with value none. Note that I also updated the way the text area is configured in the options, there is now a new textPosition property, but I don’t think you are using text anyway. I updated the documentation.

          • August 16, 2017 at 2:00 pm

            Btw I started tagging releases on github, latest changes are in 3.1.1

  14. Matt August 18, 2017 at 11:01 pm - Reply

    Appreciate the recent changes! Any chance for some logic to refresh/reload the map gracefully with new settings if LGMap is called again? For instance, I have dynamically set variables for the various map settings and would like to allow the user to change settings (displayAbbreviations, or change the map) to set and then reload the map w/o reloading the whole page. Right now if I try something like $(‘#japan-map’).empty().LGMap({.. works okay but has an ugly flash as it reloads.

    Also, I notice when displaying names on the map sometimes the names flow outside the state boundaries. I’m manually setting the XY, flowing outside is fine and expected, but because of the nature of SVG the order of display sometimes has the text appear underneath another state that was rendered after it. Raphael has a tofront option, would it be possible to bring all text elements tofront() prior to rendering?

Leave A Comment