I have been trying to implement the MapStyleId parameter for my maps in a mobile application. I just want a normal map, and then to be able to change it to night if the user is in dark mode. It looks like the Style static entity no longer applies to most current version. I've tried reading the documentation on OutSystems for the Map component and followed Googles example of creating a map style. When I place that map style id into the parameter on my application it still doesn't work. Do I need to also create a map Id inside google and associate the style with it? If so then how do I tell OutSystems my map Id I am using? Any help would be very appreciated!
Hi @Spencer Buhler
I tried with your oml and was able to make it work.
Basically, the Map ID needs to be created here and not on where I previously mentioned:
Once I used this ID and the API Key from the same account, here's the result:
Hope it helps!
Best Regards,GM
@Gonçalo Martins oh so you set the map Id as the style Id not the style Id as the style Id?
Also do you know if it automatically changes it to the roadmap dark mode when your device detects it's night? it seems changing this dropdown doesn't do anything when I load the map. But your solution of assigning the MapId to the parameter Style Id did work! Thank you so much.
Hi Spencer,
To add an Id to your Maps Widget, simply assign a name to the widget. For example, I named mine "GoogleMap".
You can then access the Id by selecting it from the dropdown when defining a variable or parameter.
I found this post that might help you understand how to implement the style change.
Ok. But do I need to then name that the same thing as the Google Map Id I created in console.cloud? That's where it seems we have to do styles now for the map. Putting in just the entities.style.night doesn't work anymore. It appears we have to do it through console.cloud.google but I don't know how to get it to accept my style.
That I don't know.
@Beatriz Sabino Thanks for finding that post! Looked very promising, unfortunately I think things have very recently changed. When I try the JSON approach mentioned in that post I get this in the console. But the problem is the map Id set is different every time, regardless of what I name the map as you mentioned above. And to bind it to the styles it has to match this mapId from what I made in the cloud.console.google.
I didn't understand which Map Id changes every time, the Map Id from cloud.console.google?
Sorry let me clarify. When you look in the console for OutSystems.Maps.MapAPI.MapManager.GetMapById($parameters.MapId)._providerthe map Id is different every time as OutSystems loads the map through their wrapper. the Map Id set to my style Id is constant in the cloud.console.google. I even tried changing the mapId in the OnMapInitialize client action to match what is in cloud.console.google but I still don't see my style. I just opened a ticket with OS to ask them, because their documentation is not very clear on this.
From googles documentation
I thought that Map Id would be the one created by OutSystems when you add the block to your application, but it seems that I'm wrong. Since you already create a ticket with OutSystems support they will be able to help you. When you find a solution, please share it as I'm curios to know how to solve this problem.
Hello @Spencer Buhler
Did you get the chance to look into the release notes of version 2.0.0, where this topic was introduced and mentioned?
By looking at it, you understand that Google changed their APIs, and for styling, you need to go to Google Cloud Console, the Map Styles, define your style, and there you can find the MapId:
Hope it helps.
Cheers,GM
Hi @Gonçalo Martins, I did try that but it still isn't pulling through the style that I have set. Then I tried setting to an associated map and changing the mapId to match that associated map but that didn't work either.
Hi @Spencer Buhler,
Thank you for the information provided so far. What you did appears to be correct, as in passing the mapId of the google cloud-based maps styles in the OutSystems block.
Can you validate:
Last but not least, if you still have value set in the deprecated map style id, please remove it.
Cheers,
RG
1. Yes it's to the right license. The API key matches in my console.cloud.google to the API key I'm using for the app.2. I believe it's allowing access to the domain the app is using. It is set to Application restrictions: none. And the map itself is working without having the watermark on it, so I assume it's allowing it.3. Yes the style Ids match.4. OutSystems Maps 2.0.1, Google version 3.585. I have nothing set in the deprecated map style id
Uhm, everything looks apparently good... Can you share an OML with the map and the configurations you're setting, so that I can test on my side?
Here is the oml for a test app trying to set up the map to a style. That style id is a dark mode map.
@Gonçalo Martins , @Ruben Goncalves how do I get the map to refresh when I hit a toggle so that it switches between dark mode or not? Right now I have to close the app and then reopen it for the style to get applied. Do I need to use OutSystems.Maps.MapAPI.MapManager.ChangeProperty() when I hit the toggle? I'll attach an OML for reference.
Regarding the parameter's description, that will be improved to make it clearer to the developers, so thank you for bringing this.
To switch between dark mode and other I believe you always have to destroy and create the Map's instance, since if I'm not mistaken, the APIs only work when creating the Maps' instance. So, without using a lot of custom JavaScript, you should probably use logic using If-statements.
An if statement around the entire map? Because doing an if statement inside the parameter itself doesn't retrigger the map. While if I place an if statement in a different parameter it does trigger the map to refresh. For example in type it will refresh with my if statement. With MapStyleId it does not.
Some attributes can be changed at runtime, and others don't. Those decisions are tied to some technical specifications from Google APIs and/or UX/UI decisions for the common use cases a component should offer out of the box.
For the second part, they expect to receive feedback about the feature usage to prioritize changes or new features. Alternatively, you can always use the GitHub public repository to suggest fixes or changes through a Pull Request that the team will validate and consider adding to the product.
Really appreciate your help on this! I was playing around with it and if I wrap the entire map in an if block I can make it switch on command. But I'm a little worried that I could get a memory leak with creating the map every time I hit the toggle. Do you think it's creating multiple instances and not cleaning them up? Another solution I thought was when they hit the toggle to switch themes I could have the action take them to the same screen which in theory should be destroying the map and then recreating it. Though this feels a little gimicky.
The last solution I can think of is when they toggle the switch I could call OutSystems.Maps.MapAPI.MapManager.RemoveMap($parameters.MapId); and then do the if statement to try and do cleanup.
What are your thoughts? And yes I'll send some feedback on the component, though I'm not 100% sure how to do that actually. Again appreciate all your help in going back and forth on this with me.
We're not aware of any memory leaks since the block should be destroyed every time the If-statement gets its value changed. If that happens, it's something that should be reported via support so the team can fix it, but I never found any evidence about memory leaks in OutSystems Maps.