Build a World Map Visualforce Page Without Writing any Code!

How to build an engaging, interactive world map report with Visualforce, the Google GeoChart API, a single standard report and Salesforce URL hacking without being a Salesforce developer.

The purpose of this user guide is to demonstrate how you can quickly and easily create an interactive world map with Visualforce which leverages Salesforce reports and the Google GeoChart API to deliver a custom page that wouldn’t be achievable via the standard Dashboard functionality.

You don’t need to be a Salesforce developer to achieve this objective. You will learn some HTML, CSS, become more familiar with the Google GeoChart API and Visualforce from reading this guide, and hopefully it will give you some ideas about to leverage these technologies, and other charting tools, further to deliver attractive custom reports.

The tangible end result of all of this is that you will be able to create a stunning ‘world map’ Visualforce page, which can be have different countries or continents clicked on to display Salesforce report data.

Download the full guide here..

Subscribe To The Monthly Newsletter

No Spam. No Rubbish. Just great content from the Salesforce Industry.

You have Successfully Subscribed!

11 thoughts on “Build a World Map Visualforce Page Without Writing any Code!

  1. Is there a way to do the same thing but with just the U.S. and by state? Or how about by state and then by zip code?

  2. Hi Vince,

    Absolutely. As per page 4 of the guide, the link (I don’t think the hyperlink is working in the downloaded guide) is here – https://developers.google.com/chart/interactive/docs/gallery/geochart#Continent_Hierarchy and this shows you the different options you can choose for params 1, 4 and 8.

    Let’s say you want a US map, state by state. You get the state codes from here: https://en.wikipedia.org/wiki/ISO_3166-2:US

    Your template is here:

    function drawVisualization() {var data = new google.visualization.DataTable();

    data.addColumn(‘string’, ‘Country’);
    data.addColumn(‘number’, ‘Value’);
    data.addColumn({type:’string’, role:’tooltip’});var ivalue = new Array();

    data.addRows([[{v:’US-MO’,f:”},0,”]]);
    ivalue[‘US-MO’] = ”;

    var options = {
    backgroundColor: {fill:’#FFFFFF’,stroke:’#FFFFFF’ ,strokeWidth:0 },
    colorAxis: {minValue: 0, maxValue: 0, colors: [‘#6699CC’]},
    legend: ‘none’,
    datalessRegionColor: ‘#f5f5f5’,
    displayMode: ‘regions’,
    enableRegionInteractivity: ‘true’,
    resolution: ‘provinces’,
    sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
    region:’US’,
    keepAspectRatio: true,
    width:600,
    height:400,
    tooltip: {textStyle: {color: ‘#444444′}, trigger:’focus’, isHtml: false}
    };
    var chart = new google.visualization.GeoChart(document.getElementById(‘visualization’));
    chart.draw(data, options);
    }

    As you can see, param 8 is ‘US’ and not ‘world’ as per the example in the guide. Also, ‘US-MO’ is the state for Missouri.

    So what if you wanted a map of Australia instead? Your param 8 will be, as per: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2, will be ‘AU’.

    I hope that helps. If you think another guide with more examples would be helpful, just post a comment.

    Thanks,
    Andy

    1. Tommy Strickland

      Reply

      Hi Andy,

      Thank you for sharing this. I’m brand new to Visualforce and this was an awesome beginner project to have early success wwith.

      However, I’m struggling to get the US state map to work. Every time I try to view it nothing appears. Here is the code I currently have on the page:

      https://www.gstatic.com/charts/loader.js
      https://www.google.com/jsapi
      google.charts.load(’42’, {‘packages’:[‘geochart’]});
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {var data = new google.visualization.DataTable();
      data.addColumn(‘string’, ‘Country’);
      data.addColumn(‘number’, ‘Value’);
      data.addColumn({type:’string’, role:’tooltip’});var ivalue = new Array();
      data.addRows([[{v:’US-MO’,f:”},0,”]]);
      ivalue[‘US-MO’] = ”;
      var options = {
      backgroundColor: {fill:’#FFFFFF’,stroke:’#FFFFFF’ ,strokeWidth:0 },
      colorAxis: {minValue: 0, maxValue: 1, colors: [‘#6699CC’]},
      legend: ‘none’,
      datalessRegionColor: ‘#f5f5f5’,
      displayMode: ‘regions’,
      enableRegionInteractivity: ‘true’,
      resolution: ‘provinces’,
      sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
      region:’US’,
      keepAspectRatio: true,
      width:600,
      height:400,
      tooltip: {textStyle: {color: ‘#444444′}, trigger:’focus’, isHtml: false}
      };
      var chart = new google.visualization.GeoChart(document.getElementById(‘visualization’));
      chart.draw(data, options);
      }
      window.onresize = function(event) {
      drawVisualization();
      };

      *The only change in this compared to the template you provided was that I updated the colorAxis maxValue to 1 since there is one state listed, but I have tried it with 0 and 1 and neither work.

      Thanks,

      Tommy

      1. Tommy Strickland

        Reply

        Proving my inexperience with this, the script tags around the beginning lines aren’t shown above but they are the same as the template used in the world map.

  3. Great! I`ll try that!
    However, you have to be clear with people who does not know SF so much. Some features in Salesforce are impossible to be done without code, so for that one, you don`t need to write code, but copy and paste.

    Congs. again !!!

  4. cool…but, can it go further? I have data at the county and zip code level in Missouri and Alabama. Can I show Opportunities visually by county? or a heat map by zip code? From what I saw in the links, looks like I can do MSA and State, but didn’t see any codes for counties. I can work with ESRI mapping, but this looked like it might allow me to do it easier right in SFDC. thanks!

  5. Hi Jim,
    That is a really good question. I came across this link, and the short answer is ‘yes – you can use counties with Google GeoCharts however, it’s not as straight forward’: https://groups.google.com/forum/#!topic/google-visualization-api/KVGu–jjUpk.

    “you can create custom maps for the GeoChart, however it gets a tad tricky. GeoChart expects your maps to be named in a certain way and be in a certain format, so you would have to reverse engineer how the maps are structured in order to draw your own. You can set to your own maps source by writing google.visualization.GeoChart.setMapsSource(newSourceUrl).”

    I think this example of jsfiddle really shows the best example: http://jsfiddle.net/f3sXW/1/ – this shows the different counties from the state of Alabama.

    This is also a very good example: http://chrisdblumberg.com/unemployment/

  6. Would there be a way of adapting this so that the map show all accounts a certain type? For example, by default the map will show all Account Records where the TYPE = Client and when you click on the country it filters to the report showing the client in that country? My main need here is for the map to update dynamically each time a new client account type is created or changed to a client, without having to amend the visualforce and add a new row?

  7. Hi Tracie, Juul,

    Although I haven’t tried this out yet, it appears that custom url link hacking in Lightning does work since Spring 17 (https://releasenotes.docs.salesforce.com/en-us/spring17/release-notes/rn_rd_reports_filter_url.htm), albeit in a slightly laborious way.

    This link shows how to deal with having a custom url hack for both Classic and Lightning experience: http://biggerboatconsulting.com/supporting-report-filter-url-hacks-in-lightning-and-classic/.

    Hi Alastair,

    I’m not completely sure what you mean. Feel free to send me a LinkedIn msg.

    Thanks,
    Andy

Add Comment