Adding a shortcut icon to the home screen

To open Cadcorp SIS WebMap with a single tap, users can create a shortcut icon on the mobile device home screen.

Click here for more information on creating shortcuts on mobile devices.

Customising the shortcut icon

Five .png files in varying sizes are included in your WebMap installation.

16x16 pixels
24x24 pixels
32x32 pixels
48x48 pixels
256x256 pixels

Your device will automatically select the appropriate size icon to use. If however, you wish to use a different shortcut icon, create images at the sizes shown above.

iOS

Using an alternate shortcut icon(s)

On the server, navigate to the folder containing the mobile images (usually C:\inetpub\wwwroot\SISWebMap9.0\Mobile\img)
Place your custom single icon file or multiple icon files in this img folder.

Click here for information on configuring web applications in Safari.

Specifying a single shortcut icon

To use your own single icon, i.e. custom_icon.png, navigate to the WebMap folder (usually C:\inetpub\wwwroot\SISWebMap9.0\Mobile)
Open Map.aspx in Notepad or similar.
Delete the lines shown in blue and add the line shown in red:

<link rel="apple-touch-icon" sizes="16x16" href="img/16x16px.png">

<link rel="apple-touch-icon" sizes="24x24" href="img/24x24px.png">

<link rel="apple-touch-icon" sizes="32x32" href="img/32x32px.png">

<link rel="apple-touch-icon" sizes="48x48" href="img/48x48px.png">

<link rel="apple-touch-icon" sizes="256x256" href="img/256x256px.png">

<link rel="apple-touch-icon" href="img/custom_icon.png">

Save the Map.aspx file.

This custom_icon.png will now be used as the shortcut icon at its fixed size for all devices.

Specifying multiple icons for different device resolutions

Navigate to the WebMap folder (usually C:\inetpub\wwwroot\SISWebMap9.0\Mobile)
To specify multiple icons for different device resolutions, (for example to support both iPhone and iPad devices) retain the "sizes=" attribute to each link element.
Change the lines:

<link rel="apple-touch-icon" sizes="16x16" href="img/16x16px.png">

<link rel="apple-touch-icon" sizes="24x24" href="img/24x24px.png">

<link rel="apple-touch-icon" sizes="32x32" href="img/32x32px.png">

<link rel="apple-touch-icon" sizes="48x48" href="img/48x48px.png">

<link rel="apple-touch-icon" sizes="256x256" href="img/256x256px.png">

to call the new icons, shown in red, for example:

<link rel="apple-touch-icon" sizes="16x16" href="img/custom_icon16x16.png">

<link rel="apple-touch-icon" sizes="24x24" href="img/custom_icon24x24px.png">

<link rel="apple-touch-icon" sizes="32x32" href="img/custom_icon32x32px.png">

<link rel="apple-touch-icon" sizes="48x48" href="img/custom_icon48x48px.png">

<link rel="apple-touch-icon" sizes="256x256" href="img/custom_icon256x256px.png">

Save the Map.aspx file.

This custom_icon.png will now be used at the appropriate resolution for all devices.

Android

Using an alternate shortcut icon(s)

On the server, navigate to the folder containing the mobile images (usually C:\inetpub\wwwroot\SISWebMap9.0\Mobile\img)
Place your custom single icon file or multiple icon files in this img folder.

Specifying a single shortcut icon

To use your own single icon, i.e. custom_icon.png, navigate to the WebMap folder (usually C:\inetpub\wwwroot\SISWebMap9.0\Mobile)
Open Map.aspx in Notepad or similar and locate the line

<link rel="manifest" href="mobileManifest.json">

You can use one of two methods to change the shortcut icon:
1. Leave the above line as is and edit the content of the supplied mobileManifest.json file (located in the same folder as Map.aspx).
2. Create a new manifest json file using a different shortcut name and/or calling different shortcut images.
  In this case change the above <link re= “manifest “ line to show the new manifest name, for example:
  <link rel="manifest" href="mobileNewManifest.json">

Editing mobileManifest.json/Creating a new manifest.json file

Open mobileManifest.json in Notepad or similar.
The mobileManifest.json file includes:

“name” – This is the name, or title, of the shortcut. This is supplied as “Web Map Layers Mobile” but can be changed to a new title, i.e. My WML app
“icons” – The customised icons to support a range of devices

Note: For a description of all the features controlled by a manifest.json file see https://developer.chrome.com/multidevice/android/installtohomescreen

The modified mobileManifest.json file, edited to use a different “name” and different “icons”, may become as shown in the code below.

This is the supplied mobileManifest.json file:

{
	"name":"Web Map Layers Mobile",
	"display":"standalone",
	"description":"Web map layers for mobile devices",
	"lang":"en-GB",
	"orientation":"portrait",
	"icons":[
		{
			"src": "img/16x16px.png",
			"sizes": "16x16",
			"type": "image/png"
		},
		{
			"src": "img/24x24px.png",
			"sizes": "24x24",
			"type": "image/png"
		},
		{
			"src": "img/32x32px.png",
			"sizes": "32x32",
			"type": "image/png"
		},
		{
			"src": "img/48x48px.png",
			"sizes": "48x48",
			"type": "image/png"
		},
		{
			"src": "img/256x256px.png",
			"sizes": "256x256",
			"type": "image/png"
		}
	]
}

The following code is an example of a modified mobileManifest.json file. The example changes are shown in red:

{
	"name":"My WML app", - Note: this will be the new name for the shortcut icon
	"display":"standalone",
	"description":"WebMap 9 for mobile devices",
	"lang":"en-GB",
	"orientation":"portrait",
	"icons":[
		{
			"src": "img/custom_icon16x16.png",
			"sizes": "16x16",
			"type": "image/png"
		},
		{
			"src": "img/custom_icon24x24.png",
			"sizes": "24x24",
			"type": "image/png"
		},
		{
			"src": "img/custom_icon32x32.png",
			"sizes": "32x32",
			"type": "image/png"
		},
		{
			"src": "img/custom_icon48x48.png",
			"sizes": "48x48",
			"type": "image/png"
		},
		{
			"src": "img/custom_icon256x256.png",
			"sizes": "256x256",
			"type": "image/png"
		}
	]
}

Save the existing mobileManifest.json file or Save As for a new manifest file.