Skip to content

Map styling

Ramil Valitov edited this page Jan 26, 2016 · 1 revision

Overview

The widget supports a Styled map - a custom map type, that you can customize according to your needs. There are 2 options available for the styling:

  • Simple mode
  • Advanced mode

The name of the style is used and displayed in the map type controls (if it's enabled):

Custom map style

Simple styling mode

The simple styling mode is a backward-compatibility feature to support the original Yootheme's Map widget. It allows you to style the map by adjusting its colors, see the sreenshot below:

Simple styling mode

The resulting map looks as follow:

Saturated map

Advanced styling mode

The interface

The Advanced styling mode is the unique feature of the MapEx widget that allows you to apply a custom deep styling: you can independently control visibility and individual colors of every map's item (labels, POI, continents, etc.). For the advanced mode you should input the styling information in JSON format:

Advanced styling mode

Despite the seeming difficulty, this can be achieved very easily using the Styled Maps Wizard.

Styled Maps Wizard

The Styled Maps Wizard can be access from the widget's interface. This is a Google's tool that allows creating sophisticated styled maps easily, using user-friendly interface:

Satellite map example

In this wizard you can adjust the options of the chosen selector in the left panel. The styles appear on the right panel. You can add new styles (for new map items) using the Add button. When you finished, you should click the Show JSON button to get the resulting JSON text. This text should be inserted into the widget.

Below is the widget rendered with the styling options above:

Satellite map example