JavaScript Map Control in Omnis Studio 8.0.3

Omnis Studio 8.0.3 introduced a number of enhancements including encryption for SQLite databases, dictation support for entry fields and Apple Finder events on macOS, as well as extended support for Google Maps, allowing you to add a larger variety of map markers (circles, arrows) and polygons to maps in the JavaScript Client. The JS Map control has existed in Omnis for a while now, but with these latest enhancements the map control provides a very interactive, visually rich and customisable component for providing location-based services in your web and mobile apps.

In previous versions of Omnis you could add your own icon markers in the JS Map control, by assigning an icon URL in the fifth column of the map marker list, however in Omnis Studio 8.0.3 you can assign an alternative marker icon or symbol, including map markers from the Google maps API, by adding a sixth column to the marker list (and omitting the fifth column). In addition to standard Google markers, such as various arrows & circles, you can use an SVG notation path to define any shape, such as a five-pointed star, which requires 10 points to define its shape (you can change the markers to stars in the JS Map example: see the pic accompanying this post):

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

; iMarkerCustom could be defined as “path:M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z|fillColor: yellow|fillOpacity:0.75| scale: 0.2|strokeColor:orange|strokeWeight: 1|anchor:122,115”)

In addition to icons and standard map markers, you can add polygons or irregular shapes to maps in the JS Map control in Studio 8.0.3. The new property $mappolys specifies the data name of a list variable which contains the definition of each polygon or shape. For example, the following code draws the Bermuda Triangle on the map (see the JS Map example):

Do iPolyMarkers.$define(
iPolyLatLong,iPolyStroke,iPolyOpacity,iPolyWeight,iPolyFill,iPolyFillOpacity,iPolyTag)

Do iPolyMarkers.$add(
"25.774,-80.190|18.466,-66.118|32.321,-64.757|25.774,-80.190","#FF0000","0.8","3","#FF0000","0.35","Bermuda Triangle”)

There is a JS Map example app in the JavaScript Component Gallery on the Omnis website (http://tinyurl.com/jsgallery8) which has been updated and now includes some of the new markers and polygons: you can view the new features online, or you can download the library and try it for yourself in Studio 8.0.3 (note you’ll need an API key from Google to use the JS Map control in Omnis).

For more information about the JS Map Control, including all the new features, please take a look at Chapter 3 in the ‘Creating Web & Mobile Apps’ manual on the Omnis website:

http://www.omnis.net/documentation/webdev/index.jsp?detail=03jscomps.html#map-control

0 Comments

Leave a reply

© Omnis Software Ltd 2017 - Help with setup and design by Ädelfors Consult ABSweden Disclaimer: Omnis Software disclaims any responsibility for or liability related to Software, or any content or advice, obtained through this site. IN NO EVENT WILL OMNIS SOFTWARE BE LIABLE FOR ANY INDIRECT, PUNITIVE, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES HOWEVER THEY MAY ARISE AND EVEN IF OMNIS SOFTWARE HAS BEEN PREVIOUSLY ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

Log in with your credentials

or    

Forgot your details?

Create Account