×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Jul 2013
    Posts
    1

    Contol zooming when using Positioning

    Hi!

    Is there a way to control the zoomLevel when user clicks the positioning button?
    Now it seems to zoom too much so a user has to zoom out to see more relevant map.


    Code:
    var map = new nokia.maps.map.Display(mapContainer, {
    	// initial center and zoom level of the map
    	center: [64.500, 26.000],
    	zoomLevel: 5,
    	  components: [ 
                // Behavior collection
                new nokia.maps.map.component.Behavior(),
                new nokia.maps.map.component.ZoomBar(),
                new nokia.maps.map.component.Overview(),
                new nokia.maps.map.component.TypeSelector(),
                new nokia.maps.map.component.ScaleBar(),
    			new nokia.maps.map.component.ContextMenu(),
    
    // is something like this possible with zoomLevel in the components section???
    			new nokia.maps.positioning.component.Positioning({zoomLevel: 10})
    			],
    			
    });
    Last edited by jasfox; 2013-07-11 at 12:55. Reason: Formatting

  2. #2
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Contol zooming when using Positioning

    No, the Positioning Component doesn't offer that sort of flexibility. The default components are typically "standard chrome" components with "standard" functionality - in this case zooming down to the accuracy circle of the positioning request - i.e. same job as the equivalent on here.com.

    That being said, there is no problem in creating your own custom component in the form of a clickable button, and for that button to do whatever you like. The example below copies code from the standard center the map on the device's position example, with one minor difference. The map.zoomTo() line has the second parameter as true rather than false - Which means the map will only zoom in far enough to maintain the previous center of the map as well. This will prevent the zoom reducing down directly to the accuracy circle. You could of course change the boundingBox instead to make it a fixed size or double the radius of the accuracy circle or whatever.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!--DVID=000019D0-->
    <HTML>
    <head>
    	<title></title> 
    	<link rel="stylesheet" href="css/style.css" />
    
    </head>
    <body>
    <div id="">
    	
    	<div id="mapContainer" style="width: 700px; height: 500px; position: absolute;" ></div>		
    </div>
    </body>
    	<script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all" charset="utf-8"></script>
    	<script type = 'text/javascript'>	
    /////////////////////////////////////////////////////////////////////////////////////
    // 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", "YOUR APP ID"); 
    			nokia.Settings.set( "authenticationToken", "YOUR TOKEN");
    			
    //			
    /////////////////////////////////////////////////////////////////////////////////////
    
    var mapContainer = document.getElementById("mapContainer");
    var infoBubbles = new nokia.maps.map.component.InfoBubbles();
    
    // Create a map inside the map container DOM node
    var map = new nokia.maps.map.Display(mapContainer, {
    	center: [0, 0],
    	zoomLevel: 3,
    	components: [
    		// We add the behavior component to allow panning / zooming of the map
    		new nokia.maps.map.component.Behavior(),new nokia.maps.map.component.TypeSelector(),new nokia.maps.map.component.ZoomBar(),
    		infoBubbles
    	]
    });
    
    function extend(B, A) {
    	function I() {}
    	I.prototype = A.prototype;
    	B.prototype = new I();
    	B.prototype.constructor = B;
    }
     
    var myCustomComponentSimple = function (callback) {
    	var myNode = document.createElement("div");	
    	this.callback = callback;	
    	this.getId = function() { return "MySimpleCustomComponent"; };	
    	this.attach = function(display) {
     
    var myHTML = '<div  id="myCustomComponentButton" style="position: absolute; left: 5px; top: 5px;' +
              'background: #ccc; border: 1px solid #000; padding: 10px;" />';
    	 
    		myNode.innerHTML = myHTML;
     
    		display.getUIContainer().appendChild(myNode);
    		if(!this.button) {
    			this.button =  nokia.maps.dom.EventTarget(
                                 document.getElementById(
                                         "myCustomComponentButton"));
    		}
     
    		this.button.addListener("click", this.callback);
    	};
    	this.detach = function(display) {
    		display.getUIContainer().removeChild(myNode);
    		this.button.removeListener("click", this.callback);
    	};
     
    	// Call the "super" constructor to initialize properties
    	nokia.maps.map.component.Component.call(this);
     
    };
    extend(myCustomComponentSimple, 
                nokia.maps.map.component.Component);
    
    
    var customControl = new myCustomComponentSimple(function(){ 
    	/* The positioning manager is only available if the browser used supports
     * W3C geolocation API
     */
    if (nokia.maps.positioning.Manager) {
    	var positioning = new nokia.maps.positioning.Manager();
    	
    	positioning.getCurrentPosition(
    		function (position) {
    			var coords = position.coords, 
    				accuracyCircle = new nokia.maps.map.Circle(coords, coords.accuracy);			
    			map.objects.add(accuracyCircle);
    			map.zoomTo(accuracyCircle.getBoundingBox(), true, "default");
    		}, 
    		// Something went wrong we wee unable to retrieve the GPS location
    		function (error) {
    			var errorMsg = "Location could not be determined: ";
    			
    			// We determine what caused the error and generate error message
    			if (error.code == 1) errorMsg += "PERMISSION_DENIED";
    			else if (error.code == 2) errorMsg += "POSITION_UNAVAILABLE";
    			else if (error.code == 3) errorMsg += "TIMEOUT";
    			else errorMsg += "UNKNOWN_ERROR";
    				
    				// Throw an alert with error message
    				alert(errorMsg);
    			}
    		);
    }
    		
    	});
    			map.components.add(customControl);
    
    
    
    
    	</script>
    </html>

Similar Threads

  1. how to contol the date format changes problem
    By tallapaneni in forum Symbian
    Replies: 2
    Last Post: 2008-02-06, 10:58
  2. Zooming in and Zooming out of Images
    By nicenouman in forum Mobile Java General
    Replies: 7
    Last Post: 2006-10-12, 07:06
  3. error while adding edwin contol
    By symbee in forum Symbian
    Replies: 10
    Last Post: 2006-07-19, 13:13
  4. Edwin contol in navigation pane
    By symbee in forum Symbian
    Replies: 0
    Last Post: 2006-07-08, 09:22
  5. Interface contol document 5110
    By henkbr in forum PC Suite API and PC Connectivity SDK
    Replies: 2
    Last Post: 2003-03-06, 15:02

Posting Permissions

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