[Google Maps Library] How to draw a polygon marker in a single map? (Mobile App)

Forge Component
(24)
Published on 26 Feb by Labs
24 votes
Published on 26 Feb by Labs

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!

Luís Cardoso wrote:

Hi Aditya,

Yes, you can do that with Javascript.

Please see an example here: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

You can also get some ideas from those Forge components:

https://www.outsystems.com/forge/component-overview/5425/google-maps-mobile-samples

https://www.outsystems.com/forge/component-overview/2973/google-maps-mobile-addon

https://www.outsystems.com/forge/component-overview/4127/google-maps-extended

https://www.outsystems.com/forge/component-overview/1943/google-maps-plugin-demo


Hope this can help you.

BR,

Luis

Hi Luis, thanks for your response.

about this documentation:

https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

where do I put the javascript function snippet? in the mobile app espace (module) or the Google Maps Library espace? Thanks

Hello,

You need to do it in your module.

BR,

Luis

Luís Cardoso wrote:

Hello,

You need to do it in your module.

BR,

Luis

Don't I have to add the Polygon javascript function in the GMaps module/espace instead? because the plugin i have been used is this one: https://www.outsystems.com/forge/component-overview/1396/google-maps-library (which is why i posted this question in this forge support discussion)

the gmaps interface are inside the block from that module, so I think if I want to add the Polygon function I have to modify and add the javascript function in this plugin module, no?

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

Mykola (Nick) Tkachenko wrote:

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

 

 is this only occurred in iOS? for the polygon, i've followed the step on this thread:

https://www.outsystems.com/forums/discussion/32966/google-maps-library-showing-a-polygon-on-the-map-only-works-first-time/ 


by modifying the plugin with some javascript snippet.

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.


Mykola (Nick) Tkachenko wrote:

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.


 

If you close the mobile app and open it back, will it work again as before? how was your case again, you tried to reload the maps component back and forth until 50 times and then the issue occurred?

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.