Hello,
I'm using OutSystems Maps in a mobile app. It's a live bus tracking map that renders polylines of routes, bus stop icons, and bus icons. The list of bus icons is updated once every five seconds. The list is also updated per item instead of refreshed/reassigned to make the bus icons move more smoothly without flashing from being re-rendered. This is working mostly well, save for two issues:
First, the map is set up using a variable (MapCenter) to control the map center and a hard-coded zoom. There is really just two uses for this: First, we set an initial starting center and zoom to center the map on the main service area, then, the user should be able to go crazy moving and zooming the map as they please. However, there is also a button to move the map to the user's current location.
This works fine, except every time the bus locations are updated and the markers move, the map automatically zooms to the initial zoom level and centers back on whatever MapCenter is set to: either the starting location or whatever it was last set to when the user tapped the button to move to their location. It's like the map gets re-rendered with its center and zoom reset to their last known values. I would like to prevent this from happening, and not alter the pan and zoom every time busses move.
The second issue is with the bus and stop icons themselves. They use custom images, but are rendered above (to the "north") of the bus and stop locations they are supposed to represent, which makes sense as it looks like they're replacing the "bulging" part of the default marker that sits above a location, rather than on top of it. Is there a way, however, to change the offset of the icons so that they actually sit exactly on the lat/lng they are representing?
Thanks in advance to anyone able to lend a hand!
Hello @Walter Robins
First of all, it would be nice if you could share some sample oml with your use cases (with what you have so far and without business-specific logic).
The first issue seems pretty similar to the one described here where I provided a workaround.
The second one, to customize the styling of an icon you can also take a look at the approach I suggested here.
Hope it helps.
Cheers,GM
Hi @Gonçalo Martins ,
Thank you for your help and I apologize for the delayed response.
First off, I wish I could share an oml. However, this app is extremely large, and even if I were to isolate this screen, the map's logic reaches out to proprietary logic/integrations to populate the polylines and points using confidential credentials. However, I will do my best to share what I can for my progress.
Your solution to the first issue worked like a charm - I was able to remove the logic that was bugging me as follows:
While this does remove auto-panning when I change the map center variable in Service Studio, when I need to actually reset or move/pan/zoom the map using logic, I am able to do so with manual scripting:
I've seen a lot of examples similar to the second one you provided. However, when I try to get the marker by its ID that way, I never get anything back from document.querySelector(). In inspect element when previewing the app, I don't see any ids passed into the DOM for the markers. Maybe I'm using a different version of OutSystems maps? (I'm using the latest 1.6.6). The workaround I've found is to simply use the right drilldown in my CSS selector without using any JavaScript and set a transform on the icons to center them on their lat/lngs as such:
The last issue I'm facing that has me stumped, however, is I'm seeing weird behavior where it doesn't always open the correct popup for the icon I'm clicking on. Often, when I try to tap on an icon (or elsewhere in the map for the matter) it will randomly open one somewhere else. I've attached a video demonstrating that.