Help Using <ma-map & <info-window

Phillip Weeks

So I really cannot figure out why some of this works and some of it does not work.
If I put the two expressions one after the other the value outputs correctly.
If I remove either of these expressions for one variable no value will display.
If I try to put either expression in as an image parmeter it will not work but works if I hard code it in. What in the world is going on?

  <ma-map id="b6d480d5-6d25-4f07-8726-f585b45ffdfa" lat="myValue.lat" long="myValue.lon" map-type="HYBRID" info-window-theme="dark" center="[44.654224,-63.586408]" desktop-height="800px" mobile-height="600px" zoom="13" style="width: 50%; height: 0px;">
                    <marker id="marker1"  position="{{myValue.lat}},{{myValue.lon}}"  icon="{url:'/rest/v2/file-stores/public/Thermostat/red-circle-xxsmall.png'}" draggable="false" on-click="$parent.$ctrl.toggleInfoWindow('Info1', 'marker1')">
                    </marker>
                    <info-window id="Info1">    
                        <div style="font-size: 10px; font-weight: bold; font-family: sans-serif; text-align: center; font-style: normal; line-height: 14px; background-color: lighblue; color: red">
                            <center> 
                                         {{myItem.jaonData.clientname}}  
                                         {{myValue.clientname}}
                                         <br>
                                         {{myItem.jaonData.tonnage}}  
                                         {{myValue.tonnage}}
                                         &nbsp;Ton Unit
                                         <br>
                                         {{myItem.jaonData.installpic}}  
                                         {{myValue.installpic}}
                                         <br>
                                         {{myItem.jaonData.phone}}  
                                         {{myValue.phone}}
                                         <br>
                                         {{myItem.jaonData.address}}  
                                         {{myValue.address}}
                                         <hr>
                                <img width="80%" id="22b873fe-0514-48cc-9c29-c5ba0276673b" src="{{myItem.jaonData.installpic}}"></img>
                            </center>
                        </div>
                        </info-window>
                    
                   </ma-map>

0_1565028816541_3451342d-465e-472a-b2d4-744a5fb37ce7-image.png

and hardcoded...

   <ma-map id="b6d480d5-6d25-4f07-8726-f585b45ffdfa" lat="myValue.lat" long="myValue.lon" map-type="HYBRID" info-window-theme="dark" center="[44.654224,-63.586408]" desktop-height="800px" mobile-height="600px" zoom="13" style="width: 50%; height: 0px;">
                    <marker id="marker1"  position="{{myValue.lat}},{{myValue.lon}}"  icon="{url:'/rest/v2/file-stores/public/Thermostat/red-circle-xxsmall.png'}" draggable="false" on-click="$parent.$ctrl.toggleInfoWindow('Info1', 'marker1')">
                    </marker>
                    <info-window id="Info1">    
                        <div style="font-size: 10px; font-weight: bold; font-family: sans-serif; text-align: center; font-style: normal; line-height: 14px; background-color: lighblue; color: red">
                            <center> 
                                         {{myItem.jaonData.clientname}}  
                                         {{myValue.clientname}}
                                         <br>
                                         {{myItem.jaonData.tonnage}}  
                                         {{myValue.tonnage}}
                                         &nbsp;Ton Unit
                                         <br>
                                         {{myItem.jaonData.installpic}}  
                                         {{myValue.installpic}}
                                         <br>
                                         {{myItem.jaonData.phone}}  
                                         {{myValue.phone}}
                                         <br>
                                         {{myItem.jaonData.address}}  
                                         {{myValue.address}}
                                         <hr>
                                         <img  width="80%" id="22b873fe-0514-48cc-9c29-c5ba0276673b" src="{{'/rest/v2/file-stores/public/Res_Client_Pics/SBUTLER1.jpg'}}"></img>             
                                         
                            </center>
                        </div>
                        </info-window>
                    
                   </ma-map>

0_1565027932832_35d2d512-060b-4d2d-8d04-d331148e1dc8-image.png

iperry

Hi Phillip,

This may/may not be of help but this looks very similar to a problem I had:
https://forum.infiniteautomation.com/topic/3721/confusing-behaviour-using-json-store-and-ng-map-info-window

I don't have any updates on my issue there as other things became priority. heh

Thanks
Ian

Jared Wiltshire

Guys the ngMap library that underpins the ma-map component is really a bit crappy. I have definitely seen strange inexplicable behaviors like this from it in the past. I might create a new component that uses OpenStreetMap instead of Google Maps. Is satellite imagery important for either of you?

Anyway @Phillip-Weeks the only things I can suggest are

Reduce your code and produce a complete minimal example that produces the problem
Compare your code to examples at https://ngmap.github.io/
Use ng-src for your image not src - https://docs.angularjs.org/api/ng/directive/ngSrc
Your src attribute contains jaonData not jsonData

Phillip Weeks

Strangely enough I had it working with a {{'path'+mypoint.deviceName}} inside the image tag and I could see the all the object inside the info-window. It was dynamically building a filepath out of the DSname and working great. I changed the structure of a few md-cards, and some style stuff and before I realized scope was broken again without doing anything inside the <ma-map section. So something is very odd about it for sure. Is there a way to copy a point variable to a <script> variable?

Jared Wiltshire

@phillip-weeks said in Help Using <ma-map & <info-window:

Is there a way to copy a point variable to a <script> variable?

No and I would strongly recommend against trying anything along these lines.

Also I forgot to mention that I noticed this $parent.$ctrl.toggleInfoWindow('Info1', 'marker1')". It is poor practice to access the parent scope in this way and usually indicates that something is structured wrong.

Phillip Weeks

Interestingly enough Jared I got the info-window working with dynamic content in a separate dashboard using a querystring but if I call this db from another db using its ui-state, the dynamic content breaks as the info-window loses scope on the variables for some reason? If I refresh the window it restores the scope and it can display the dynamic content. So I dunno what it could be, i's curious and frustrating. :)

Jared Wiltshire

@Phillip-Weeks @iperry

There is a new component for displaying maps in the latest UI module release (v3.6.5). It displays maps from OpenStreetMap by default but will use Mapbox if you supply an access token in the UI settings page.

Here's a quick demo page -

<div class="ma-designer-root" id="dd1f477d-71b6-4b64-b78e-8071fdbdb4e9" style="width: 1200px; height: 800px; position: relative;" ng-init="page = {center: {lat:40.0150, lng:-105.2705}, zoom: 13, markers: [{coords: '40.0150,-105.2805'}, {coords: '40.0250,-105.2705'}, {coords: '40.0050,-105.2505', lightOn:true}], tooltip: 'I am a draggable marker', marker: [40.0120,-105.2705], showMarker: true, rectColor: 'red'}">
    <ma-tile-map id="3cedab37-da3d-4cd7-9f92-bc9bff377f31" style="position: absolute; width: 800px; height: 600px; left: 30px; top: 152px; z-index: 1;" center="{lat: page.center.lat, lng: page.center.lng}" zoom="page.zoom" options="{attributionControl: true}" on-move="page.center = $center; page.zoom = $zoom" show-location="page.showLocation" tile-layers="[]" automatic-tile-layers="false">
            
        <ma-tile-map-tile-layer tile-layer-id="mapbox.streets" name="Mapbox Streets"></ma-tile-map-tile-layer>
        <ma-tile-map-tile-layer tile-layer-id="openstreetmap" name="OSM"></ma-tile-map-tile-layer>
        <ma-tile-map-tile-layer tile-layer-id="mapbox.satellite" name="Mapbox Satellite" enabled="true" ng-if="page.satelliteLayer"></ma-tile-map-tile-layer>
        
        <ma-tile-map-layer name="Shapes" enabled="true">
            <ma-tile-map-circle coordinates="::{lat:40.005, lng:-105.265}" options="{radius: 500, color: 'green', fillColor: 'green'}" tooltip="Circle tooltip">Circle popup contents <div ng-click="$circle.setStyle({fillColor: 'red'})">Set red</div></ma-tile-map-circle>
            <ma-tile-map-rectangle bounds="::[{lat:40.0132, lng:-105.322},{lat:39.996, lng:-105.306}]" options="{color: page.rectColor, fillColor: page.rectColor}" tooltip="Rectangle tooltip">Rectangle popup contents</ma-tile-map-rectangle>
            <ma-tile-map-polygon coordinates="::[{lat:40.043, lng:-105.230},{lat:40.037, lng:-105.239},{lat:40.033, lng:-105.222}]" tooltip="Polygon tooltip">Polygon popup contents</ma-tile-map-polygon>
            <ma-tile-map-polyline coordinates="::[{lat:39.997, lng:-105.231},{lat:39.985, lng:-105.232},{lat:39.980, lng:-105.222}]" options="::{color: '#a233e4'}" tooltip="Polyline tooltip">Polyline popup contents</ma-tile-map-polyline>
        </ma-tile-map-layer>
        
        <svg id="my-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
        
        <div ng-init="page.lightOnIcon = $leaflet.icon({iconUrl: '/ui/img/ligthbulb_on.png', iconSize: [48,48], iconAnchor: [24,48], popupAnchor: [0,-48]})"></div>
        <div ng-init="page.lightOffIcon = $leaflet.icon({iconUrl: '/ui/img/ligthbulb_off.png', iconSize: [48,48], iconAnchor: [24,48], popupAnchor: [0,-48]})"></div>
        
        <ma-tile-map-marker ng-repeat="m in page.markers" coordinates="m.coords" on-click="page.selected = $coordinates; m.lightOn = !m.lightOn" icon="m.lightOn ? page.lightOnIcon : page.lightOffIcon">{{m.coords}}</ma-tile-map-marker>
        
        <ma-tile-map-marker ng-if="page.showMarker" coordinates="[page.marker[0], page.marker[1]]" tooltip="{{page.tooltip}}" on-drag="page.marker[0] = $coordinates.lat; page.marker[1] = $coordinates.lng" options="{draggable: true}" on-click="page.selected = $coordinates">
            <div>The map center is {{$map.getCenter()}}</div>
            <div>The zoom level is {{$map.getZoom()}}</div>
            <div><em ng-click="$marker.closePopup()">Close popup</em></div>
        </ma-tile-map-marker>
    </ma-tile-map>
    <md-switch id="81aa3202-eda2-41d4-b2bc-e33b940ee3b8" style="position: absolute; left: 548px; top: 66px;" ng-model="page.showMarker">Show marker</md-switch>
    <md-input-container id="0630f237-dffc-464b-9c7d-a25e23e0d39c" style="position: absolute; left: 379px; top: 60px;">
        <label>Tooltip</label>
        <input ng-model="page.tooltip">
    </md-input-container>
    <md-slider id="6082cd89-d186-422a-b578-cea2702899c0" style="position: absolute; left: 206px; top: 152px; width: 400px;" md-discrete="" ng-model="page.zoom" step="1" min="0" max="18"></md-slider>
    <md-input-container id="5bb31ffa-8888-4fa3-a359-5abb0fb5f4c9" style="position: absolute; left: 41px; top: 5px;">
        <label>Map centre latitude</label>
        <input ng-model="page.center.lat" type="number" step="0.01">
    </md-input-container>
    <md-input-container id="66f1bedd-fd3f-4477-8593-c092daa743c5" style="position: absolute; left: 210px; top: 5px;">
        <label>Map centre longitude</label>
        <input ng-model="page.center.lng" type="number" step="0.01">
    </md-input-container>
    <md-input-container id="b5a634c0-2cc4-48e7-9ff5-e28781232975" style="position: absolute; left: 41px; top: 60px;">
        <label>Marker latitude</label>
        <input ng-model="page.marker[0]" type="number" step="0.01">
    </md-input-container>
    <md-input-container id="4b2de91d-ece9-4edb-8ac2-c9469045d3a4" style="position: absolute; left: 210px; top: 60px;">
        <label>Marker longitude</label>
        <input ng-model="page.marker[1]" type="number" step="0.01">
    </md-input-container>
    <div id="d01d0a7a-ee67-4f1a-854d-fb8cdf4b69f2" style="position: absolute; left: 179px; top: 222px; width: 374px; height: 43px; z-index: 2; color: rgb(51, 51, 51); font-size: 20px; font-weight: bold;" ng-show="page.selected">You selected the marker at {{page.selected}}</div>
    <md-button id="87cd5f8d-9a29-43f6-8ad3-723b1212fa7e" style="position: absolute; left: 560px; top: 6px;" ng-click="page.showLocation = {setView: true}">Show location</md-button>
    <md-button id="66a002a5-4c88-408e-9dcc-874f6a9dd905" style="position: absolute; left: 669.641px; top: 6px;" ng-click="page.showLocation = false">Hide location</md-button>
    <ma-color-picker id="ec6dfa5c-1109-4bca-9479-a8c2d4892935" ng-model="page.rectColor" style="position: absolute; left: 770px; top: 88px;"></ma-color-picker>
    <md-switch id="ae28fe7b-1a1b-495d-94e0-5ef233e3a814" style="position: absolute; left: 791.891px; top: 2px;" ng-model="page.satelliteLayer">Show satellite layer</md-switch>
</div>

jflores13

@jared-wiltshire I'm trying this on UI 3.6.6, but nothing loads when I open the page. Strangely, it does appear and work in the preview while I'm editing it, in the Edit Pages section.
To try this, I just copied the above code into a new blank page, then I also tried putting it inside of a mango card, but it's still not showing anything, not even the top bar or the side menu.
Am I doing something wrong? Thanks in advance.

jflores13

@jflores13 @Jared-Wiltshire I kept playing with it, and discovered that it does work when I place the demo page in the Root (Top Level), but it still hides the top bar and the side menu. Also, as soon as I tell the page it has a parent, it stops working completely.

Jared Wiltshire

@jflores13 said in Help Using <ma-map & <info-window:

I also tried putting it inside of a mango card,

You mean in a md-card? I am not sure what a mango card is.

@jflores13 said in Help Using <ma-map & <info-window:

Am I doing something wrong? Thanks in advance.

It doesn't appear so. If you copied the above code into a page it should just work, regardless of if you set a parent menu item or not.

@jflores13 said in Help Using <ma-map & <info-window:

it does work when I place the demo page in the Root (Top Level), but it still hides the top bar and the side menu. Also, as soon as I tell the page it has a parent, it stops working completely.

If you set the menu item for the page to be Root (Top Level) it then the page will not have the side menu or top toolbar. This is how it is supposed to work.

I can't reproduce your issue, it works for me no matter what the menu item's parent is.

Do you have any errors in your console?

jflores13

@jared-wiltshire Hey, Jared. Thanks again for the help.

Sorry, I don't know what I meant. Yes, an md-card. I stopped using that though, with the same results.

True about the Root level, I didn't notice that before. Changed it to UI and the menu and top bar appeared again.

This is very strange then, because it even got worse. It was still not working for me under another level, and the console was giving me no errors, only CSS warnings, but those also appeared when the page actually loaded.

I noticed the parent item was Root level, so I changed that to UI to see if it worked under it now and Bam! Catastrophe. Lots of problems unfolded.

First of all, I noticed that my left menu went completely blank.

I wanted to change back the item's parent (for this, I had to type administration/edit-pages into the URL because the button is gone) to see if that solved the issue, but the "Add/edit menu item" stopped working as well. Every time I click it, the console gives me the following error:

//13:51:14.894 TypeError: "t.item is undefined"
    e http://192.168.100.144/ui/mangoUi.js?v=249dffdecf94adf9296c:1
    e http://192.168.100.144/ui/mangoUi.js?v=249dffdecf94adf9296c:1
    menuHierarchy http://192.168.100.144/ui/mangoUi.js?v=249dffdecf94adf9296c:1
    combineMenuItems http://192.168.100.144/ui/mangoUi.js?v=249dffdecf94adf9296c:1
    getMenu http://192.168.100.144/ui/mangoUi.js?v=249dffdecf94adf9296c:1
    u http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:78
    u http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:78
    $digest http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:78
    $apply http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:78
    compile http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:78
    dispatch http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39
    handle http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39
mangoUi~ngMango~ngMangoServices.js:78:78706

I don't know what's going on, but I'm scared. I tried trashing the menu item that started the problem, but it wasn't solved.

Tried powercycling the MangoES but nothing changes, still blank side menu and weird behaviour in general. Everything is taking way longer to load. Also, in the new data sources page, now my data sources are "not supported yet", not even the virtual data sources. I get multiple errors like this one when loading a data source's page:

14:27:39.516 Failed to load AMD module modules/egauge/web/angular/egauge Error: "Load timeout for modules: modules/egauge/web/angular/egauge,modules/mangoNoSqlDatabase/web/angular/mangoNoSqlDatabase,modules/reports/web/angular/reports,modules/maintenanceEvents/web/angular/maintenanceEvents,modules/serial/web/angular/serial,modules/internal/web/angular/internal,modules/advancedComponents/web/components/markerStore/markerStore,modules/advancedComponents/web/components/mapSiteStore/mapSiteStore,modules/advancedComponents/web/components/chartReports/chartReports,modules/advancedComponents/web/components/executiveReportStore/executiveReportStore,modules/advancedComponents/web/components/masterReportStore/masterReportStore,modules/advancedComponents/web/components/csvToJsonStore/csvToJsonStore,modules/advancedComponents/web/directives/annotateChart/annotateChart,modules/advancedComponents/web/services/serialChartAnnotationDialog/serialChartAnnotationDialog,modules/advancedComponents/web/services/chartAnnotationsApi,modules/advancedComponents/web/services/markerIcons,modules/dataFile/web/components/dataFileDataSourceImport/dataFileDataSourceImport,modules/dataFile/web/services/dataFileDataSourceService,modules/deviceConfig/web/components/deviceConfigAdd/deviceConfigAdd
https://requirejs.org/docs/errors.html#timeout"
    makeError http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39
    _ http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39
    a http://192.168.100.144/ui/mangoUi~ngMango~ngMangoServices.js?v=f41ab677f738e8ffe5b8:39
mangoUi.js:1:233880

I'm sure more stuff is working weirdly but this is what I've found so far.

I swear I only changed the parent item when all of this happened.

Should I start a new topic?

Jared Wiltshire

@jflores13 said in Help Using <ma-map & <info-window:

Tried powercycling the MangoES but nothing changes, still blank side menu and weird behaviour in general. Everything is taking way longer to load. Also, in the new data sources page, now my data sources are "not supported yet", not even the virtual data sources. I get multiple errors like this one when loading a data source's page:

OK no idea why but it appears that it can't load the module Javascript files from the backend. Check your Mango instance CPU and memory usage and also disk space. Unless you are just on a shitty connection to the backend?

See if you can get here - /ui/administration/json-store-editor/mangoUI-menu
And post up the contents.

And yeah maybe create a new thread about this.