Developers

Omnis Technical Note TNJC0011May 2021

Using SVG icons for Map Markers

for Omnis Studio 10.2 or above
By Omnis Engineering

The JS Map control allows you to place a Google® Map onto a remote form to be used in your web and mobile applications. A map is a highly interactive UI element and can present location-based data in a very compact format – and as well as showing data, a map allows the end user to interact by clicking on markers and other controls adding to the richness of your app experience.

In the JS Map control you can set a location and the zoom level when the map is initialized, you can control the map type (map view or satellite) and the controls that are displayed, and you can setup default or custom map markers – these are all shown in the sample app in the Hub in the Studio Browser. The map markers can be one of a number of standard markers supplied by Google (the default is a map pin icon), or a custom icon from an iconset, and from Studio 10.2 you can use SVG image icons to set custom markers. We have used some Google ‘material’ icons (flower, ferris wheel & museum were downloaded from the Google icons website, and colors changed) for three custom markers on the following map:

The markers on a map are specified by assigning a list to the $mapmarkers property – the mapmarkers list can have up to six columns, as the following code shows:

Do iMapMarkers.$define(   iMarkerLatLong,iMarkerTitle,iMarkerTag,   iMarkerHtml,iMarkerIcon,iMarkerCustom)

The LatLong column is the Latitude:Longitude location for a marker, a text Title and Tag can be specified for each marker, plus you can add HTML content for the popup – the HTML can contain any standard HTML including heading tags, font tags, and links, but must be contained inside a <div> container. The HTML could be static code or built up dynamically from data in your code using a Text: command block and assigned to the marker HTML column.

The marker icon column is a URL to a PNG or SVG image stored in an iconset (if this column is blank or missing the default map pin icon is used). You can set the icon URL using the iconurl() function, which from Studio 10.2 onwards can take a character string to select an SVG image file (in previous versions you had to use an integer ID for the icon). You can specify a different image for each marker in the marker list. (If you leave the icon column blank, you can specify one of Google’s custom markers in the sixth column – this is described in the online docs.)

The following code creates markers for three famous tourist attractions in London – in this case, the British Museum, London Eye, and Hyde Park. The icons for the markers are SVG images based on Google ‘material’ icons and contained in a ‘maps’ iconset (this name must be added to the $iconsets library property); note you can use any of the SVG icons contained in the 'material' iconset already provided in Omnis. The iconurl() function is used to return a URL of the specified image, e.g. iconurl(‘museum’), so it can be rendered on the map inside the remote form in the browser.

Do iMapMarkers.$add("51.52004084080676:-0.1269136846592473",   "British Museum","British Museum","<div id='content'>   <a href='https://en.wikipedia.org/wiki/British_Museum' target='blank'>   <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/   British_Museum_%28aerial%29.jpg/250px-British_Museum_%28aerial%29.jpg'></a>   <font size='2' face='verdana,arial,helvetica,sans-serif'><h2>British Museum</h2>   <div id='bodyContent'><p>Great Russell Street,<br>London<br>WC1B 3DG</p>   </div></font></div>",iconurl('museum'),iSymbolCustom) Do iMapMarkers.$add("51.50392506284453:-0.11942495397774196",   "London Eye","London Eye","<div id='content'>   <a href='https://en.wikipedia.org/wiki/London_Eye' target='blank'>   <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/   London-Eye-2009.JPG/240px-London-Eye-2009.JPG'></a>   <font size='2' font face='verdana,arial,helvetica,sans-serif'><h2>London Eye</h2>   <div id='bodyContent'><p>Riverside Building,<br>County Hall,<br>London<br>SE1 7PB</p>   </div></font></div>",iconurl('ferris'),iSymbolCustom) Do iMapMarkers.$add("51.507863938143586:-0.16562146077641932",   "Hyde Park","Hyde Park","<div id='content'>   <a href='https://en.wikipedia.org/wiki/Hyde_Park,_London' target='blank'>   <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/   Hyde_Park_London_from_the_air.jpg/300px-Hyde_Park_London_from_the_air.jpg'></a>   <font size='2' font face='verdana,arial,helvetica,sans-serif'><h2>Hype Park</h2>   <div id='bodyContent'><p>Hyde Park<br>London</p></div></font>   </div>",iconurl('flower'),iSymbolCustom) Do $cinst.$objs.map.$mapmarkers.$assign("iMapMarkers") Calculate $cinst.$objs.map.$fitmaptomarkers as 1

Setting up the demo library

We have provided the above code in a library and the iconset needed for the markers: mapmarkers.zip

In order to use the JS Map control, you must obtain a ‘Map JavaScript API’ key from Google and add it to the $apikey property of the map control. To get the API key you must have a Google Cloud Platform account (you can setup a trial account with free credits) which must be activated to use the Google Map APIs (without activation the API key will not work). You can then create the API key under the Credentials option in the console, which then needs to be added to the $apikey of the JS Map control in the map1 remote form. You then need to place the ‘maps’ icon set folder in the Omnis tree inside the ‘iconsets’ folder.

When you have setup the API key and the iconset, re-open the library, and the map remote form will be opened in your default web browser. The map will be opened and centered on London and the three custom map markers will be displayed (flower, ferris wheel & museum). You can click on a map marker and the HTML content is displayed in the popup, e.g. the London Eye:

If the map is not displayed, check you have entered the API key in the $apikey property for the map, and if the map is greyed out check that the APIs are activated in your Google Cloud account. If the map markers are not displayed, check you placed the ‘maps’ iconset in the Omnis iconsets folder; you may need to close and restart Omnis to load the new iconset.

If you use SVG icons and you deploy your application, you need to remember to copy all your own icons (all iconset folders) to the Omnis Server tree, which you can manage in Studio 10.2 using the Deployment tool.

For more information about map markers or using the JS Map control, look at the Online docs: https://omnis.net/developers/resources/onlinedocs/WebDev/03jscomps.html#map-markers