Code

Discussion on Interactive SVG USA Map

Discussion on Interactive SVG USA Map

By
Cart 1,173 sales

LGLab supports this item

Supported

This author's response time can be up to 1 business day.

205 comments found.

I didn’t get a response back from my last email, so here it is on this thread. Hope you’ll respond soon on this:

“Yes, there is a ‘help file’ folder, but just a bunch of confusing files jumbled up in there.”

Hi,

Sorry I was busy, what is confusing? Just open the index.html in your browser.

Thanks, Greg

can i edit the map to make my own form?

Hi, What do you mean by that? Adding a form in the textfield?

Thanks, Greg

Another question. Can I import data from an Excel spreadsheet once it’s plugged in to my site? I don’t want to do a ton of manual C&P.

Hi,

No you can’t load an Excel file instead of an xml file, you would need to look into converting your excel file to xml first, with the same structure as the default xml file that comes with the map.

Thanks, Greg

I really like the side text version. We are working on project that requires data display for each state. I was wondering if it is possible onclick, to display pie charts and bar graphs within the side text. We have a Google Chart plug-in our site, and would like to integrate that.

Hi,

This is probably possible as you can populate the text area with html, but it would require additional javascript work to execute the google chart code once the text area is populated with the relevant chart markup so you would need javascript knowledge as i am not available for customizations at this time.

Thanks, Greg

Does anyone have a list of major cities and what the X and Y values are for them for this map?

This should be easy, but I cannot get the Navigate to URL thing to work. I have specified a URL for each state, and have ‘useText’ set to false. How do I get it to navigate to the URL when a state is clicked.

Not sure why the original code isn’t working, but I was able to edit the init.js file to get it to work.

Hi,

The original should work, send me an email and I’ll have a look.

Thanks, Greg

Hello LGLabs,
I’m using your Interactive SVG Map. It loaded fine and worked fine – even after some customization of the variables like color. However, when I modified the CDATA in the XML (only the html portions) it caused 2 things to happen:

  1. Wyoming displays as blank/white in it’s initial state
  2. The state hover names and corresponding text (when clicked) don’t match any more. (e.g., I hover over Nevada on the map but the info is for New Hampshire).

I sent and email with the link to my version – can you help?
Thanks You! Brian

Hi Brian,

Just replied to your email.

Thanks, Greg

What file am I going to to change it to a sidebar view?

D)Text option – top

The simple version of the map navigates to an external URL when a state is clicked, you can however chose to display some text either to the right as a sidebar, or as a text area below the map. To do so set the useText parameter to true. the default position of the text will be to the right, if you wish to have it below the map, also set the useTextAtBottom parameter to true. You can then adjust the textAreaWidth, textAreaHeight and textAreaPadding parameters accordingly. Note that for the sidetext only the textAreaWidth will be considered as the height will be calculated depending on the height of the map, and vice versa if the text is at the bottom of the map, it will have the height set for the textAreaHeight parameter and its width will always be the width of the map:

Hi,

You can adjust the options in the xml file located in the xml folder.

Thanks, Greg

Hello,

Just bought the map and it loads up fine in Firefox. However, I’m getting the following error in the latest version of Chrome. Can you help me fix it?

XMLHttpRequest cannot load file:///Users/*/Downloads/HTML5_USA_Map/map/xml/usaMapSettings.xml. Received an invalid response. Origin ‘null’ is therefore not allowed access.

Hi,

This would happen locally but it will work fine once online, so create your map locally using FF and then upload.

Thanks, Greg

Great plugin, thanks. Is there a way to change abbreviation text color for individual states?

Hi,

No sorry not currently, I unfortunately don’t have any free time at the moment, but if you have some basic javascript knowledge, you could try and replicate the current system for the states, e.g. add a new parameter in the xml file for each state such as ‘abbrColor’ and locate where these parameters are stored/applied in the init.js.

Thanks, Greg

Hello, we’re considering buying your map plugin, but we would like to know if it’s possible to slightly change the locations of Alaska and Hawaii states – we’d like to position Alaska in the top left from the mainland, and Hawaii somewhere to the left of the mainland. How hard would it be to modify the map? Thanks!

Hi,

No sorry not currently.

Thanks, Greg

Can I add this to a wordpress page? Do you make a plug in version of this?

Hi,

This is not a wordpress plugin but you can load the map in a wp theme using an iframe.

Thanks, Greg

I’m setting the latest version up for a client and I can’t get the click feature to work in Chrome at all. Your simple version demo doesn’t work in Chrome for me either – clicking on the state has no effect.

I’m using Chrome Version 36.0.1985.125 m on Windows 8.1.

Hi,

I’ve just tested on the exact same setup and have no issues. Can you try and open the console (F12 then select console), reload the page and try again and let me know if you see any errors.

Thanks, Greg

Also the map’s CSS is interfering with our site’s CSS and making our fonts smaller on the page. Is there a way to avoid that? Thanks.

Hi,

I replied to your email.

Thanks, Greg

Hi, The caption box for the marker for Baltimore (grey box that pops up then you go over a marker) is showing up partly behind an image we have in the right sidebar of our website. Is there a way to change the z index property for the captions (stacking order on the page)? Thanks.

Hi,

I replied to your email.

Thanks, Greg

How can I open this in a target=”_paretn” I have the map in an iframe and is open the link in the same page I would like to open in a parent window..

anybody?

Thanks

Hi,

I replied to your email.

Thanks, Greg

Hi,

Do you have a wordpress version? or can I use it on wordpress?

Thanks

Hi,

No I don’t have a WP version but you can use this one and load it in your theme using an iframe.

Thanks, Greg

Is there a way to select multiple states like select NC, NY and TN, they would all stay orange? Is there a way to pass which states where select to a function or javascript?

Everything is possible, but I’m not currently available for freelance work and the map doesn’t support this functionality by default. I suggested you try and contact an author from codecanyon who also sell maps and see if they can customize it for you.

Thanks, Greg

Awesome script. Very easy to implement. Great job!

Is it possible to turn off the hyperlinks (urls) for each state, but leave the default text viewable the whole time?

I deleted the CDATA references for each state, but the clicking the state makes the default text disappear.

Sent you a message thru your profile. Please assist if you’re able to today. I plan to demo the map to my client today :D

Hello, please respond. Thank you.

Replied.

Hi Greg. I’m considering purchasing this. Can you tell me how easy it is to change the locations on the map? I’m keen to something very similar to this SVG, but for Asia.

Hi,

It’s not very easy, I’m pretty sure you should be able to find an existing map of Asia instead.

Thanks, Greg

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey