Skip to main content

SVG Mexico Map

Ceré Rettig
  • Updated

SVG Maps is how we are moving forward with maps in our HTML5 software, which is any iDashboards v10.0 or higher.

iDashboards SVG Mexico Map

MexicoSVG.png

 

On the left grey yet interactive, on the right how the map comes using iDashboards Range Colors in the SVG Drawing Settings and also still interactive.

iDashboards SVG Mexico Map Installation

  • This will need to be downloaded in uploaded into your content directory. For our example, I will be using SVG_Maps directory within the iDashboards content directory.  
  • First, navigate to the Admin area of iDashboards and click on Content.
  • From that point create a new folder to store your SVG maps. Example: SVG_Maps
  • Download the SVG_Maps zip and extract the files.
  • Once you have done that drop the SVG files into the SVG_Maps category. 
  • If you only need the Canada map, please feel free to download just the MEXICO.SVG file.

 SVG_Maps.gif

Select the Maps chart Category and SVG Drawing. Select the SVG Drawing Settings.

In the SVG Image URL, you will need to navigate to the maps directory. Your URL is going to look something like this: content:SVG_Maps/MEXICO.svg replace the country name with our Country parameter so that when we drill down we are navigated to the correct state. Example: content:SVG_Maps/${param:Country}.svg

mceclip4.png

SVG Image URL: content:SVG_Maps/${param:Country}.svg

Cell ID Axis: Country: - This will be the name of your country table 

Cell ID Letter Case: All Upper-Case - This will send your data to the SVG in the correct format the file is expecting. 

Cell ID Space Handling: Replace With Underscore (_) - If you have spaces this setting will match the expected file format. 

After this has been done we can save our chart and start working on the top-level chart. 

Top Level Chart:

For the drill down to work you will need to have a providence column set up on the top-level chart. This can be a two-letter abbreviation or full state name. When you uploaded the files you will see that we created both files to handle the two common formats.

mceclip1.png

In the builder, screen select Drilldown to Chart. Note the name and letter case of your drill down axes. This needs to match the parameter you set up in your base level chart. 

Assigning the providence level chart we created first to this drill-down and save. 

mceclip2.png

After the drill-down has been assigned and the chart is saved we can test our chart.

If you have any issues with counties not showing up please let support know. If you would like a custom state or region map please reach out to your account manager. Providence maps are not provided, however with an svg editor like Adobe Photoshop or Inkscape anyone can create them.

Related articles

Comments

3 comments

Date Votes

Please sign in to leave a comment.