Hi all,
I’m using Ionic Native Map (https://ionicframework.com/docs/native/google-maps/) based on (https://github.com/mapsplugin/cordova-plugin-googlemaps)
I’m wonder is possible to style the map with json from https://snazzymaps.com/?
Expected:
I’ve setup via GoogleMapOptions with Styles but it hasn’t worked
mapStyles: Array<any>;
// Fetch map styles
this.fetchMapStyles = () => {
this.http.get("assets/app.data/maps/styles.json").map((response) => {
return response.json();
}).subscribe((mapStyles) => {
this.mapStyles = mapStyles;
});
}
this.newMap = (id, locationModel: LocationModel): Observable<GoogleMap> => {
let loading = this.loadingController.create({
content: "Creating map and analytics location"
});
loading.present();
return new Observable<any>((observe) => {
let element = document.getElementById(id);
let myPosition = new LatLng(locationModel.latitude, locationModel.longitude);
console.info("Map styles", this.mapStyles, typeof this.mapStyles);
let mapOptions: GoogleMapOptions = {
camera: {
target: myPosition,
tilt: 30
},
styles: this.mapStyles
};
let map: GoogleMap = GoogleMaps.create(element, mapOptions);
window["mapTest"] = map;
map.one(GoogleMapsEvent.MAP_READY).then(() => {
loading.dismiss().then(() => {
observe.next(map);
})
})
})
}
[{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#7c93a3"
},
{
"lightness": "-10"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "administrative.country",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#a0a4a5"
}]
},
{
"featureType": "administrative.province",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#62838e"
}]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#dde3e3"
}]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#3f4a51"
},
{
"weight": "0.30"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.sports_complex",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": "-100"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#bbcacf"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"lightness": "0"
},
{
"color": "#bbcacf"
},
{
"weight": "0.50"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [{
"visibility": "on"
}]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#a9b4b8"
}]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"invert_lightness": true
},
{
"saturation": "-7"
},
{
"lightness": "3"
},
{
"gamma": "1.80"
},
{
"weight": "0.01"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#a3c7df"
}]
}
]
Thanks in advance.
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.13.0
ionic (Ionic CLI) : 3.13.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.1.2
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v8.9.1
npm : 5.5.1
OS : macOS High Sierra
Xcode : Xcode 9.1 Build version 9B55
Misc:
backend : pro
com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
cordova-android-support-gradle-release 1.1.5 "cordova-android-support-gradle-release"
cordova-plugin-add-swift-support 1.7.0 "AddSwiftSupport"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 2.0.1 "BuildInfo"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.7.4 "Facebook Connect"
cordova-plugin-geolocation 3.0.0 "Geolocation"
cordova-plugin-googlemaps 2.1.2-beta-20171115-1911 "cordova-plugin-googlemaps"
cordova-plugin-googleplus 5.1.1 "Google SignIn"
cordova-plugin-ionic-webview 1.1.15 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 2.0.4 "NativeGeocoder"
cordova-plugin-nativestorage 2.2.2 "NativeStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.3.0 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-x-toast 2.6.0 "Toast"
cordova.plugins.diagnostic 3.7.2 "Diagnostic"
ionic-plugin-keyboard 2.2.1 "Keyboard"