98
Views
10
Comments
Solved
[Google Maps Library] How to draw a polygon marker in a single map? (Mobile App)
Question
Forge component by OutSystems R&D
26
Published on 26 Feb 2020

Hi everyone.

I wanted to create (or draw) a polygon shaped marker in the Google Maps with this plugin component. https://www.outsystems.com/forge/component-overview/1396/google-maps-library 

I will create the marker within six coordinates.


Is this possible to achieve in the OS mobile app? Has anyone ever create this before? If so, I would appreciate all the advises and solutions, thanks!

mvp_badge
MVP
Rank: #132

Hello,

You need to do it in your module.

BR,

Luis

mvp_badge
MVP
Rank: #132

Hi!

I think the best approach is not to change the components that you download from forge. You can build a wrapper or clone the module and add this javascript.


BR,

Luis

Hi Luís,

Hi. We have a mobile app with a GoogleMaps \ Map web block from Google Mobile Maps  component. Each time we navigate back and forth between screens memory usage increases. If we repeat this back and forth navigation several times (like 50) we see this error in a console log (iPad connected to Safari Developer tools) "Total canvas memory use exceeds the maximum limit". 

Map component still works except polygon drawing.

On developer tools -> Graphics there are around 14 empty canvas element created each time map with polygon is loaded and one element with a polygon each 512x512 and 1Mb size... One with the polygon can be resized to 0x0 as it can be selected using  document.getElementsByTagName("canvas"); ...
We need to remove/resize to 0 others as otherwise at some point of application usage this error will occur...

 Any suggestions would be welcomed on how to fix this issue.

Thank you in advance

We have iOS only mobile app.
We have added script to draw polygon like this without modifications to original component:
________

customMapBlock.maps.mapBlock = function(mapId,  coord)

{

    var map = null;

    // wait until map is loaded before adding our layers

    var pollTimer = window.setInterval(function() {

        try {

            map = osGoogleMap.getMap(mapId).gMap; //Getting the Map Object

            if (map !== null) {

                window.clearInterval(pollTimer);

                loadOutline();

            }    

        }

        catch (e) {}

    }, 100)


    function loadOutline() {

        var coords = coord;

        if (typeof outline !== 'undefined') {

              outline.setMap(null);

        }

        outline = new google.maps.Polygon({

            path: coords,

            strokeColor: '#FF0000',

            fillColor: '#FF0000',

            fillOpacity: 0.35

        });

        outline.setMap(map);

    }

}


____

It is similar to the thread you mentioned and it is working for the purpose of polygon drawing until we exceed memory limit. on iPad it is 384Mb and as 14 1Mb canvases are created after 28 map reloads it stops working.


Hi Aditya Eka Prabowo , if we close application (not send to background but actually close) and reopen it solves the issue until next cycle. Same if we force page refresh (say with window.location.reload(true); script). 
Test case is to have 2 screens in mobile app with link from one to another. One screen have google maps and draws a polygon (or polyline) in it. Navigating back and forth between screen 1 and screen 2 at some point will trigger "canvas memory limit" warning and polygon will stop to be drawn.