Documentation

Remove icons

Just like geomteries, we can also hide unwatned icons from the Micello map by simple theme override. Refer theme override for more details on theme structure and how to override a theme.

In this example, we are hiding all the 'Stairs' icon from the map. Icons are defined in theme file with height, width, shape and color properties. Here is the sample icon JSON.

"Stairs": {
            "w": 50,
            "g": [{
                "shp": [
                    [0, 50, 38], [3, 49.999, 44.628, 44.626, 50.001, 37.999, 50.001], [1, 11.999, 50.001], [3, 5.374, 50.001, -0.001, 44.628, 0, 38], [1, 0, 12], [3, 0.001, 5.375, 5.376, -0.001, 12.001, -0.001], [1, 38.001, -0.001], [3, 44.628, -0.001, 50.001, 5.375, 50, 12], [1, 50, 38], [4]
                ],
                "os": {
                    "m": "#76988F"
                }
            }, {
                "shp": [
                    [0, 50, 38], [3, 49.999, 44.628, 44.626, 50.001, 37.999, 50.001], [1, 11.999, 50.001], [3, 5.374, 50.001, -0.001, 44.628, 0, 38], [1, 0, 12], [3, 0.001, 5.375, 5.376, -0.001, 12.001, -0.001], [1, 38.001, -0.001], [3, 44.628, -0.001, 50.001, 5.375, 50, 12], [1, 50, 38], [4]
                ],
                "os": {
                    "m": "#405E54"
                },
                "gt": 3,
                "gw": 2
            }, {
                "shp": [
                    [0, 5.19, 37.43], [1, 12.459, 37.43], [1, 12.459, 30.042], [1, 19.727, 30.042], [1, 19.727, 22.656], [1, 26.935, 22.656], [1, 26.935, 15.329], [1, 34.203, 15.329], [1, 34.203, 8.119], [1, 45.078, 8.119], [1, 45.078, 11.842], [1, 37.867, 11.842], [1, 37.867, 19.287], [1, 30.658, 19.287], [1, 30.658, 26.557], [1, 23.45, 26.557], [1, 23.45, 33.884], [1, 16.063, 33.884], [1, 16.063, 41.272], [1, 5.25, 41.272], [1, 5.19, 37.43], [4]
                ],
                "os": {
                    "m": "#ffffff"
                }
            }],
            "h": 50
        }

Here is the decription of the conventions used in above JSON.

  • h = height of the icon
  • w = width of the icon
  • g = geometry JSON
  • shp = shape of the geometry
  • os = object style
  • gt = geometry type
  • gw = geometry width

If we remove the geometry object from above JSON, we can hide the icon. In our example we removed the geometry 'g' information from the icon theme object, which will hide the geometry when new theme is overriden. Look at the code below to override the 'Stairs' icon.

var customTheme = {
    "ic" : {
        "Stairs": {"w":50, "h": 50, "g":""},
    }
}
if( customTheme ) {
    mapCanvas.setOverrideTheme(customTheme);
}

Important thing to notice here is that, this will only hide the icon, if you click on that area it is still clickable. To disable click on this icon, we have to override mapClick event too. Here if clicked object name is 'Stairs' we do not want to show popup.

function onMapClick (mx, my, clicked) {
    if (clicked && (clicked.nm != "Stairs" || clicked.lr != "Stairs")) {
        mapControl.defaultSelectAction(clicked);
        addInlay(clicked);
    }
}

Now, all 'Stairs' icons are hidden from the map. See the difference below.