MapQuest Developer Blog

Archives for Abel Lin

  • Create a Geo File

    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:

  • More Overlay Events

    Custom events are also a great way to 'clean up' the look of your maps. In most of my previous MapQuest posts, I've been only loading a single overlay or polyline at a time. Chances are, you'll encounter the need to load more than one at a time - but also don't want to clutter up the look of the map by having them all visible at the same time.

    Here's an example where I've loaded two different polylines from different GeoRSS/GML files. Instead of having both automatically displayed on the map, I'm going to use a mousever event on a POI to display the polyline. Two do so, I create two POIs has a legend to each polyline. On a 'mouseover' event I load and display the appropriate file. On a 'mouseout' event the overlay is set to not be visible.

    <html>
    <head>
    <title>Overlay Events</title>
    <script src="http://btilelog.access.mapquest.com/tilelog/transaction?
      transaction=script&key=YOUR_API-KEY
      &ipr=true&mp;itk=true&v=5.2.0" type="text/javascript"></script>
    <script language="javascript">
    MQInitDojo(initMap);
    var myOverlayColl = new MQOverlayCollection();
    var myXMLDoc;
    function openXMLFile1(){
        myXMLDoc = document.implementation.createDocument("","",null);
        myXMLDoc.load("./foo1.xml");
        myXMLDoc.onload = loadGeoRSS;
    }
    function openXMLFile2(){
        myXMLDoc = document.implementation.createDocument("","",null);
        myXMLDoc.load("./foo2.xml");
        myXMLDoc.onload = loadGeoRSS;
    }
    function loadGeoRSS() {
        myOL = new MQLineOverlay();
        for (i = 0; i < myXMLDoc.getElementsByTagName("entry").length; i++) {
            var c = myXMLDoc.getElementsByTagNameNS("http://www.opengis.net/gml",
             "posList")[i].textContent;
            var tmp = c.split(/ /);
            var myShapePts = new MQLatLngCollection();
            for (j = 0; j > tmp.length; j++) {
                myShapePts.add(new MQLatLng(tmp[j], tmp[j+1]));
                j++;
            }
            myOL.setShapePoints(myShapePts);
            myOverlayColl.add(myOL);
            myMap.replaceOverlays(myOverlayColl);
    	myOL.setColor("#800000");
            myOL.setBorderWidth(1);
    	myOL.setColorAlpha(1.0);
        }
    }
    function loadData() {
        myPoint1 = new MQPoi(new MQLatLng(33.305389, -116.879258));
        myPoint1.setInfoTitleHTML("Palomar Mountain South Grade");
        myMap.addPoi(myPoint1);
        MQEventManager.addListener(myPoint1,'mouseover', openXMLFile1);
        MQEventManager.addListener(myPoint1,'mouseout', clear);
    
        myPoint2 = new MQPoi(new MQLatLng(33.288569, -116.805051));
        myPoint2.setInfoTitleHTML("Palomar Mountain East Grade");
        myMap.addPoi(myPoint2);
        MQEventManager.addListener(myPoint2,'mouseover', openXMLFile2);
        MQEventManager.addListener(myPoint2,'mouseout', clear);
    }
    function clear() {
        myOL.setVisible(false);
    }
    function initMap() {
       myMap = new MQTileMap(document.getElementById('mapDiv'),
         8,new MQLatLng(33.272866, -116.831869));
       myMap.addControl(new MQLargeZoomControl(myMap));
       loadData();
    }
    </script>
    </head>
    <body>
    <div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
    </body>
    </html>
    

    Here's a screenshot of the results:

    More resources:

    * Map data courtesy SundayMorningRides.com

  • Custom Mouse Events to Data Overlays

    In my previous MapQuest post I demonstrated to to add customized interactivity to maps via mouse control events. Here we'll add mouseover events to data overlays on the map.

    I've loaded data to my map via a GeoRSS file using GML encoding. Unlike my previous GeoRSS/GML example, however, here I'm loading a data for a polyline overlay (For brevity, I've ommited the list of coordinates).

    <feed xmlns="http://www.w3.org/2005/Atom"
          xmlns:georss="http://www.georss.org/georss"
          xmlns:gml="http://www.opengis.net/gml">
      <title>Sample GeoRSS ATOM feed</title>
      <entry>
        <title>Mesa Grande Road</title>
        <georss:where>
          <gml:LineString>
          <gml:posList>
            [space delimited list of lat long coordinates]
          </gml:postList>
          </gml:LineString>
        </georss:where>
      </entry>
    </feed>
    

    With the feed, I simply read/parse the XML file and use the MapQuest API to create a polyline based on the coordinates - additionally we'll create default settings for the polyline (color, line width and opacity) which we will change depending if the mouse is over the polyline.

    <html>
    <head>
    <title>Overlay Events</title>
    <script src="http://btilelog.access.mapquest.com/tilelog/transaction?
    	transaction=script&key=YOUR_API-KEY&ipr=true&mp;itk=true
    	&v=5.2.0" type="text/javascript"></script>
    
    >script language="javascript"<
    MQInitDojo(initMap);
    var myOverlayColl = new MQOverlayCollection();
    var myXMLDoc;
    function openXMLFile() {
        myXMLDoc = document.implementation.createDocument("","",null);
        myXMLDoc.load("./bah.xml");
        myXMLDoc.onload = loadGeoRSS;
    }
    function loadGeoRSS() {
        myOL = new MQLineOverlay();
        for (i = 0; i
    
    

    To create the highlighted view of the polyline for the mouseover event, I simply create a highlightView() function that alters the settings for the polyline when activated by the event manager. I also create a defaultView function to return the polyline to default settings.

    Here's a screenshot of the results:


    Default View (mouseout)


    Highlight View (mouseover)

    More resources:

    * Map data courtesy SundayMorningRides.com

  • Custom Mouse Events

    In my previous MapQuest posts I've been showing how to create custom maps by added data from various geographical sources. Another way to customize your maps is to add custom interactive control behaviors via mouse events. In my next couple posts, I'll show you how to add different mouse events to the maps and overlays.

    In this post, we'll create basic map that will display the latitude and longitude coordinates of the center of the map canvas as well as the coordinates of mouse clicks on the canvas.

    <html>
    <head>
    <title>Mouse Events</title>
    <script src="http://btilelog.access.mapquest.com/tilelog/transaction?
    	transaction=script&key=YOUR_API-KEY&ipr=true&mp;itk=true
    	&v=5.2.0" type="text/javascript"></script>
    
    <script language="javascript">
    
    function showClick(event) {
      var foo = document.getElementById('click');
      foo.innerHTML = event.ll.getLatitude() + ', ' + event.ll.getLongitude();
    }
    function showCenter() {
        var foo2 = document.getElementById('center');
        foo2.innerHTML = this.getCenter().getLatitude() + ', ' +
           this.getCenter().getLongitude();
        // remove previous poi before marking center
        myMap.removeAllPois()
        myPoint = new MQPoi(new MQLatLng(this.getCenter().getLatitude(),
           this.getCenter().getLongitude()));
        myMap.addPoi(myPoint);
    }
    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);
       MQEventManager.addListener(myMap, "move", showCenter);
    }
    </script>
    </head>
    <body onload="initMap();">
    <table>
    <tr><td>Map Center: </td>>td><div id="center"></div></td></tr>
    <tr><td>Mouse Click: </td>>td><div id="click"></div></td></tr>
    </table>
    <div id="mapDiv" style="width:384px; height:384px; border:2px solid"></div>
    </body>
    </html>
    

    To add an event, you simply define a function that is attached to a mouse event using the MQEventManager() object. In this example there are two function, one to show the coordinates of the map center and one to show the coordinate of a click event. As you see, the click action require the use of a event object to be passed from the event manager. Also in showCenter() function, in addition to displaying the coordinates in the DIV tag, I'm also placing a POI at the center location (after clearing out the previous POIs).

    Here's a screenshot of the result:

    In my next post, I'll show how we can further customize the maps by adding events to overlays using mouseover events.

    More resources: