For any feature requests, bug reports and more, please visit our forums.


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


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.


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="jsmaps/jsmaps.css" rel="stylesheet" type="text/css" />
<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 src="maps/world.js" type="text/javascript"></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, so if you have a responsive website, include the following markup directly inside a responsive container.

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

Note: the jsmaps-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

"autoPositionAbbreviations": false
Position abbreviations automatically using Raphael getBBox. If true textX/textY state properties become offset values

"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

"displayViewBox": false
If true, displays current map position and zoom level, this is handy to figure out initialZoom/initialMapX/initialMapY

"enablePanZoom": false
Enable pan/zoom functionality

"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 displayViewBox and using the pan/zoom functionality, set the map to your desired initial position and zoom level, the initialMapX/initialMapY/Zoom values will be displayed in the top right corner of the map

"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 displayViewBox and using the pan/zoom functionality, set the map to your desired initial position and zoom level, the initialMapX/initialMapY/Zoom values will be displayed in the top right corner of the map

"retainPanZoomOnRedraw": true
If true, the map position and zoom level will be retained when using the reDraw event

"displayPreloader": true
Whether to display a preloader while the map renders.

"preloaderText": "Loading map..."
Text to display in the preloader, set this to an empty string if you want to use a css spinner instead.

"disableTooltip": false
Disable tooltip

"groups": []
List of groups of state/regions, visit our forum tutorial for more information.

"selectElement": true
Display a select element above the map, including all regions/states, groups and pins.

"selectElementDevices": ['mobile']
Filter which device to display the select element on: ['mobile', 'tablet', 'desktop']

"selectElementDefaultText": "Please select"
Text value of the default select option

Tip: See how to override global settings in our forum


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)


Individual pin settings

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

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

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

"xPos": 594
Pin X position (see global displayMousePosition to figure out this value)

"yPos": 592
Pin Y position (see global displayMousePosition to figure out this value)

"color": "#59798e"
Default pin background color

"hoverColor": "#E32F02"
Pin hover background color

"selectedColor": "#feb41c"
Pin selected background color

"url": ""
URL to redirect to when pin is clicked (if global stateClickAction = url)

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

Tip: See how to add pins in our forum



The map includes custom events which you can trigger externally:

Trigger a map redraw, see our tutorial for more information

Trigger click/unclick events on state/regions or groups, see our tutorial for more information

Tip: You can see a usage example in our forum



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

The map is fully rendered and ready for interactions

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

The mouse enters a state, data is passed to the listener which includes all data defined for the state/region in maps/{mapName}.js

The mouse leaves a state, data is passed to the listener which includes all data defined for the state/region in maps/{mapName}.js

Tip: You can see a usage example in our forum


Tutorials and Guides

Please visit our Tutorials and Guides Forum if you need help using the map features.


By | 2017-11-12T11:51:31+00:00 May 21st, 2017|Support|78 Comments

About the Author:


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

    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

      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


    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


      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

    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

      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

    Hi, can I use it in WordPress?

    • June 26, 2017 at 7:35 am


      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

    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

      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

        Great! Thanks very much for the quick fix.

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


    How can we use this in Joomla websites ?

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

    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


      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

        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

          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

    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

    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


      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

        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

          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


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


    • July 31, 2017 at 10:56 am


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


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

    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


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

      • TK September 25, 2017 at 8:35 pm

        Hello! I am also having an issue with groups using the World map, not related to tooltip (perhaps not yet, at least).

        When I add countries to a group, it seems that only the first country of the group gets the color specified for the group and the remainder of the countries are actually transparent (no bg color) – also the hover only works on the first country listed.

        Any ideas?

        Also, sorry to put a rush on this, but I’m really hoping you can help me out in the next day or so, as my project needs to be completed by 9/29 (this Friday).

        Thanks in advance!

        • TK September 25, 2017 at 9:29 pm

          Ok, further update to this – it appears that the other countries listed in the group aren’t transparent after all, they’re likely being moved from their location on the map to somewhere else…(hard to explain, so I’ll include a screenshot too)

          As a test, I added USA and Canada to a group and it appears to have removed Canada from on top of the US and placed it somewhere off the bottom left of the map area, and the northernmost parts of Canada are now overlapping South America. Here is a screenshot:

          Thanks again for your help!

        • September 26, 2017 at 6:30 am


          In world.js, each country’s path starts with lowercase letter “m”, change them to uppercase “M” – Not all the m’s in the file, just the one starting the path for each country. I will update the map but I’m not home until the week-end.

          • TK September 26, 2017 at 2:24 pm

            Thanks for the response! I changed all of the path “m”s to “M”s and that got it a little closer, but now it has a different issue with layout that’s equally hard to explain, so here’s a screenshot:

            Let me know if you have any ideas or need any other info from me on this!

            Thanks again!

          • September 30, 2017 at 3:20 pm

            As it turns out I have to refactor the way I handle groups as paths with relative coords just don’t mix well, should be done tomorrow, will let you know.

          • TK September 30, 2017 at 4:52 pm

            Awesome – thank you for all your hard work on this, I really appreciate it!

          • October 1, 2017 at 11:10 am


            Replace the content of your lg-map.min.js with this: – you can minify it if all goes well. Nothing else needs to change, but make sure to revert the world paths in world.js to the original ones. Let me know if OK.

          • TK October 2, 2017 at 3:46 pm

            Hello again – I’ve replaced the script as requested and reverted the paths in the world.js file and the countries included in any groups are still disappearing from the map.

            As a test to ensure that there isn’t something in my environment possibly screwing things up, I reverted all of my modifications back to the default configurations and the issue still occurred.

            Let me know if you need any additional info from me on this. Also, thanks again for your hard work and assistance on these issues!

          • October 2, 2017 at 3:57 pm

            what’s your groups setup?

          • TK October 2, 2017 at 5:10 pm

            Sorry, I should’ve been more explicit in my previous comment about reverting to the defaults – I literally just copy/pasted your example code from this page for my group configuration, so no modifications to that as of yet.

          • October 2, 2017 at 5:33 pm

            Hmm, works for me, maybe a cache issue on your side? try this:

          • TK October 2, 2017 at 6:45 pm

            What you sent to me works, but also I think I might have misunderstood the concepts of “groups”. I was under the impression that I could group any countries I’d like, but I feel that may not be the case.

            With the code that you sent, if I add “India” to either group, it doesn’t pick that up as part of the group when I hover/click on India or the other countries in that group – but interacting with any of the other countries in the group who’s paths intersect works as expected.

            What I was hoping to accomplish was to create “Regions” (Americas, Europe Middle East & Africa, Asia Pacific) containing any countries that have an office location – leaving out any countries that do not have an office (and disabling them).

            So currently I’m disabling all countries by default, then in the onReady I iterate through my list and enable any countries contained in that list. From there, I was hoping to use the group functionality to handle my hover/selected states, and then I’ll tie into the onStateClick functionality to hide/show the content lists below the map accordingly.

            I think as a workaround, I’ll likely end up listening onStateClick for what country was clicked, then change the color of all other countries in that “Region” to the selected color as well, and then utilize the ‘reDraw’ trigger to spoof selecting an entire region.

            Let me know if this makes sense or if you have any other ideas for me!

            I really appreciate your help 🙂

          • TK October 2, 2017 at 7:42 pm

            Actually, one more thing I just noticed – When I change my code back from using the non-minified version of ‘lg-map.js’ (taken from your GitHub repo from ‘Master’ earlier last week) to using the minified version of ‘lg-map.min.js’ (which I replaced with the version you just recently sent me), I noticed that the hover color seems to stop working. Even when I use the non-minified version of ‘lg-map.js’ from the ‘refactor/groups’ branch, the hover color seems to not work.

            Any ideas on that?

            For now, I’ll just use the non-minified version from master.


          • October 2, 2017 at 9:17 pm

            Do you have a link to the map where I can observe these issues?

          • TK October 3, 2017 at 6:48 pm

            Hey, sorry for the delay – I’m in crunch time now on this project. Everything is hosted internally here, so it’d take me a little bit to set up some sort of test harness for you to be able to access. I might have time tonight to do that; otherwise, it might have to wait until this weekend.

            Fortunately, the version that I have (non-minified) will work fine for the time being, but I definitely want to help you out if I can.

            Otherwise, if you have any other ideas or want any other info from me in the meantime, please let me know! 🙂

          • Hawke October 3, 2017 at 7:10 pm

            Can you share the map’s json file w/ the groups? Might be helpful even if by via email?

          • October 3, 2017 at 7:48 pm

            Not sure what you mean, groups are not defined in json, you set them up with config as described in the “Creating groups” part of the doc – latest js is here until I merge:

          • TK October 5, 2017 at 8:37 pm

            Hello again! I have a couple of additional things for you now that I’ve got my project mostly sorted out.

            1. Triggering the map redraw is a really really slow process and is leading to some bugs on my end when dealing with onStateClick. I’ve done a bunch of optimizing on my end to try and pass only the data that needs updating, but it is still north of 5 seconds per click to redraw the map. I wanted to check to see if you are already aware of any lag issues with this or if you have any ideas as to how I could try to speed things up. I now have a test harness spun up that I could share with you to see what I’m talking about, if you’d like – just let me know!

            2. I’m curious if you would consider upgrading your version of Raphael.js to 2.2.7 — reason being, there is an issue with raphael.js/eve when used in an environment with Require, and according to this (, that _should_ remedy the issues.

            The error is: ‘eve is not defined’, which then prevents Raphael from loading, which then prevents .LGMap() from being a function. I am currently dealing with this issue once we integrated what I’ve built into the CMS (Liferay), so now I’m having to look at other libraries as options instead of this one while that issue is being troubleshot. Any help you can give would be greatly appreciated.

            Thanks again for all of your help! 🙂

          • October 6, 2017 at 7:56 am

            Sent you an email.

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

    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


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

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

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

    • August 15, 2017 at 10:02 am


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

      • Scompa August 15, 2017 at 1:08 pm

        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

          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

    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?

    • August 26, 2017 at 9:54 am

      The “flash” is due to the map reloading the map.js file which would need to happen even if I reload internally. I guess there could be a way to update the settings without reloading the map.js file so I’ll keep that in mind for future releases but it won’t be for a while. With the current code you can make it a bit more elegant by fading out the existing map and using a preloader, which you can hide in the onReady callback.

      The shape and text for a particular state are inside a raphael set, so setting toFront to the text will only put it in front within the set, so at the moment there is no way to do that but will look into improving it. The set is probably not even needed anymore as I ended up creating an invisible layer above each shapes to fix event bubbling issues in IE, will look into it for next update.

      • Matt August 30, 2017 at 4:37 am

        In the mean time, I figured out that you can assign as html class attribute to an SVG element. What I’ve done instead of reloading the map, I’ve put a bunch of pins where I wanted various information with a specific class based on the info. I then just use jQuery to .toggle() that class selector. Saves the trouble of reloading but gives me the ability to show a bunch of different info based on what the user wants.

    • September 3, 2017 at 12:52 pm

      Hi Matt,

      I’ve now added a new reDraw method to the plugin, see the FAQs above for an example.


      • Matt September 6, 2017 at 3:06 pm

        This is rad and really useful… great work! Thanks so much.

  15. Justin August 30, 2017 at 3:56 pm

    Is there a way to change the color of the state/country without manually editing the maps file. I am trying to make it so that when I add the country to an array, it will automatically change the color of the country.

    • August 30, 2017 at 7:02 pm

      Not currently but I will look into adding this functionality in the next few days, I’ll let you know.

    • Matt August 30, 2017 at 7:21 pm

      I ended up writing a server side script to generate the .js file and storing all the state info in the database. Because I’m using the map for a game where ownership can change every turn, this works great. Trick was setting:

      “mapFolder” : “/maps/map.php?”,

      it ends up loading map.php?japan.js but my php script outputs exactly the same as the japan.js would except with dynamic colors, pins, text, etc.

    • September 3, 2017 at 12:51 pm

      I’ve now added a new reDraw method to the plugin, see the FAQs above for an example.

  16. Justin August 31, 2017 at 3:28 pm

    How can I iterate through … I tried accessing as an array[1][1] but that definitely isnt right. Secondly the file is structured how a json file would be no? I want to be able to access each individual country and copy/change their contents with a different file. I am working on a user being able to enter a country name into a form and the text that corresponds with it, save the new info, and use the stateclick function to update the map (This part I have working, but it is reading from a local array I made which stores the newly inputted country names).

    • Matt August 31, 2017 at 5:39 pm

      What info are you trying to extract? You’re probably looking for with each path being the individual state. So[0].text would get you the text. There’s also pins and config depending on what you’re looking for. This should be the same as in the specific map’s .js file, so depending on what you’re looking for there may be a different route to go.

  17. Tsumbedzo September 5, 2017 at 3:12 pm

    Thanks for this good work you put out here.

    How can I deselect country using JavaScript in such a way that hoverColor works again.
    The selected country stay selected until I select different country but I want to deselect selected country if user click on deselect button.


    • September 6, 2017 at 7:00 am

      Not currently but will add in the next few days.

      • Tsumbedzo September 6, 2017 at 7:02 am

        Thanks a lot

    • September 9, 2017 at 9:09 am

      I’ve added this functionality now, see “Can I dynamically click/unclick states with external code?” in the FAQs above.

  18. Felix September 14, 2017 at 1:47 pm

    Hello, is it possible to select multiple states/areas? because now when i click some state the last one was marked “unclicked”

    • September 15, 2017 at 7:36 am

      What would happen in this case? The map currently works by triggering page redirects or text display.

      • Felix September 15, 2017 at 12:01 pm

        In this case the other area should keep clicked until i click again or click “Reset” to uncheck all. The reason i’m asking its because i’d like to check multple areas and then submit only clicked ones to a survey or something like.
        Currently i can trigger clicks using onStateClick and keep areas in some extra variables to handle… Then i think with this option will be perfect.

        • September 17, 2017 at 3:00 pm

          Ok, I will work on this but it won’t be until next week

  19. Rajapriyan September 27, 2017 at 10:42 am

    Hi.How to show my country information from database(Country name filter) using country tooltips in automatically random show tooltip without mouse hover or click event.

    • September 29, 2017 at 7:01 am


      You would need to generate the map config file dynamically. There is no option to randomly show the tooltip at the moment.

Comments are closed.

%d bloggers like this: