Making an interactive Area Map with a Custom Module.

Nov 14, 2014 11:01 am

This is going to combine Freedom's Custom Modules and Google's Geochart Visualization Service to create an interactive area map for your site. The below layouts were used to create the map at: http://skunk.guru/main/skunk-legality-map/

First I created a new custom directory and added the fields which I needed.

Name is used for the name of the state/area. Note that these will have to be a name that Google can recognize for them to show up properly on the map, so make sure your spelling is correct.
Category I used for region (currently I only have US, though I plan to make a European map later and will be able to tailor the map using the category.)
Legal is what I am using for "chart values." You can enter any numbers into the map (popuplation, vote counts, etc.) and have them displayed. Because this is a legality map I am only using three values for my number field (0 = illegal, 1=caution advised, 2=legal). I have set up a human readable lookup for this dropdown to make it easy to choose the right value. I will translate these into numbers within the layout.
Tooltip Text is what will display under the region name when the region is hovered over.
Reference URL is the window that will open if you click a region.
Enable Zoom is not currently functioning, but in the future I plan to allow users to zoom in on states which have skunks legal in only certain counties to see where they are and are not available.

Once you have the fields setup you need to add your items:

Once we have the items added we will build the two layouts needed to display the map. Remember to blank out the number of items so that all of your map regions will show.

First we have the main lister which will draw the map:

BODY:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);


      function drawMarkersMap() {
        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Legal', 'Tooltip' ],
            [[repeat]]
           
        ]);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]);

       var options = {
       sizeAxis: { minValue: 0, maxValue: 100 },
       region: 'US', //north america
       legend: 'none',
       resolution: 'provinces',
    // displayMode: 'markers',
        colorAxis: {colors: ['#960A0A', '#C2C107', '#00B800' ]}
      };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(view, options);
       
       [[layout.legal_map_onclick]]
    };
</script>

<div id="chart_div" style="width: 100%; height: 400px;"></div>

REPEAT:

[[item]]

ITEM:

[ '[[name]]', <if [[misc0]] = 'Yes'>2</if><if [[misc0]] = 'Caution'>1</if><if [[misc0]] = 'No'>0</if>, '[[misc1]]'],

Notice that in the item section I am decoding my lookup's human readable words into the proper numbers. If you are only using numbers, you can simply place the tag in with no if statements.

Note that towards the bottom of the body I have embedded the legal_map_onclick lister. If you do not wish your map to open any links when items are clicked, you can simply remove that tag and your map will function. Otherwise you will need to create one more lister layout. *Remember to change the embedded tag in the above layout if you do not name your second lister legal_map_onclick.*

BODY:

google.visualization.events.addListener(chart, 'select', function() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var state = data.getValue(selectedItem.row, 0);
        [[repeat]]
    }

  });

REPEAT:

[[item]]

ITEM:


<if [[misc2]]>
    if (state == '[[name]]') { window.open('[[misc2]]'); }
</if>