archives

« May 2008
Su	Mo	Tu	We	Th	Fr	Sa
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

In my previous MapQuest posts I've mostly been demonstrating how to use MapQuest to display the the various types of geo-formats (KML, GeoRSS, etc). Building on the examples of map event interaction from my previous posts, we can also build an interactive map interface where users can build their own geo-format files. Here's an example where users can interactively click on the map to create a polyline.


<html>
<head>
<title>Create a Geo File</title>
<script src="http://btilelog.access.mapquest.com/tilelog/transaction?
  transaction=script&key=YOUR-API-KEY&ipr=true&itk=true&v=5.2.0"
  type="text/javascript">&t;/script>
<script language="javascript">

MQInitDojo(initMap);
var myOverlayColl = new MQOverlayCollection();
var myShapePts = new MQLatLngCollection();
var myOL = new MQLineOverlay();
var allclicks  = new Array(0);
function showClick(event) {
    // log all clicks
    allclicks.push(event.ll.getLatitude(), 
      event.ll.getLongitude());
    // add clicks to polyline overlay
    myShapePts.add (new MQLatLng(event.ll.getLatitude(), 
     event.ll.getLongitude()));
    myOL.setShapePoints(myShapePts);
    myOverlayColl.add(myOL); 
    myMap.replaceOverlays(myOverlayColl); 
    // clear previous markers and add new start and end points
    myMap.removeAllPois()
    myMap.addPoi(new MQPoi(new MQLatLng(allclicks[0], allclicks[1])));
    if ( allclicks.length > 1 ) {
        myMap.addPoi(new MQPoi(new 
         MQLatLng(allclicks[allclicks.length-2],
         allclicks[allclicks.length-1])));
    }
}
function display() {
    alert (allclicks);
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),8,
    new MQLatLng(33.173676, -116.714889));
   myMap.addControl(new MQLargeZoomControl(myMap));
   MQEventManager.addListener(myMap,"click",showClick);
}
</script>
</head>
<body>
<div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
<a href="#" onclick="display();">Display Coordinates</a>
</body>

</html>

As you can see, I'm simply using an 'alert' to display the captured latitudes and longitudes of the polyline that the user created. Obviously the next task is to transform that array of coordinates into your favorite geo-format. Here is a screenshot of the result:

Browse archives

Topic Centers

Recent comments

Create a Geo File