grafana / worldmap-panel

Worldmap panel plugin for Grafana 3.0 that can be overlaid with circles for data points.
MIT License
311 stars 199 forks source link

Feature request: Satellite view #24

Open sslupsky opened 8 years ago

sslupsky commented 8 years ago

Would be nice to be able to render a satellite view of the map.

daniellee commented 8 years ago

When I started with the panel, I had 5 different maps including a satellite view. In the end, I dumped them and just kept one map that suits the dark theme and one that suits the light theme. The satellite view didn't work that well for visualization and that is the reason there isn't one. Do you have a particular use case that needs a satellite view?

sslupsky commented 8 years ago

Hi @daniellee ,

My use case(s) involve remote sensor networks that are usually in areas with very few public roads nearby. The locations are generally very industrial in nature. In particular, mine sites where sensors are installed throughout the mine site.

svet-b commented 6 years ago

Thanks for a wonderful plugin! I'd like to second this request. We work with sensor data from rural locations across Africa, where the availability of digitized mapping data is minimal.

So while it's already great that we're able to see the geospatial relationships in the data through the following:

screen shot 2017-11-23 at 12 36 37 pm

...it would be about 1000% more helpful to see the datapoints, which correspond to houses, overlaid on a satellite map instead:

screen shot 2017-11-23 at 12 41 41 pm

I understand this may be a niche use case for the user base as a whole and that you may not want to implement and maintain full-on mapping selection - but it would be a game-changer for us. Could you give some pointers on the bits of code would need to be patched to just change the map source? Thanks in advance!

svet-b commented 6 years ago

Poked around a bit and it ended up being relatively straightforward to get this to work by modifying the JS. Of course it would be nice if there was a UI control for setting custom tile server parameters - but, for the time being - for anyone else that's interested in getting this to work and does not care about elegance of implementation, here's a way:

1) In worldmap.js, around line 40 you can define additional tile server sources as members of the tileServers array. Here are two that provide respectively a pure satellite and a hybrid view

'Esri Satellite': { url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community', subdomains: 'abcd' },
'HERE Hybrid': { url: 'https://{s}.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?app_id=<app_id>&app_code=<app_code>&lg=eng', attribution: 'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>', subdomains: '1234'}

I looked up these two at http://leaflet-extras.github.io/leaflet-providers/preview/ - there are many options there, but these seemed to be the best satellite ones. Note that in order to use the HERE tile server you need to sign up for API access and replace the <api_id> and <app_code> placeholders with the respective values allocated to you.

2) In worldmap_ctrl.js, in the setMapProvider function edit the tile server setting accordingly, e.g. set this.tileServer = 'Esri Satellite';.

3) Under the above scenario, no filters would be applied to the map tiles. Depending on your preferences, you can also tweak the CSS filter by editing the class set in the setMapSaturationClass function in worldmap_ctrl.js and/or the worldmap.(light/dark).css file for your theme.

Hope this might be helpful to anyone else who stumbles upon this page in search for a solution. The following is what I got with the HERE hybrid map, with a CSS filter to dial down saturation and increase brightness of the basemap, in an effort to improve the visibility of the actual data points:

screen shot 2017-11-25 at 5 27 32 pm
svet-b commented 5 years ago

FYI, here's a fork that uses the Esri Satellite map as the background: https://github.com/ammpio/worldmap-panel.

The actual diff between this and the original is here

NateZimmer commented 5 years ago

For it to be a 1 line code change ya would think it wouldn't be too tricky to make it a setting in the plugin for satellite view. Thanks @svet-b for your approach.