---
title: Change your maps look and feel
author: admin
type: post
date: 2016-07-19T14:22:05+00:00
url: /change-your-maps-look-and-feel/
sf_thumbnail_type:
- none
sf_thumbnail_link_type:
- link_to_post
sf_detail_type:
- none
sf_page_title:
- 1
sf_page_title_style:
- standard
sf_no_breadcrumbs:
- 1
sf_page_title_bg:
- none
sf_page_title_text_style:
- light
sf_background_image_size:
- cover
sf_social_sharing:
- 1
sf_sidebar_config:
- left-sidebar
sf_left_sidebar:
- Sidebar-2
sf_right_sidebar:
- Sidebar-1
sf_caption_position:
- caption-right
sf_remove_promo_bar:
- 1
categories:
- Administration
- Development
- Querying
---
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?
[
][1]
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: https://leaflet-extras.github.io/leaflet-providers/preview/.
[
][2]
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:
{{< highlight bash >}}
[desktop]
leaflet_tile_layer=https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
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'
{{< /highlight >}}
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 `server.arcgisonline.com` as well like and put it instead of `*.tile.osm.org`
{{< highlight bash >}}
[desktop]
secure_content_security_policy="script-src 'self' 'unsafe-inline' 'unsafe-eval' \*.google-analytics.com \*.doubleclick.net \*.mathjax.org data:;img-src 'self' \*.google-analytics.com *.doubleclick.net server.arcgisonline.com data:;style-src 'self' 'unsafe-inline';connect-src 'self';child-src 'none';object-src 'none'"
{{< /highlight >}}
Et voila, when we restart Hue, we'll have the world imagery in every app that uses maps!
[
][3]
If you have any questions, feel free to comment here or on the [hue-user][4] list or [@gethue][5]
[1]: https://cdn.gethue.com/uploads/2016/07/Screenshot-2016-07-18-21.15.19.jpg
[2]: https://cdn.gethue.com/uploads/2016/07/Screenshot-2016-07-18-21.23.35.jpg
[3]: https://cdn.gethue.com/uploads/2016/07/Screenshot-2016-07-18-21.26.53.jpg
[4]: http://groups.google.com/a/cloudera.org/group/hue-user
[5]: https://twitter.com/gethue