[OutSystems Maps] Auto zoom not working with polyline shape
outsystems-maps
Reactive icon
Forge component by Platform Maintenance
Application Type
Mobile, Reactive

Hello, I am using a polyline shape with the auto zoom option on the map. When the polyline is displayed, the auto zoom is not working. But I can see the polyline when I zoom in.

When I put the points of the polyline into a marker list, the auto zoom is working.

Hello @Jan Hidding 


Thanks for bringing this subject to the discussion.

Currently, the OutSystems Maps component only takes into account the markers for the AutoZoom configuration.  Nevertheless, I prepared a workaround that I hope and believe will work for you.

Also, the component only has the possibility to add a handler to the initialization of the Map. Therefore, we need to hardcode with Javascript blocks in order to create or recreate the same logic that is being used by the Map, but this time for the Markers themself:

1) Create a new handler for the Map Initialization.

2)  Add the following code into a JS block (we need to go through all shapes)

MapAPI.MapManager.GetMapById($parameters.mapId).shapes.forEach(function(shape){

    MapAPI.ShapeManager.Events.Subscribe(

        shape.uniqueId,

        OSFramework.Event.Shape.ShapeEventType.Initialized,

        // This function is a callback, will only be invoked when the shape has been initialized 

        // (has both the OutSystems Object and the GoogleMaps Shapes Object created)

        function(){$actions.AutoZoomShapes($parameters.mapId)}

    ); 

})


3) As you can see, we were calling a AutoZoomShapes action on the previous code. So you will need to add a new client action that will have the MapId as an input parameter.

4) Inside the AutoZoomShapes action you will need to add the second JS block, this time to autozoom on the map:

var bounds = new google.maps.LatLngBounds();

var mapObj = MapAPI.MapManager.GetMapById($parameters.mapId);

mapObj.shapes.forEach(function(shape){

    if (shape.provider === undefined) return;

    shape.providerPath.forEach(function(pos){

        bounds.extend(pos)

    });

});

// Google Maps to Auto Zoom/Center the map

mapObj.provider.fitBounds(bounds);

mapObj.provider.panToBounds(bounds);


Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases. We are continuously working to provide more events and API methods, so I suggest you keep tuned.

Can you please check if the current sample attached to this answer meets all your needs?

Best regards,

Tiago Pereira

AutoZoomShapes.oml

Hello @Tiago Miguel Pereira,

Can you please attached the sample again, because the current one gives a "download" file of 0 KB

Kind regards,

Jan

Hello @Jan Hidding,

Can you please check if the sample is now downloadable?

Thank you,

Tiago Pereira

Hello,

I installed the latest version of the Maps plugin. My question is when will this problem on the auto zoom on polylines been solved.

Kind regards Jan.

Hello @Jan Hidding 

Could you please provide some feedback about the workaround suggested by @Tiago Miguel Pereira?
Were you able to make it work?
About adding this to the product we are still discussing if we will want to do it or not, so no ETA.

Best Regards,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.