Change your maps look and feel

Change your maps look and feel

Did you know that you can change the look and feel of your Hue maps just by specifying two extra variables on the Hue configuration?

Screenshot 2016-07-18 21.15.19

Here above the default style of Hue’s maps; we use the open source library Leaflet to draw them.

They also did a great job putting together a list of map providers that can be used in Hue as well:

Screenshot 2016-07-18 21.23.35

Let’s display the Esri.WorldImagery in Hue!

The properties we need to tweak are leaflet_tile_layer and leaflet_tile_layer_attribution, that can be configured in the hue.ini file:

leaflet_tile_layer_attribution='Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'

The values are exactly the same taken from the Leaflet providers demo.
With the recent security improvements in Hue, we need to whitelist the tile domain as well like and put it instead of *

secure_content_security_policy="script-src 'self' 'unsafe-inline' 'unsafe-eval' * * * data:;img-src 'self' * * data:;style-src 'self' 'unsafe-inline';connect-src 'self';child-src 'none';object-src 'none'"

Et voila, when we restart Hue, we’ll have the world imagery in every app that uses maps!

Screenshot 2016-07-18 21.26.53

If you have any questions, feel free to comment here or on the hue-user list or @gethue


  1. Gustavo 2 years ago


    Am I able to change the mark icon image shown in the map?

    • Author
      Hue Team 2 years ago

      Current not, icons can not be changed

  2. Eiichi Osanai 1 week ago

    I see that HUE use the for mapping display. Since there is no internet connection our HUE environments, can I download+Save this file and allow hue to refer to the file? So we can use the map graphics in the non internet environments.

Leave a reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.