Documentation

Customize icon

Micello SDK allows you to override default icons using theme override functionality just like we override any object or pin on the map. Explore more map styling capabilities here.

Icons on Micello map are represented as JSON object in theme file. To create a custom icon you need to provide properly formatted .svg file to Micello team. We will convert those icons and provide you JSON file per icon. You can add/replace this JSON in your theme file.

.svg file must follow following rules:

  • There must be one main layer and only one main layer
  • This main layer should have one grouped sub-layer which holds two layers when ungrouped.
  • Out of these two sub-layers one must represent background of an icon and second must represent foreground of an icon.
  • Height and width of the icon must be 50 pixels.

Please refer to attached sample icon .svg file for your reference(Click on "See the code" > "stairs.svg" below this description).

If provided .svg file is correct, we will convert and send you the JSON file. Then you can copy the JSON content and put it in your theme override file.

Here, in this example we are changing icon of "Stairs". Follow below steps to override an icon:

  • Open the converted JSON file into a text editor and copy the content.
  • Now open theme file and search for "Stairs", if does not exist create one object inside "ic" object with key as "Stairs".
    • JSON structure of theme file should look like this:
      • {
            "f": "Modern",
            "id": 0,
            "ic": {},        // all icons goes here
            "s":{},            // all object style goes here
            "mt": "General",
            "m": {},        // all markers goes here
            "ft": "thm1"
        }
  • Once your theme override object is ready store it in some variable and pass that variable as parameter in mapCanvas.setOverrideTheme() function.

At any point of time you can also change background and foreground color of an icon. First have a look at the JSON structure of a icon.

   {
        "w": 50,
        "g": [
                 {
                    "os": {
                      "m": ""     // background hex color
                    },
                    "shp": []     // shape
                 }, {
                    "os": {
                      "m": ""    // foreground hex color
                    },
                    "shp": []    // shape
                 }
               ],
       "h": 50
    }

As you can see in above JSON structure first first object in property "g" always represents background layer information and second object always represents foreground layer information. If you change the color of "m" in first object in "g", it will reflect in background of that icon.

This same process can be followed for all the icons you want to custimize. Have a look at the working example below and look for the stairs icon. Stairs icon now shows up in red color which is different from the default Micello icon.