×

Discussion Board

Results 1 to 4 of 4

Thread: Map Image

  1. #1
    Registered User
    Join Date
    Feb 2013
    Location
    Mexico, D.F.
    Posts
    5

    Map Image

    Hi.

    I need to get a map image in order to save it into a file, I know that there is a API to load static maps trough an url (REST API), but the problem is that it's very limited and it's not usefull for what I'm doing, because I need to get an image of a map that contains a large number of objects (markers, shapes, bubbles,etc) and with the REST API I can't do this.

    On the other hand, I know that the map is an image, so I've tried to render the content of the DOM and painted in a canvas in order to convert it's content to an image, but It doesn´t work because the images of the map are in the server, not in the client.

    Does somebody know how can I solve this?

    Regards.

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Map Image

    The problem is that the API(s) are not designed to do this. The JavaScript API relies on Map tiles from the back-end server and the REST API is designed for a simple snapshot. The best workaround I have discovered is to generate a RESTful Map URL using the map.objects from the JavaScript API. It isn't perfect since it only simple markers can be displayed but it does allow a map to be rendered.

    I'm not a lawyer, but I reckon saving the map image directly to a file is probably against the terms and conditions:
    5(ii) You will not copy, translate, modify, or create a derivative work (including creating or contributing to a database) of, or publicly display any Content or any part thereof except as explicitly permitted under this Agreement. ... (iv) exporting, writing, or saving the Content to a third party's location-based platform or service
    Generating the RESTful Map URLs and saving them so that the image can be retrieved at a later date is more likely to be OK. It still potentially runs in to URL length issues for very complex objects.

    Of course you could always PRINT-SCREEN and then print out the map.
    Last edited by jasfox; 2013-05-13 at 16:02.

  3. #3
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Map Image

    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    
      <title>KML Generator</title>
       <!-- This file is a simple URL editor/data generator. -->
            <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
    
      <style type="text/css">
    /*<![CDATA[*/
            #left {
                          position:relative;/*ie needs this to show float */
                          width:50%;/* same as the left margin on #outer*/
                          float:left;
                          left:-2px;/* push column into position*/
                  }
                  #left p {padding-left:2px;padding-right:2px}
                  #right p {padding-left:2px;padding-right:2px}
    
                  #right {
                          position:relative;/*ie needs this to show float */
                          width:50%;/* same as right margin on #outer*/
                          float:right;
                          left:2px;/* push column into position*/
                  }
                  #footer {
                          width:100%;
                          clear:both;
                          position:relative;
                  }
                  .nm_bubble_content{
                      color:white
                  }
    
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <div>
        <div id="left">
          <div id="map" style="width: 800px; height: 400px;"></div>
        </div>
    
        <div id="right">
          lat: <span id="lat">?</span> long : <span id="lng"></span>?<br />
    
          <label for="title">Title</label> <input id="title" /><br />
    
          <input id="button1" type="button" value="Update Marker" onclick="editMarker(false)" />    
          <input id="button2" type="button" value="Delete Marker" onclick="deleteMarker()" />
    
        </div>
      </div>
    
      <div id="footer">
        <strong>KML</strong>
        <input id="button6" type="button" value="Create URL" onclick="saveMapObjects(map)" />    
    
        <br />
    
        <label for="urloutput">Output:</label> 
        <textarea id="urloutput" cols="120" rows="3"></textarea><br />
        <hr />
      </div>
    
    
      <script type="text/javascript">
    /*<![CDATA[*/       
    /////////////////////////////////////////////////////////////////////////////////////
    // Don't forget to set your API credentials
    //
    // Replace with your appId and token which you can obtain when you 
    // register on http://api.developer.nokia.com/ 
    //
                nokia.Settings.set( "appId", "APP ID"); 
                nokia.Settings.set( "authenticationToken", "TOKEN");
    //          
    /////////////////////////////////////////////////////////////////////////////////////
    /*]]>*/         
    </script>
    <script type="text/javascript">         
      // Set up variables pointing to the various text boxes, these
      // are used to display the texts for editing. 
      var lat = document.getElementById("lat");
      var lng = document.getElementById("lng");
      var title = document.getElementById("title");
    
      // Current Marker a reference to the latest marker to be added or edited.
      var currentMarker;
    
      // This is the map we can put KML elements on.
      var map = new nokia.maps.map.Display(document.getElementById("map"), {
            'components': [ 
                    //behavior collection
                    new nokia.maps.map.component.Behavior(),
                    new nokia.maps.map.component.ZoomBar() ],
            'zoomLevel': 12, //zoom level for the map
            'center': [52.51, 13.4] //center coordinates
      });
      // Remove zoom.MouseWheel behavior for better page scrolling experience
      map.removeComponent(map.getComponentById("zoom.MouseWheel"));
    
      // This will display the data from the <description> as HTML
      var infoBubbles = new nokia.maps.map.component.InfoBubbles();
      map.addComponent( infoBubbles);
    
    
      // Let's add an event to Long press on the map
      var EventTarget = nokia.maps.dom.EventTarget;
      var eventExEl = document.getElementById("map");
    
      // Attach EventTarget interface to the document to allow normalized events at the node.
      EventTarget(eventExEl);
    
      // Add a listener for the click event to the node and add a marker which shows an  if clicked.
      eventExEl.addListener("longpress", function(evt) {
            var markerData = new Object();
            // Retrieve the Coordinates from the map.
            markerData.coords = map.pixelToGeo(evt.targetX , evt.targetY);  
            // Set the title to the next number o the list for easy ident.
            markerData.title = map.objects.getLength() + 1;
            // Get the marker data from the edit boxes.
    
             currentMarker = addMarker(markerData);
    
      }, false);       
    
      // Removes the marker and removes the associated info bubble.
      function deleteMarker (){
            map.objects.remove(currentMarker);
      }
    
      // Changes the way a  marker is displayed or converts it from a marker to a waypoint.
      function editMarker(addWaypoint) {
            // deletes the current marker
            map.objects.remove(currentMarker);
    
          var markerData = new Object();
          // Read in the marker data from the edit boxes (and previously defined coordinates
          markerData.coords = currentMarker.coordinate;
          markerData.title = title.value;
            currentMarker = addMarker(markerData);
    
      }
    
      // Adds a new marker to the map, with additional functionality based on the edit box data.
      function addMarker(markerData) {
            var marker;
    
            if (markerData.title === undefined){
               markerData.title = "";
            }
                marker = new nokia.maps.map.StandardMarker(markerData.coords, {
                        text:  markerData.title, //small title
                        draggable: true,  //the marker is marked  to be draggable
                        $data: markerData
    
                });
    
            // When the marker is clicked, the edit boxes must be refreshed.
            marker.addListener("click" ,  function(evt) { 
                      if (evt.target.text === undefined){
                           title.value  = "";
                      } else {
                           title.value = evt.target.text; 
                      }
                      lat.innerHTML = evt.target.coordinate.latitude;
                      lng.innerHTML = evt.target.coordinate.longitude;
                      currentMarker = evt.target;
            }, false);
    
            // If a marker is dragged, we need to close the infobox.
            marker.addListener("drag" ,  function(evt) {                 
                     currentMarker = evt.target;
            }, false);
    
            map.objects.add(marker);
           return marker;
    
      }
    
    //
    // Library function for transforming extended characters into KML readable equivalents.
    // This is required to ensure that the KML (which is a subset of XML) is syntactically
    // Valid. The true HTML character codes may be found in the description element since
    // it is held in a CDATA section, all other elements need to escape the & character
    // which precedes the encoded character.
    //
    // It would be nice to add this as String prototype, but not all browsers support it.
    //
    function toUnicode (prefix, input){
            var output = "";
          var splitInput = (input===undefined) ? new Array() : input.split("");
            for (var i = 0; i < splitInput.length; i++){
                    var currentChar = splitInput[i];
                    // Encode any extended character plus &
                    if (currentChar.charCodeAt()> 128 ||  currentChar.charCodeAt()== 38  || currentChar.charCodeAt()== 39 ) {
                            output = output +  prefix + currentChar.charCodeAt() + ";";
                    } else {
                            output = output + currentChar;
                    }           
            }
            return output;
    }
    
    
      // Creates a valid URL file from the Map data.
      function saveMapObjects( map) {
            var markers = new Array();
            for (i=0; i< map.objects.getLength(); i++) {            
                    if ( map.objects.get(i) instanceof nokia.maps.map.Marker ) { 
                             // Retrieve all the Marker data and add it to an array
                             var markerData = new Object();
                             markerData.id = toUnicode("&amp;#",map.objects.get(i).text);
                             markerData.latitude = map.objects.get(i).coordinate.latitude;
                             markerData.longitude = map.objects.get(i).coordinate.longitude;                        
                            markers.push(markerData); 
    
                    }   
            }
            // Now output the URL, start with the standard parameters:
            var output = "http://m.nok.it/?"        
            + "app_id=" +  nokia.Settings.appId
            + "&token=" + nokia.Settings.authenticationToken
            + "&z=" + map.zoomLevel         
            + "&h=" +map.getDisplays()[0].height
            + "&w=" +map.getDisplays()[0].width;
             if (markers.length > 0){
                  output = output  + "&poi="           
    
                // Loop nthrough the markers and add POI
                for (i=0; i< markers.length; i ++){
                        console.log (markers[i]);
                        output = output  + markers[i].latitude.toFixed(4) + "," + markers[i].longitude.toFixed(4);
                        if (i < markers.length-1){
                            output = output  +  ","
                        }
                }
            } else {
                 output = output  + "&nord&nodot&c="    
                      + map.center.latitude.toFixed(4) + "," + map.center.longitude.toFixed(4);
            }
            output = output + "\n";
            document.getElementById("urloutput").value = output;
      }
      </script>
    </body>
    </html>

  4. #4
    Registered User
    Join Date
    Feb 2013
    Location
    Mexico, D.F.
    Posts
    5

    Re: Map Image

    Thanks a lot.

Similar Threads

  1. Replies: 1
    Last Post: 2011-12-29, 10:56
  2. Image rotates if movie clip position changed before image loading
    By supriyaakg in forum [Archived] Flash Lite on Nokia Devices
    Replies: 2
    Last Post: 2010-12-30, 03:27
  3. Creating a javax.microedition.lcdui.Image Image on a J2Se environment
    By TacB0sS in forum Mobile Java Media (Graphics & Sounds)
    Replies: 5
    Last Post: 2010-08-24, 20:01
  4. Series 40 - image resizeing and drawing black and white only a part of an image
    By ionutianasi in forum Mobile Java Media (Graphics & Sounds)
    Replies: 3
    Last Post: 2003-07-21, 10:36
  5. Replies: 0
    Last Post: 2003-05-12, 17:38

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •