Embed Maprosoft in Native iOS and Android Apps

Mobile Map Design Basics

The Maprosoft web application works well in mobile devices with "A-Grade" browsers. Maprosoft automatically detects mobile devices and optimises the user interface in various ways. There are, however, some things that should be kept in mind when determining the features to include in maps for mobile devices:

  • Although Maprosoft allows the creation of maps with many types of features on them, it is a good idea to keep them simple since mobile devices have smaller screens and less processing power than their desktop counterparts.
  • Due to the smaller screen sizes of mobile devices, it is most likely a good idea to hide the Map Toolbar for maps that have only a few types of spatial features on them.
  • When the Map Toolbar is hidden, all the data for the map is automatically downloaded after the map loads since there is no way for the user to control the downloading of the data. For this reason, keep in mind the amount of data allocated to a map intended for mobile use.

Browser Widgets

Mobile device SDKs generally provide a browser widget that can be used to embed the Maprosoft web application in applications. Maprosoft can be embedded into mobile applications in various ways by specifying the initial URL for the browser widget:

  • Embed a specific map: https://www.maprosoft.com/appmap?team=demo[?optional-parameters] Use the Map Builder Control Panel to specify these URLs.
  • Multiple Map Application: https://www.maprosoft.com/appmobile-app?team=demo

iOS Code

iOS applications can use the UIWebView which is based on the WebKit rendering engine.

Please refer to http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/Reference.html for further information.

Android Code

Android applications can use the android.webkit.WebView is also based on the WebKit rendering engine.

Here is the code in detail:

	
    private WebView buildCouncilMapServerWebView() {
    	final WebView myWebView = (WebView) findViewById(R.id.webview);
    	myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    	myWebView.setScrollbarFadingEnabled(false);

    	CouncilMapServerWebViewClient councilMapServerWebViewClient = new CouncilMapServerWebViewClient();
    	myWebView.setWebViewClient(councilMapServerWebViewClient);

    	String url = "https://www.maprosoft.com/app/mobile-app";
    	myWebView.loadUrl(url);
        
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBlockNetworkLoads(false);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setGeolocationEnabled(true);
        webSettings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
        return myWebView;
    }

    public class CouncilMapServerWebViewClient extends WebViewClient {

	    @Override
	    public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
	    	view.loadUrl(url);
	    	return true;
	    }

    }

	

Please refer to http://developer.android.com/reference/android/webkit/WebView.html for further information.