API data with google maps

Wappler General
1

I have a page I am testing. It is using the REST/curl api connector to the data. The data seems to collect correctly. If the data {{out}} returned is 1 I want the map icon to be red, if it returns a 0(zero) I want the map icon to be green. I have test value under the main map at top that shows the value that is being returned. So I know what my value being returned is. Wondering what I am doing wrong? On the show/hide in the dynamic attributes I have it set like this:

alertIndicator.data.out == 1

Seems legit, but I can’t work it out. Maybe I am missing something easy? (I usually am)

page is here: http://docklifeguard.com/remotemonitoringtest.asp

I’ve tried messing with the spaces in the show also, don’t know if that matters?
alertIndicator.data.out == 1
alertIndicator.data.out== 1
alertIndicator.data.out==1

the right, and two bottom dashboards and the maps on them I am not dealing with, ie I’m only worried about the map that is next to the dock lifeguard graphic.

Thanks for any direction. I love the api connector!

2

I think I follow what you mean, ignoring the background info you want the map pin to change colour dependent on the value of the returned variable “alertIndicator.data.out”
Not modelled this but on a quick look over:

your code is

            <dmx-google-maps-marker id="marker1" latitude="38.1813687" longitude="-92.6306522" type="green" dmx-show="alertIndicator.data.out == 1"></dmx-google-maps-marker>
            <dmx-google-maps-marker id="marker2" latitude="38.1813687" longitude="-92.6306522" dmx-hide="alertIndicator.data.out == 0" ></dmx-google-maps-marker>

So in line 1 the green marker will show if alertIndicator.data.out == 1
In line 2 the pointer is hidden if alertIndicator.data.out == 0

Following that logic

if alertIndicator.data.out == 1
marker1 is shown
marker 2 is not hidden i.e. shown

if alertIndicator.data.out == 0

marker1 is hidden
marker2 is hidden

Therefore I suggest you change line 2 to

<dmx-google-maps-marker id="marker2" latitude="38.1813687" longitude="-92.6306522" dmx-show="alertIndicator.data.out == 0" ></dmx-google-maps-marker>

This should invert the logic of line 2

If that doesn’t work just shout

3

I’ll try that. But I have tried about every version I can think of. I won’t be back on that job till wed. I’ll give it a try. When something doesn’t work and i’ve tried a bunch of stuff, by the time I get to post to the forum, sometimes things have gotten switched around. But I will let you know. Thanks

4

ok, I’m back on troubleshooting this today. The logic changes didn’t change anything. I believe I had the correct logic there at one point, but I get frustrated switching stuff around testing and when I finally submit to the forum I miss a change in the code, but anyways…

I tried just adding a standard value and then check against that, thinking something might be funky with my api server connect. This also didn’t work. I’m wondering if there is some bug with the google map extension with show/hide?

<dmx-google-maps id="maps1" latitude="38.1812891" height="900" longitude="-92.6327083" zoom="12" maptype-control="true" scrollwheel="true" scale-control="true" zoom-control="true">
        <dmx-google-maps-marker id="marker1" latitude="38.1813687" longitude="-92.6306522" type="green" dmx-show="alertIndicator.data.out==1"></dmx-google-maps-marker>
        <dmx-google-maps-marker id="marker2" latitude="38.1813687" longitude="-92.6306522" dmx-show="alertIndicator.data.out==0"></dmx-google-maps-marker>
      </dmx-google-maps>
      <p>Alarm Indicator: {{alertIndicator.data.out}}</p>

Any ideas? @teodor @george

I also created a more streamlined page to troubleshoot
http://docklifeguard.com/remotemonitoringtest2.asp

5

Assuming the below is correct

Rather than showing/ hiding two different markers why not toggle the colour of a single marker based on the value
I THINK the syntax would be (sorry not in position to test) something like

<dmx-google-maps-marker id="marker1" latitude="38.1813687" longitude="-92.6306522" dmx-bind:type="alertIndicator.data.out==1?'red':'green'"></dmx-google-maps-marker>

I am sure one of the wappler team can clarify the syntax if i got it wrong

6

Ok, I tried that still only shows the red marker and doesn’t change if the value changes.

Created a page with this code on it:
http://docklifeguard.com/remotemonitoringtest3.asp

<dmx-google-maps-marker id="marker1" latitude="38.1813687" longitude="-92.6306522" dmx-bind:type="alertIndicator.data.out==1 'red':'green'" dmx-show="alertIndicator.data.out==1"></dmx-google-maps-marker>
7

I’m getting this error in the browser, so I guess my syntax isn’t correct yet?

parser.js:384 Error: Lexer Error: Unexpected token ‘’’ at column 27 in expression [alertIndicator.data.out==1 ‘red’:‘green’]

8

Your expression is missing the ?.

alertIndicator.data.out == 1 ? 'red' : 'green'
9

When I change the code to that @patrick then I get this error in browser

googleMapsMarker.js:77 Uncaught TypeError: this.setIcon is not a function
at n.update (googleMapsMarker.js:77)
at n.$update (BaseComponent.js:303)
at BaseComponent.js:306
at Array.forEach ()
at n.$update (BaseComponent.js:305)
at BaseComponent.js:306
at Array.forEach ()
at n.$update (BaseComponent.js:305)
at Object.dmx.appConnect (appConnect.js:65)
at HTMLDocument. (appConnect.js:74)

<dmx-google-maps-marker id="marker1" latitude="38.1813687" longitude="-92.6306522" dmx-bind:type="alertIndicator.data.out == 1 ? 'red' : 'green'"></dmx-google-maps-marker>
10

Try changing ‘red’ to somethingelse in the wappler list, say ‘orange’. It could be because ‘red’ is not in the list or alternatively set red to ‘’ (empty string) instead

11

yeah I tried that too.

12

That error is a bug, try this update.

dmxGoogleMaps.zip (6.5 KB)

1 Like
13

@patrick you are the man! That fixed it and its working as expected.

14

now I just gotta figure out how to make this work with custom map pins…