×

Discussion Board

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

    Question Restrict the map to the UK only

    Is there a way of restricting the map so only a certain area / country can be viewed when you’re panning around and zooming out?

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

    Re: Restrict the map to the UK only

    You can do that by adding a Listener to a series of map events and alter the center of the map to within a given bounding box. You can also stop a user from zooming out through observing the zoomLevel property


    Here is an example that restricts a map to central Europe, the center of the map cannot escape the box.:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
    		<title>Nokia Maps API Example: Restricted Area</title>
    		<!-- KML support is required here. -->
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
    		
    
    </head>
    		
    		
    <style type="text/css">
    			html {
    				overflow:hidden;
    			}
    			
    			body {
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    				width: 100%;
    				height: 100%;
    				position: absolute;
    			}
    			
    			#mapContainer {
    				width: 80%;
    				height: 80%;
    			}
    		</style>
    	</head>
    	<body>		
    		<div id="mapContainer"></div>
    		<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");
    //			
    /////////////////////////////////////////////////////////////////////////////////////	
    		</script>
    		<div id="uiContainer"></div>
    		<script>
    
    var mapContainer = document.getElementById("mapContainer");
    var map = new nokia.maps.map.Display(mapContainer, {
    	center: [51, 7],
    	zoomLevel: 6
    	});
    	
    map.addComponent(new nokia.maps.map.component.Behavior());	
    var dragger = map.getComponentById("panning.Drag");    
    	
    	
    // Set of initial geo coordinates to create the purple polyline
    var points = [
    		new nokia.maps.geo.Coordinate(47.4136, 5.9845),
    		new nokia.maps.geo.Coordinate(47.4136, 14.3671),
    		new nokia.maps.geo.Coordinate(54.8073, 14.3671),
    		new nokia.maps.geo.Coordinate(54.8073, 5.9845),
    		new nokia.maps.geo.Coordinate(47.4136, 5.9845)
    	];
    
    // Transparent purple polyline
    map.objects.add(new nokia.maps.map.Polyline(
    	points,
    	{	
    		pen: {
    			strokeColor: "#22CA", 
    			lineWidth: 5
    		}
    	}
    ));	
    	
    	
    	
    var restrict = function(evt) {	 
    
    	 var limits = {minLat: 47.4136, minLon: 5.9845, maxLat: 54.8073, maxLon: 14.3671};
    
      if (map.center.latitude < limits.minLat || map.center.longitude < limits.minLon || 
          map.center.latitude > limits.maxLat || map.center.longitude > limits.maxLon) {
    
          var latitude =  Math.max(Math.min(map.center.latitude, limits.maxLat), limits.minLat);
          var longitude = Math.max(Math.min(map.center.longitude, limits.maxLon), limits.minLon);    
          map.setCenter(new nokia.maps.geo.Coordinate(latitude,longitude));      
          evt.cancel();
      }
    }
    
    
    map.addListener("dragend", restrict);
    map.addListener("drag", restrict);
    map.addListener("mapviewchange", restrict);
    map.addListener("mapviewchangeend", restrict);
    map.addListener("mapviewchangestart", restrict);
    
    map.addObserver("zoomLevel", function(obj, key, newValue, oldValue) { if (newValue < 5) map.set("zoomLevel", 5);});
    	
    	
     </script>
    	</body>
    </html>

    There is also a custom control available: https://github.com/heremaps/examples...map-control.js
    usage: https://github.com/heremaps/examples...trict-map.html
    Last edited by jasfox; 2013-08-16 at 10:32.

  3. #3
    Registered User
    Join Date
    Jul 2013
    Posts
    5

    Thumbs up Re: Restrict the map to the UK only

    Hi Jason,

    Thanks for your answer. That’s exactly the sort of thing I was after.

    I’ve tweaked your example slightly and dropped some of the listeners so now the map isn’t quite so aggressive with ensuring you don’t see outside of the restricted area. You can now drag outside of the area (so there’s no immediate jerking back) but as soon as you release the mouse then the map snaps back, which ideal for what I’m after.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
        <title>Restricted Area</title>
        
        <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
        
        <style type="text/css">
            html {
                overflow: hidden;
            }
            
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: absolute;
            }
            
            #mapContainer {
                width: 80%;
                height: 80%;
            }
        </style>
    
    </head>
    <body>
        <div id="mapContainer">
        </div>
        <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");
            
            //			
            /////////////////////////////////////////////////////////////////////////////////////	
        </script>
        <div id="uiContainer">
        </div>
        <script type="text/javascript">
    
            var mapContainer = document.getElementById("mapContainer");
            var map = new nokia.maps.map.Display(mapContainer, {
                center: [54.4, -4],
                zoomLevel: 6
            });
    
            map.addComponent(new nokia.maps.map.component.Behavior());
    
            var mapLimits = {
                minimumLatitude: 49.810325,
                maximumLatitude: 59.530969,
                minimumLongitude: -8.200975,
                maximumLongitude: 2.165621
            };
    
            var points = [
    		    new nokia.maps.geo.Coordinate(mapLimits.minimumLatitude, mapLimits.maximumLongitude),
    		    new nokia.maps.geo.Coordinate(mapLimits.minimumLatitude, mapLimits.minimumLongitude),
    		    new nokia.maps.geo.Coordinate(mapLimits.maximumLatitude, mapLimits.minimumLongitude),
    		    new nokia.maps.geo.Coordinate(mapLimits.maximumLatitude, mapLimits.maximumLongitude),
    		    new nokia.maps.geo.Coordinate(mapLimits.minimumLatitude, mapLimits.maximumLongitude)
    	    ];
    
            map.objects.add(new nokia.maps.map.Polyline(
                points,
                {
                    pen: {
                        strokeColor: "#F336",
                        lineWidth: 5
                    }
                }));
    
            var restrict = function (evt) {
    
                if (map.center.latitude < mapLimits.minimumLatitude ||
                    map.center.longitude < mapLimits.minimumLongitude ||
                    map.center.latitude > mapLimits.maximumLatitude ||
                    map.center.longitude > mapLimits.maximumLongitude) {
    
                    var latitude = Math.max(Math.min(map.center.latitude, mapLimits.maximumLatitude), mapLimits.minimumLatitude);
                    var longitude = Math.max(Math.min(map.center.longitude, mapLimits.maximumLongitude), mapLimits.minimumLongitude);
    
                    map.setCenter(new nokia.maps.geo.Coordinate(latitude, longitude));
    
                    evt.cancel();
                }
            };
    
            map.addListener("dragend", restrict);
    
            map.addListener('mapviewchange', function (event) {
    
                // --------------------------------------------------------------------------------
                // A large number of mapviewchange events can be fired within the space of a second
                // so ensure any code executed here is performant and only run when the relievant
                // data item has actually changed.
                // --------------------------------------------------------------------------------
                if (event.data & event.MAPVIEWCHANGE_ZOOM) {
                    restrict(event);
                }
            });
    
            map.addObserver("zoomLevel", function (obj, key, newValue) {
                if (newValue < 6) {
                    map.setZoomLevel(6);
                }
            });
    
            // Using these listeners causes the map to jump around when dragging
            //map.addListener("drag", restrict);
            //map.addListener("mapviewchange", restrict);
            //map.addListener("mapviewchangeend", restrict);
            //map.addListener("mapviewchangestart", restrict);
    	
        </script>
    </body>
    </html>

Similar Threads

  1. Restrict FEP to mini qwerty
    By tamhanna in forum Symbian User Interface
    Replies: 0
    Last Post: 2009-12-12, 22:33
  2. restrict J2me TextField
    By faisal@aufait.in in forum Mobile Java General
    Replies: 4
    Last Post: 2009-06-12, 11:17
  3. restrict application uses
    By chandra1234 in forum Symbian
    Replies: 10
    Last Post: 2009-01-05, 21:34
  4. HELP!About restrict keyword in open c?
    By Greel in forum Open C/C++
    Replies: 1
    Last Post: 2008-11-11, 14:16
  5. Restrict to ask APN at flightmode
    By pedda.patti@ps.net in forum Mobile Java Networking & Messaging & Security
    Replies: 4
    Last Post: 2006-11-09, 02:26

Posting Permissions

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