Wow, this post is making me feel like i am back in kindergarten. Let’s learn how to draw, first take your pencil and a piece of paper an… well i tried that, now it’s hard to read the other stuff on the monitor! Ok, well so I have taught myself how to draw a line over the last couple of days and i have learned a couple of things. It is easy to draw a line, only took me about 8 hours to get the rough cut, then another 8 to tweak it a bit. I would suggest understanding it by first checking out the LineOverlay and the single line points.
STEP 1: Drawing a simple line on the screen
oh, I am not going to give you the code, just the advice like before, draw something simple, all you really need is two LatLng’s, LatLngCollection,IPointLLCollection and a LineOverlay. Ok i am a sucker, so here is a little help:
//first get LatLng1 & LatLng2 as LatLngs with accurate values
//then persue the rest of the following
var line:LineOverlay = new LineOverlay();
private var linePointCollection:LatLngCollection = new LatLngCollection();
linePointCollection.add(LatLng1);
linePointCollection.add(LatLng2);
var myIpColl:IPointLLCollection = linePointCollection;
line.setShapePoints(myIpColl);
myMap.addOverlay(line);
something like that should get your first version working on the map.
So let’s think about doing something a little more productive now. Let’s actually make an Object that will take in some information and do the heavy lifting and we can move the code off and really do some cool stuff with making a line.
Making the Object:
Let start out making our class
Package ActionScript
{
/*This object will be created to get you a Line to draw or display on the map the user can have a distance for the line. */
import com.mapquest.*;
import com.mapquest.tilemap.overlays.LineOverlay;
import com.mapquest.tilemap.pois.Poi;
import mx.collections.ArrayCollection;
public class LineMaker
{
So all of the stuff up there look familiar? Well I hope so, I will not spend time talking about it. Now lets make a couple private variables so we can have a start and end to the line
private var startPosition:Poi;
private var endPosition:Poi;
Please notice these are POI’s. This is a good way to start if you want MapQuest to get you some LatLng’s so you can put some simple ones one the board to start.
private var arrLinePoints:ArrayCollection = new ArrayCollection();
private var linePointCollection:LatLngCollection = new LatLngCollection();
private var line:LineOverlay = new LineOverlay();
private var totalDistance:Number = 0.0;
//…the end of the function would be down past all the cool code
Now we added the above to make sure we can insert LatLng’s at any point of the Object, get the total distance of the users line, and also to have the items to make a line.
Now you could add some public functions that would allow the user to create a line with two points, so you can do it quickly. Send a POI to strip out the LatLng into the ArrayCollection. Add a LatLng to the Array collection. That should be a good start.
Now you will need to also be able to make the lineOverlay, retrieve the line overlay, get the distance of the line, retrieve the distance of the line, and probably 1,000’s of others. Those are my basics for the LineObject. I also have a function that will keep changing the last items of the array so you can see what the calculations and placement of the new line would be. Ok, let’s get to the part where we put the line on the screen.
The following function can be implemented when a person clicks a draw button or whatever you like.
So there are some public functions like this.
public var myLine:LineObject = new LineObject();
public function doDraw():void
{
if( btnLine.label == ‘Draw Line’)
{
//we can add the click event to the map when they click the button
myMap.addEventListener(MouseEvent.CLICK, getAddPoint,true);
}
else
{
//we can remove our added listeners
myMap.removeEventListener(MouseEvent.CLICK, getAddPoint,true);
myMap.removeEventListener(MouseEvent.MOUSE_MOVE,tempLineDraw,true);
}
}
/*this function would add a point every time the mouse is clicked. It also adds an event to the map that will keep us up to date on where the user is pointing the mouse*/
public function getAddPoint(e:MouseEvent):void
{
var pntXY:PointXY = new PointXY(myMap.mouseX,myMap.mouseY);
var iPoint:IPointXY = pntXY;
var ll:LatLng = new LatLng(myMap.pixToLL(iPoint).lat,myMap.pixToLL(iPoint).lng)
myLine.addLatLng(ll);
if(myLine.getNumberPoints() > 1)
{
/*for this version we can just remove all other overlays, but you will want to point to this specific one, so it might be worth it to have your cool LineObject tell you it’s previous state.*/
myMap.removeAllOverlays();
myMap.addOverlay(myLine.getLine());
currentCenterOfMap = myMap.getCenter();
}
else
{
myMap.addEventListener(MouseEvent.MOUSE_MOVE,tempLineDraw,true);
}
}
/*this function tells us where the user is pointing the map and then it updates our cool little LineObject so it keeps the line information up to date.*/
public function tempLineDraw(e:MouseEvent):void
{
var pntXY:PointXY = new PointXY(myMap.mouseX,myMap.mouseY);
var iPoint:IPointXY = pntXY;
var ll:LatLng = new LatLng(myMap.pixToLL(iPoint).lat,myMap.pixToLL(iPoint).lng)
myLine.replaceLast(ll);
myMap.addOverlay(myLine.getLine());
}
So this should get your motor cranking and off to a good start drawing. I am still having a really hard time getting the line to follow the cursor. I have seen a great set of tools over at: http://sxsw.mapquest.com/Web_JavaScriptSamples/customcontrols.html and the rectangle, circle and line are exactly what I am looking to do in AS3 and Flex 3, but I am having a hard time like i said getting the line to follow. I might get it if i spend another few hours on it, but if you have a tip or suggestion about it, feel free to let me know.
