Deep Map™ Styling¶
Changing Styles at Runtime¶
Our map can be completely styled with our own custom DeepMap™-styling language (see Deep Map™ Style Specification). Each styling parameter can be changed during runtime. Let’s add a switch, so we can change the style of our map with a flick of a button!
1. Switch with a callback function¶
First, we want to add a switch with a callback-function:
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
UISwitch *switchToggle = [[UISwitch alloc] initWithFrame: CGRectMake(0, 0, 100, 10)];
//place switch bottom right
switchToggle.frame = CGRectMake(self.view.frame.size.width - switchToggle.frame.size.width, self.view.frame.size.height - switchToggle.frame.size.height, switchToggle.frame.size.width, switchToggle.frame.size.height);
[switchToggle addTarget:self action:@selector(flip:) forControlEvents:UIControlEventValueChanged];
[switchToggle setEnabled:YES];
[self.view addSubview:switchToggle];
}
- (IBAction)flip:(id)sender {
UISwitch *togSwitch = (UISwitch *) sender;
if(togSwitch.on)
{
}
else
{
}
}
Swift
Android
Now we have a toggle-switch on the bottom-left, and we can add actions to it in the function “flip”.
2. Colors for types of features¶
For example, you could set all features from the “building” type in the color blue if the switch is toggled on, and red if the switch is toggled off. This can be done with the “setFeatureStyle” function in the following way:
Objective-C
- (IBAction)flip:(id)sender {
UISwitch *togSwitch = (UISwitch *) sender;
if(togSwitch.on)
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#0000ff"];
}
else
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#ff0000"];
}
}
Swift
Android
The function “setFeatureStyle” takes three parameters. The first one is the name of the featuretype we want to modify. The second one is the property to be changed. The third one is the new value. Each parameter is passed as a string, which corresponds to the DeepMap™-styling specification.
There is an optional fourth parameter, which can be used to control whether the change of a style should be updated immediately or not. Postponing an update is useful when multiple parameters should be changed at once, since it allows the engine to batch all changes into a single update, which increases rendering performance. For example, lets say that we want to hide all tables along with changing the color of the buildings. Since the tables might have labels attached to them, we have to change two additional parameters to completely hide them: “visibility” and “font-visibility”. In order to update all properties at once, we can change the code above to:
Objective-C
- (IBAction)flip:(id)sender {
UISwitch *togSwitch = (UISwitch *) sender;
if(togSwitch.on)
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#0000ff" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"visibility" value:@"visible" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"text-visibility" value:@"visible" update:YES];
}
else
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#ff0000" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"visibility" value:@"none" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"text-visibility" value:@"none" update:YES];
}
}
Swift
Android
Note that “update:YES” is optional and can be left out for convenience.
When batching multiple feature-changes, it can get difficult to keep track of which setter functions should force the style update. For example, in the code above, we could have forgotten to set “update:YES” in the “else” branch, which would make our style-switcher useless. Therefore, it is generally better to set update always to “NO”, and then call “reloadStyle” once all changes have been made:
Objective-C
- (IBAction)flip:(id)sender {
UISwitch *togSwitch = (UISwitch *) sender;
if(togSwitch.on)
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#0000ff" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"visibility" value:@"visible" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"text-visibility" value:@"visible" update:NO];
}
else
{
[self.mapView setFeatureStyle:@"building" propertyName:@"fill-color" value:@"#ff0000" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"visibility" value:@"none" update:NO];
[self.mapView setFeatureStyle:@"stand_tables" propertyName:@"text-visibility" value:@"none" update:NO];
}
[self.mapView reloadStyle];
}
Swift
Android
Using Custom Deep Map™ Styles¶
All styling information is contained in two style-files, which are bundled in the DeepMap.zip file. However, it is also possible to use your own custom style-file. Create a file in your asset folder named custom.mapStyle and copy the following style-definition into it:
Custom map style
The .mapStyle file contains static styling and rules for dynamic styling. For now, we will only focus on the styling. We can use the style-file in the map in the following way:
Objective-C
- (void)viewDidLoad {
/*
...
*/
[self.mapView switchStyles:[[NSBundle mainBundle] pathForResource:@"custom" ofType:@"mapStyle"]];
}
Swift
Android
If you run the app now, you will not notice any difference. This is because the style-file mentioned above is the same as the one bundled in DeepMap.zip. To see the effect, edit the custom.mapStyle file, and change the “fill-color” of the feature “building” from “#D7DEE3” to “#FF0000”:
Custom map style
If you start the app again, you should now notice that all polygons of the featuretype “building” are now red. It is possible to change every property this way. Please consult the following page for a complete overview of our styling language (see “Deep Map™ Style Specification” in the Documentation section).