In my application, I'm using google map using a forge component called OutSystems Map. There are few Map styles are available. But I would like to have my custom style.On the documentation, clearly mentioned that it's possible to create your own style. Even I have the Json style file for that.Now, how can I use the custom styles with the forge component I'm using ?
Hello @Nour Hasan
To achieve that you can explore the Google Maps API by doing the following:
const stylesJSON = [ { "featureType": "all", "elementType": "all", "stylers": [ { "visibility": "on" } ] }, { "featureType": "all", "elementType": "labels", "stylers": [ { "visibility": "off" }, { "saturation": "-100" } ] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [ { "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 }, { "visibility": "off" } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" }, { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 } ] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "landscape", "elementType": "geometry.fill", "stylers": [ { "color": "#4d6059" } ] }, { "featureType": "landscape", "elementType": "geometry.stroke", "stylers": [ { "color": "#4d6059" } ] }, { "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [ { "color": "#4d6059" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "lightness": 21 } ] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "color": "#4d6059" } ] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [ { "color": "#4d6059" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#7f8d89" } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#7f8d89" } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#7f8d89" }, { "lightness": 17 } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#7f8d89" }, { "lightness": 29 }, { "weight": 0.2 } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 18 } ] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [ { "color": "#7f8d89" } ] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "color": "#7f8d89" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "road.local", "elementType": "geometry.fill", "stylers": [ { "color": "#7f8d89" } ] }, { "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [ { "color": "#7f8d89" } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 19 } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#2b3638" }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#2b3638" }, { "lightness": 17 } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#24282b" } ] }, { "featureType": "water", "elementType": "geometry.stroke", "stylers": [ { "color": "#24282b" } ] }, { "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] } ]; OutSystems.Maps.MapAPI.MapManager.GetMapById($parameters.MapId)._provider.setOptions({styles:stylesJSON}); //$parameters.MapId is the identifier of the Map block
I hope it helps.
Cheers,GM
Have you checked the sample?
https://www.outsystems.com/forge/component-overview/10984/outsystems-maps-sample