Sponsored Links

Just Add Data Part 2: Telling Plug and Play Maps How to Display the Data PDF Print E-mail
Written by Chris Duncan   
Wednesday, 17 June 2009 07:52

This is the second part of an article written by Chris Duncan. The first part of the article introduced Plug & Play Maps and was published on Monday.

This is the fun part – bringing your data to life by displaying it in a visually engaging way that immediately and intuitively conveys to your visitors what you want them to understand about the data. There are two general aspects of data display you can control: what type of symbol to use when displaying the data (icons, charts, lines, or polygons), and how to vary those symbols to reflect your data values (no variation, varying color, or varying weight).

 

Depending on the format of your data and the nature of the location information, you may need to specify what type of symbol to use for display. For point features (locations defined by a single latitude, longitude pair), you can choose to display icons (a single marker of some kind for each point) or charts (a pie, bar, or line chart showing multiple data values for each point). For line features, you can choose to display them as lines or as closed polygons (forcing the line to close by connecting the last point back to the first). For polygon (area) features, whether lines forced to close or already-closed features, you can choose to display them as outlines or areas filled with color. In the script URL, you specify how to symbolize the data with one of the following settings: &sym=icon, &sym=chart, &sym=line, or &sym=area. Note that for SHP files, the feature type is pre-determined as point, line, or polygon; for KML files, there can be a mix of points, lines, and/or polygons so you will have to specify which type you want to display for a given data layer.

For icon, line, and area symbols, you can choose a fixed color for display (all features from a particular data layer will have the same color), or you can have the color vary based on some data value. Colors can be varied based on categorical values (one color for each distinct data value, which can be text or numeric), or they can be picked from a color scale based on a varying numeric data value. Here is an example of point colors varying by category:

Example of point colors varying by category

(see this map live)


Here is an example of polygons varying by scaled colors:

An example of polygons varying by scaled colors

(see this map live)

 

For both categorical and scaled colors, you can choose from a number of colorbars such as grayscale, reds, greens, blues, or multicolor and rainbow options. To get varying colors, you name a data item to use for each feature's color in the script tag, for example &coloritem=CrimeType or &coloritem=Year; by default, coloritems are used to produce a scaled colors, but you can get categorical colors instead by specifying &colorscaling=cat.

For all symbol types (icon, chart, line, and area), you can choose fixed or varying symbol weights to vary the visual emphasis of features based on some data value. Weighting means different things for different symbol types: icon and chart weighting means varying the size of the icon or chart; line weighting means varying the line thickness; area (polygon) weighting means varying the degree of transparency of the color fill. In each case, the weight scaling makes features with larger data values more visually emphatic than features with smaller data values. An example of weight-scaled icons is shown below. To get varying weights, you name a data item to use for each feature's weight in the script tag, for example &weightitem=age_my.

An example of weight scaled icons

(see this map live)

 

For both color- and weight-scaling, the default behavior is to set the minimum data value to the smallest color index (zero) or weight value (the default minimum icon/chart size, line thickness, or opacity); the maximum data value to the largest color index (255) or weight value, and to proportionately (linearly) scale everything in between. There are times when you may want to override these defaults, for example:

  • you have a few outlying data values that are making it hard to see the variations among the rest of the data values
  • you always want the same colors to represent the same data values across a series of maps or as your data changes with time
  • you want a different range of output colors or weights

 

You can set your own minimum and/or maximum data values for the scaling with &colorminval= and/or &colormaxval= and with &weightminval= and/or &weightmaxval=; data values smaller than the specified minval will still be shown, but they will be displayed with the smallest color index or at the smallest size as though their value were exactly minval; similarly, data values larger than the specified maxval will be displayed with the largest color index or at the largest size. This is how the scaling works with colors:

How scaling works with colors

For weight scaling, you can also change the default minimum and maximum output weights with &weightmin= and/or &weightmax=; for icons, these are relative values that specify the size range of the output symbols, where the default range is 0.5 to 1.5; for charts, these are also relative values with a default range of 0.5 to 1.0; for lines, they represent line thickness in pixels with a default range of 1 to 5; and for areas (polygons) they represent opacity (the opposite of transparency) with a range of 0.05 to 0.95 by default (5% opaque to 95% opaque).

 

The Legend and Data Layers

Plug & Play Maps automatically builds an interactive legend that serves several purposes:

  • gives a name to a data layer and shows the symbol(s) used to display the data values
  • lets visitors turn the data layer map symbols on and off
  • provides a way to zoom the map to the full extent of the layer's data

 

For thematic maps, a legend is important to communicate to your visitors what the symbols on the map mean in terms of data values or categories. This is especially important if you have more than one data layer on the map. Plug & Play Maps lets you add as many data layers as you like, and each one gets a legend with the properties listed above. To add more than one data layer to a map, just append a numeric value to each of the parameters in the script tag, and Plug & Play Maps will combine the parameters with matching numbers. For example, here's a script tag that has two data layers, with the resulting map and legend shown in the image below:

 1 
 2 

 3 
 4 
 5 
<script src='http://www.plugandplaymaps.com/js/?
datafile1= http://www.gismatters.com/ppm/swineflu.csv&sym1=areas&
  coloritem1=Cases&
legtext1=Swine Flu Cases&datafile2=http://www.gismatters.com/ppm/swineflu.csv&
sym2=icons&weightitem2=Deaths&color2=pink&legtext2=Swine Flu Deaths'>
</script>


The results of the above script

(see this map live)


For some situations, you may want to modify the default legend properties. You can set the the legend type to:

  • &legtype=none to completely remove the legend entry for a data layer (for example, if it's a background layer whose meaning you think is obvious, such as state outlines)
  • &legtype=fixed to remove the on/off checkbox and have the data "always on"
  • &legtype=hideable (the default), to include the on/off checkbox

 

By default, the legend title text for each data layer is the name of the data file it is displaying; you can change it to something else by setting &legtext=Legend Title. Also by default, the legend title text is a clickable link that re-zooms the map to the full extent of that layer's data; you can turn off this feature by setting &legzoom=off. Finally, you might want to display the legend text (with or without the checkbox and/or hyperlink features) without the accompanying symbol below it: you do this with &legsym=off.

Map and Initialization Settings

To round out this discussion of Plug & Play Maps features, we look at settings that affect the map and legend layout, appearance, and initial settings.

The map's location, size, and layout within your web page have default settings that you may wish to alter. If you drop the Plug & Play Maps script tag somewhere in the body element of your web page, by default the map is created in that spot, in its own block using a div id='ppmap' structure, which has default styles defined in a CSS file that is automatically included in your web page. Alternatively, you can designate some other div tag in which to create the map by setting &m=dividforyourmap in the script tag, and you can give that div tag its own style (e.g., width and height, border, etc) with an inline style or in your own CSS file.

The default size of the map is 75% x 100% of the width and height of its container; this assumes that there is at least one element containing the map div that has a known size. One way to accomplish this is to set the body element size with width:100%; height:100%, which gives the body element the current size of the browser window. The default legend is put into the div id='ppleg', which has a default size of 190px x 100%; you can put the legend in a different div element with &l=dividforyourlegend. These settings mean that, by default, the map and legend will grow and shrink to fit whatever container they are put in, and if that container is the entire browser window, then they change size automatically when the window is resized.

If you are encountering problems getting your data to display, you can set &e=on to enable a popup alert listing any errors the service encountered while trying to create your map. You should leave this turned off once you release your map to the public to avoid confusing visitors with error messages that they have no control over and cannot do anything to fix.

Google Maps provides a number of controls within the map, which are all on by default. You can remove any or all of these by turning them off, or change their appearance, as follows:

  • &typeinit=streets or satellite or hybrid or terrain, to set the initial map background
  • &typectl=off turns off the map type buttons (Streets, Satellite, Hybrid, Terrain) so visitors cannot change the map background
  • &scalectl=off turns off the scalebar
  • &zoomctl=off or small or large, to hide or set the size of the map zoom control
  • &oviewctl=off to turn off the small overview map in the corner of the main map
  • &dblclkzoom=off to turn off the ability to zoom the map by double-clicking on it

Finally, Plug & Play Maps zooms out to make the entire set of data features visible when the map first loads; you can set some other initial zoom extent by setting &zoominit=minlat,minlon|maxlat,maxlon.

There are some additional features of the Plug & Play Maps service not covered here, for example, putting your own content into the popup windows that appear when visitors click on your map features, or changing the icon shape or chart type. Visit the How To page for further options and details, and look over the maps in the gallery and the growing list of user-designed maps in use around the internet – these will give you further ideas about how to create a variety of map types and data visualizations. There is also contact information on the website where you can get help via email if you run into difficulties setting up your map. Happy mapping!


 

Chris Duncan

Chris Duncan

About Dr Chris Duncan

Plug & Play Maps was developed by Dr. Chris Duncan, a leading expert since 1991 on the GIS analysis and visualization of digital terrain data and satellite imagery, and the President of GISmatters, a full-service GIS consulting business offering Mapping, Location Analysis, Data Visualization & Database Solutions to commercial, governmental, and academic clients. Dr. Duncan also operates All Terrain Digital, a producer and provider of high-quality digital terrain and surface products at resolutions down to 5 meters.


Comments (0)Add Comment

Write comment

security code
Write the displayed characters


busy
Last Updated on Wednesday, 17 June 2009 14:53