Version:

This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off
Take topic challenge

Supplemental Videos

Description

The Map component allows you to add a map similar to many popular map apps. This fully mobile responsive component includes additional dynamic layers, markers, and popup messages. You can see realtime status and locations for anything that has latitude and longitude values.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] There are a lot of ways to display information in Ignition and one of the components that is new in perspective is the map component. With it you can give your users a map similar to what you would find online or on your phone. They can move around and zoom in and out and it supports multi touch commands on a mobile device. You can even put markers and pop-ups on the map with additional information. Let's take a look. Here I have a map already configured on screen. If I go and put my designer into preview mode, you can see that I can click and drag around. I can zoom in and out, with the plus and minus buttons or with my mouse wheel and we can see in the properties here that I have some initial location like my center, latitude and longitude and my zoom and I also have the ability to control how I zoom. So whether the controls are on or off, if I can use my scroll wheel or double click and so on. Now the most important property on this component is the layers property. You can see down here, that it's a complex property and these little blue markers here mean that I already have binding set up. Let's take a look at one of the simple ones first. I'm going to expand the vector property and the circle property and you can see that I have one circle on my screen and I have a radius of 1000 and if I go to my circles here, then you can see we have latitude and longitude. So that's this blue circle right there. I also have a couple of pop-ups here. One for Highway 50 and one for Historic Folsom and you can see that they're bound to these check-boxes. If I go into my EUI property and then under pop-up then you can see I have my zero and one and each of these are bound on the enabled property and have our latitude and longitude showing. One being my being Historic Folsom and under content, I have just some simple text the words, Historic Folsom. Now I also have a more complex marker set up that's this one here. If I mouse over the marker you can see it says Inductive Automation on it and if I click on it then you can see that it pops up a special pop-up. This is in fact a whole new view that I have configured down below here. Now let's take a look at that marker. I can go into my marker property and you can see I've only got the one, so it's item zero. Its name's IA headquarters and it has the latitude and longitude. Now what makes this one particularly special is the pop-up property. Under pop-up and then content, then view you can see that I have a path to my page/HQ. And I even have some params in here that I can pass in. So what I can do, I can type in here, Global Headquarters and you can see that the text pops into my little pop-up. Now this is just starting to scratch the surface of what you can do with the map component. Any of this can be made dynamic by binding these properties individually or you can bind the entire UI property to something like a database table.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.