Plotting points with custom icons on a map
Written by Jason on July 4, 2012Fortunately using custom icons isn't much more difficult than plotting basic points on a map. To get started, you'll need:
- The latitude and longitude for each point
- The URLs for your custom icons (or use the ones we've provided - more detail below)
- Labels for your pins
- *optional* Descriptions for the contents of the callout when a pin is clicked
- *optional* Categories if you want to be able to control the points in groups
With these five items, you can create visualizations like this one:
Once you've got the necessary items, create your report so that it contains the following columns:
- Labels for your pins (text only)
- Descriptions for an activated pin (can contain HTML)
- Geometry - which is KML that contains the latitude and longitude. You can use the sample formula below to get started:
concat("<Point><coordinates>",LongitudeFieldName,",",LatitudeFieldName,"</coordinates></Point>")
(Basically, you're enclosing the latitude and longitude numbers in some text to form a valid KML point. Note - the latitude and longitude fields should be number fields or text fields that contain numbers only - no degree symbols, etc.). - Category, if applicable. This is plain text that will be used to classify each result into a category. For the example above, we used the formula below to create our three categories based upon the value in the field WaterUsePerCapitaRes, but you can create your own function, or just use a stored value in a dataset.
if(WaterUsePerCapitaRes>400,"400L or more",if(WaterUsePerCapitaRes<200,"200L or less","200L - 400L")) - Custom icon URL requires a full URL if you are specifying your own icons (e.g., http://yourdomain.com/path/to/image.png) or a relative path if you're using ours. We used the following function to display the pins according to the category they are in, but it is not a requirement to do so.
if(WaterUsePerCapitaRes>400,"/images/dot-red.png",if(WaterUsePerCapitaRes<200,"/images/dot-green.png","/images/dot-orange.png"))The Tuhunga-provided custom icons are as follows:
/images/dot-red.png
/images/dot-orange.png
/images/dot-yellow.png
/images/dot-green.png
/images/dot-blue.png
/images/dot-purple.png
/images/dot-black.png
/images/dot-white.png
We hope this helps you create your own visualizations. Of course, please contact us if you have any questions.
