Adding a shortcut icon to the home screen

Changing the shortcut icon

Shortcut icon

In order for the user to gain quick access to the Web Map Layers 8.0 application you can create a shortcut icon on the mobile device home screen. This has the advantage of taking the user directly to the mapping and will utilise the full screen on the device.

If the user adds a shortcut icon using the supplied files they will see the following icon on the home screen:

Five .png files are provided of this icon in each of the following image sizes:

16x16 pixels

24x24 pixels

32x32 pixels

48x48 pixels

256x256 pixels

The device will automatically select the appropriate size icon to use.

If this icon image is acceptable for your use you need take no further action and the icon can be added to the home screen by the user.

If you wish to use a different shortcut icon you must use your own images, or create new images, at the sizes shown above.

The shortcut icon will have the default "Cadcorp Web Map Layers" icon name, this can also be changed if required.

See below for details of these options.

Note: The procedure to change the shortcut icon is different between iOS and Android operating systems.

For full details of configuring web applications see https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

iOS

Changing the shortcut icon

Placing the replacement shortcut icon(s) in the Mobile folder

On the server go to the folder containing the mobile images, typically:

C:\inetpub\wwwroot\WebMapLayers\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

Go to the WebMapLayers folder on the server, typically:

C:\inetpub\wwwroot\WebMapLayers\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

Go to the WebMapLayers folder on the server, typically:

C:\inetpub\wwwroot\WebMapLayers\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

Changing the shortcut icon

Placing the replacement shortcut icon(s) in the Mobile folder

On the server go to the folder containing the mobile images, typically:

C:\inetpub\wwwroot\WebMapLayers\Mobile\img

Place your custom single icon file or multiple icon files in this img folder.

Specifying a single shortcut icon

Go to the WebMapLayers folder on the server, typically:

C:\inetpub\wwwroot\WebMapLayers\Mobile

Open Map.aspx in Notepad or similar.

Locate the line:

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

You can use one of two methods to change the shortcut icon:

Leave the above line as is and edit the content of the supplied mobileManifest.json file (located in the same folder as Map.aspx).

or
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

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":"Web map layers 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.

Send comments on this topic.