search

n0bel / PiClock

A Fancy Clock built around a monitor and a Raspberry Pi
MIT License
566 stars 182 forks source link

Move to another mapping platform? #110

Closed n0bel closed 5 years ago

n0bel commented 5 years ago

I'm taking input on using a different mapping provider to get rid of the google maps credit card requirement.

n0bel commented 5 years ago

MapBox seems to have an equivalent API to google static maps. After making a free account you can play with it here: https://www.mapbox.com/help/static-api-playground/ The url and parameters are different but close enough. Looks like a drop in replacement. Most of the work has already been done here: https://github.com/n0bel/PiClock/pull/84

n0bel commented 5 years ago

Debugging the MapBox version ... Available on the dev-mapbox branch Changes: Directly paint Markers from local images, to allow for easy custom markers Implemented MapBox optionally (enabled in Config and ApiKeys)

image image

merky1 commented 5 years ago

Have you seen much of a difference, quality wise in the map images?

BertLindeman commented 5 years ago

Just an example on my PC screen. Looks fine to me after annoying look at a gray background provided by google ;-)

image

n0bel commented 5 years ago

They are different. Google was more terrain-map-ish and satellite combo, where mapbox is more straight satellite. I've not tried all the mapbox maps.

n0bel commented 5 years ago

mapbox is now live on the master branch. It is optional.

BertLindeman commented 5 years ago

An example html page to see how your map would look like? Use your preferred location / zoom / size, and copy the access token from the example(s) on the mapbox documentation page: https://www.mapbox.com/api-documentation/#styles A well willing freely usable webpage by me. Use it as you like and no guarantee:

<!DOCTYPE html>
<html lang="en">
<head>
<title> mapbox style TEST</title>
</head>
<body>
<script>
var urlhome     = "https://api.mapbox.com/styles/v1/mapbox/";

/* Take the key from one of the examples on URL 
   https://www.mapbox.com/api-documentation/#introduction */
var key = "?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NDg1bDA1cjYzM280NHJ5NzlvNDMifQ.d6e-nNyBDtmQCVwVNivz7A";

function showExample(loc, zoom, size, style) {
    var urlzoom     = zoom; 
        urlzoom    += ",0,0/";
    var urlsize     = size; 
        urlsize    += "/";  
    var urlstyle    = style;         
        urlstyle   += "/static/";   
    var url  = urlhome;
        url += urlstyle;
        url += urllocation;
        url += urlzoom;
        url += urlsize;
        url += key;
    document.write("<h4>Style:"+style+" zoom:"+zoom+" size:"+size+"</h4><img id='"+style+"' src=");
    document.write(url+">");
};
/* Currently documented:
    streets-v10
    outdoors-v10
    light-v9
    dark-v9
    satellite-v9
    satellite-streets-v10
    navigation-preview-day-v4
    navigation-preview-night-v4
    navigation-guidance-day-v4
    navigation-guidance-night-v4
*/
var urllocation = "4.627072,51.892625,";
var zoom     = "4"; 
var size     = "166x146";
var style    = "streets-v10";      showExample(urllocation, zoom, size, style);
    style    = "outdoors-v10";     showExample(urllocation, zoom, size, style);
    style    = "light-v9";         showExample(urllocation, zoom, size, style);
    style    = "dark-v9";          showExample(urllocation, zoom, size, style);
    style    = "satellite-v9";     showExample(urllocation, zoom, size, style);
    style    = "satellite-streets-v10";        showExample(urllocation, zoom, size, style);
    style    = "navigation-preview-day-v4";    showExample(urllocation, zoom, size, style);
    style    = "navigation-preview-night-v4";  showExample(urllocation, zoom, size, style);
    style    = "navigation-guidance-day-v4";   showExample(urllocation, zoom, size, style);
    style    = "navigation-guidance-night-v4"; showExample(urllocation, zoom, size, style);

var zoom     = "7"; 
var size     = "255x255";
var style    = "streets-v10";      showExample(urllocation, zoom, size, style);
    style    = "outdoors-v10";     showExample(urllocation, zoom, size, style);
    style    = "light-v9";         showExample(urllocation, zoom, size, style);
    style    = "dark-v9";          showExample(urllocation, zoom, size, style);
    style    = "satellite-v9";     showExample(urllocation, zoom, size, style);
    style    = "satellite-streets-v10";        showExample(urllocation, zoom, size, style);
    style    = "navigation-preview-day-v4";    showExample(urllocation, zoom, size, style);
    style    = "navigation-preview-night-v4";  showExample(urllocation, zoom, size, style);
    style    = "navigation-guidance-day-v4";   showExample(urllocation, zoom, size, style);
    style    = "navigation-guidance-night-v4"; showExample(urllocation, zoom, size, style);

</script>
</body>
</html>
BertLindeman commented 5 years ago

Additional thought: maybe also take the style from Config.py? That would also allow for day / night style to be used if one uses the switch.py.

n0bel commented 5 years ago

yup i'll add the style in config

n0bel commented 5 years ago

https://www.mapbox.com/help/static-api-playground/ Play with your styles :)

n0bel commented 5 years ago

https://www.mapbox.com/studio/ Play more!

n0bel commented 5 years ago

@BertLindeman Radar configs now allow for specifying mapbox styles. As of commit: https://github.com/n0bel/PiClock/commit/cc24bad7a98131e45c032e33f7424068edf8774d Default style is still 'mapbox/satellite-streets-v10'

BertLindeman commented 5 years ago

Thank you! Did a pull and will fiddle with the radar settings here.

cranesoft commented 5 years ago

Late to the party but I've been following the thread re: migration from WU. @n0bel and others, thanks for all of the work to make it happen!

Everything works after cloning and migrating my old config files except the radar images. Also, I have API keys setup for both MapBox and DarkSky. When initially painted, I see what appears to be the satellite image (looks good) and then the current radar image overlays covering up the satellite image...just gray with radar image data. Perhaps a transparency issue? In hopes that pictures will better convey what I'm talking about I've attached an overall view of my clock as well as a detailed view of the two radar images mentioned above. Anyone else see the same issue? TIA!

20181227_074731 20181227_080146

BertLindeman commented 5 years ago

Hi @cranesoft (I like your clock image and your weather ;-) Maybe to debug: look into your PyQtPiClock.1.log and find a string like this:

map base url: https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/4.627072,51.892625,3,0,0/320x264?access_token=pk.ey

Copy and paste in the location line of your browser to see if you get a good quality picture there. Include the api key of course. [edit] maybe you already did this, sorry then. Sometimes I see in my logs errors like this:

radar2 3 https://tilecache.rainviewer.com/v2/radar/1545859800//256/7/66/42.png?color=3
Traceback (most recent call last):
  File "PyQtPiClock.py", line 534, in rtick
    f = self.frameImages[self.displayedFrame]
IndexError: list index out of range
Traceback (most recent call last):
  File "PyQtPiClock.py", line 534, in rtick
    f = self.frameImages[self.displayedFrame]
IndexError: list index out of range

Do you see errors in the log?

cranesoft commented 5 years ago

Good suggestions! No errors in the log. The calls to mapbox look good (copied to the browser as you suggested). The calls to rainviewer.com may be good but I'm wondering if the white part (shows as black in the image below) of the image should be treated as transparent?

image

BertLindeman commented 5 years ago

Tx. I took one radar image URI from my log and it has like yours a black background. "My URL":

 https://tilecache.rainviewer.com/v2/radar/1545917400//256/7/65/41.png?color=3

Tried to paste the image here, but it refuses this time.... Reports: Something went wrong

BertLindeman commented 5 years ago

Huh? The radar image above I "did" in Chrome. Another one I loooked at in Firefox and that has a white background. Sorry to add to the confusion.

 https://tilecache.rainviewer.com/v2/radar/1545920400//256/11/1051/678.png?color=3

No paste again.. [EDIT] paste in Chrome does work:

piclock_radar_678

BertLindeman commented 5 years ago

Verified that the image does have an alpha channel (So has transparency).

You do see the mapbox calls in your log. And that should mean those images are used.

Just to verify: do you have usemapbox in your active config:

usemapbox = 1   # Use Mapbox.com for maps, needs api key (mbapi in ApiKeys.py)

And re-reading your comment: do you still have radar definitions in your Config.py?

cranesoft commented 5 years ago

I have Mapbox enabled in my config (usemapbox = 1) and I have radar1 through radar4 defined as well.

Upon a closer view of the new Config-Example.py I see that by default radar1 through radar4 have 'satellite' = 0 where I was setting those values to 1. I changed my config to reflect the example and all is good with the universe again! Thanks!

BertLindeman commented 5 years ago

A configuration setting that is easy to misunderstand due to the recent changes ;-) Glad you got it resolved.

n0bel commented 5 years ago

There's still one thing wrong.... The clock is crooked on your wall!

cranesoft commented 5 years ago

If you tilt your head it IS level! ;^)

feh123 commented 5 years ago

Just setup with api keys from Dark Sky and Mapbox for Cambridge UK. Works brilliantly with default settings. Thanks!