October 7, 2012
Posted by on
Over the next few blog posts I’m going to be writing about some of the cool little features I implemented in a recently released app I worked on — Pointillism. It is pretty rare that I can talk about an app I’ve released, but the verbiage in this contract allows me to 🙂
On the admin interface of the app, the customer wanted to be able to add a “point” to the game. A point is a destination that the end user is looking for in this virtual scavenger hunt. In order to have the admins be able to visually see what their GPS was returning, we wanted to map the location, as well as the bounding area that they wanted people to be able to check in to. While our admin interface was pretty basic, the functionality had to be there :
While most people would instantly reach for Google Maps, we decided to use ESRI’s mapping solution. They offer a very accurate mapping solution that is consistent across all the platforms in addition to being very flexible The one thing that Google Maps had a hard time providing us was the ability to draw the fence in a dynamic manner, built with realtime data that came from within our app. It was important for us to be able to see the current location, and the valid locations where people could check into for that point. The hardest thing was having the ESRI servers draw the circle (known as a buffer). ESRI’s mapping platform is available for use FOR FREE, with very limited exceptions. As a bonus, they have an entire SWC and already pre-built for Flex/AIR.
So, how was it done? It was actually pretty simple :
- Add the SWC from ESRI’s website to your project.
- Add their mapping components to your MXML file. We added the mapping layer and then a graphic layer (where the circle is drawn). The mapping layer, we pointed to ESRI’s public mapping service.
<esri:Map id="locMap" left="10" right="10" top="10" bottom="150" level="3" zoomSliderVisible="false"
logoVisible="false" scaleBarVisible="false" mapNavigationEnabled="false">
- We added a few components to the MXML’s declaration section. This included the defination of the “symbol” (the circle itself), and the Geometry Service (the thing that figured out how to draw the circle in the correct place).
<esri:SimpleFillSymbol id="sfs" color="0xFF0000" alpha="0.5">
- Next, we had to write some code to update the map and draw the circle in the correct place. This involves a few steps, including taking the GPS coordinates from our GPS device, and creating a new “MapPoint” which holds those coordinates. A MapPoint is exactly that, a single point on the map. The thing about ESRI’s service is that it knows a LOT of different map coordinate systems — so you need to make sure you choose one that makes sense. In our case, our GPS is returning back data in WebMercator format (lat/lon) other known as Spatial Reference number 4326, so that is what we are going to use to project that point to center our map. Finally, we will ask the Geometry Service to return a “buffer” of a series of points that represents a circle x feet around the center of our map. When the buffer is returned from the web service, we draw it using our graphic we setup earlier and push it to Graphics Layer that is sitting on top of our map. This all happens in a matter of seconds.
protected function gotGPS(event:GeolocationEvent):void
var mp:MapPoint = new WebMercatorMapPoint(event.longitude, event.latitude);
locMap.scale = 4000; //this is a magic number for the zoom level I wanted.
lastPoint = mp;
protected function updateMapWithFence(mp:MapPoint):void
var bufferParameters:BufferParameters = new BufferParameters();
bufferParameters.geometries = [ mp ];
bufferParameters.distances = [ checkinDistance.value ];
bufferParameters.unit = GeometryService.UNIT_FOOT;
bufferParameters.bufferSpatialReference = new SpatialReference(4326);
bufferParameters.outSpatialReference = locMap.spatialReference;
private function bufferCompleteHandler(event:GeometryServiceEvent):void
for each (var geometry:Polygon in event.result)
var graphic:Graphic = new Graphic();
graphic.geometry = geometry;
graphic.symbol = sfs;
And that is about it! cross-platform mapping made pretty easy. The cool thing about ESRI’s mapping solution is the power behind it. They offer things such as the typical driving directions all the way though “How far can a user see if they stand on the ground at this point”. Since the components are native to your AIR app, they are fast and behave like you expect it to, without the mess of having an HTML overlay in your app.