Saturday, May 07, 2011

Google Maps in Salesforce - Bird Sightings

I haven't written about birds in over a year. Mainly because I've been working on things that have kept me way to busy to blog. But... It's Mother's Day weekend and since I splurged for a romantic getaway in Estes Park, I've been given an hour to code some basic Bird sighting functionality. I want to build on what I've done with Content storing the bird images but I also want to build an interactive experience using Google Maps. Ideally, the user would be able to add new sightings to the map, choosing the file to upload to content if they've taken a picture, see current sightings by species of bird, etc. The last function is what we'll build up to.

I'm a fan of 'functionality first'. Goal there is to build something functional before making it aesthetically pleasing. So we'll do a 3 step approach to viewing sightings of birds.

1. Build a base Google Map, embedded in the Salesforce org which will house your sighting data

2. Build the sighting schema with a tie to the observed animal (in our case, a species of bird) and geopositioning

3. Pull in the Sightings and create markers for each. Ideally, use a different icon for each type of bird.

Being able to filter by bird types will build on this in later posts (at some point...)

First sign up for your Salesforce.com developer edition account
http://www.blogger.com/img/blank.gif
When you've done this, you'll be able to see what domain you are hosted on. Salesforce provisions onto various clusters with the prefix (c.na or na). I'm on c.na10.visual.force.com for my vf pages

The go write some Flex/AS3 code for your google map. We're not using the Javascript API because Javascript is for the birds (and because we want this app to be super-interactive by the end of our series). You'll need to download the swc for the latest version of the API (I'm using v20). I also downloaded the UtilityLibrary because that's got some KML parsing I might use later and a DragZoomControl that is pretty cool. Start here if you're new to Google Maps API for Flash

Here's some base code:


Okay. Now compile this and upload as a static resource to Salesforce. For now, don't worry about uploading as a Release Build (that'll chop a bunch off the file size, but... FUNCTIONALITY FIRST)



Now you've got all that going and the result is that you have a google map in salesforce. We'll add the sighting object and get the data into the SWF in the next post.

No comments: