In Omnis Studio 8.1 we introduced the ability to set a number of layout breakpoints in a remote form so you can implement responsive design in your web and mobile apps. This means you can design a number of different layouts in the same remote form and when the form is displayed on different devices the layout will change according to the width of the current device. For example, one layout will be shown on a mobile phone, then a different layout in the same form will be shown on a tablet. When you design a remote form you can add controls to one layout and then rearrange or resize the same controls on the other layouts.
Or to go straight to the JS Comps Gallery click on:
Or use the shortcut:
Mapping it with Studio 8.1
You can try the various options including changing the Zoom level, change the map type or markers, hide and show the controls, and add your own marker with a mouse click (or tap on a mobile or tablet). If you drag the map towards Central America you can see that we have drawn the ‘Bermuda Triangle’, which uses the new polygon feature. All these features demonstrate the capabilities of the Omnis JS Map Component which is based on the Google Map API.
To view the mobile layout of the gallery form, you can resize your desktop browser (make it a lot narrower), or you can open the gallery page on your mobile phone or tablet using the shortcut:
On your mobile or tablet (or resized desktop browser), scroll the list and select ‘Map’ and the JS Map subform will glide into view: you can use the Back button in the form to get back to the main list.
New Features in the JS Map Control
The JS Map component supports Google Geocoding which allows you to convert a street address into a geographic coordinate like latitude and longitude, which you can use to place a marker on a map, or center the map. You can download the new example JS Map library from the gallery page: note this must be opened in Studio 8.1.1 (which you can get here: www.omnis.net/download).
To use the Geocoding function, you need to access the Geocoding API from Google which itself requires a separate API Key, in addition to the Maps API key, which you can obtain from Google (note that you need to get these keys from Google to use the Omnis JS Map control in design mode or runtime, and that you must comply to the terms and conditions of the Google mapping API license). You need to place the main Google API key in the $apikey property and the Geocoding API key in the $userinfo property of the JS Map control which the example library reads in.
Assuming you have Omnis Studio 8.1.1, have downloaded and opened the JS Map example library, and that you have obtained and added the API keys from Google, you can open/Test the remote form on your desktop computer (using Ctrl-T or right-click and Test Form). If you click on the Search button and enter a postal address, the app will place a marker at that location, and clicking on the marker will show the latitude:longitude of that position (you can do the same in the online demo as well, of course…).
Try Omnis Studio 8.1.1
If you would like to try any of the libraries from the new JS Comps Gallery, you will need to download the latest Omnis Studio, which is version 8.1.1, which has a few updates and fixes from the original Studio 8.1. Get Omnis Studio 8.1.1 here: