Add in greyscale basemap

[wu-lee]

A quick look at Stamen doesn't bode well - their page here doesn't seem to work:

https://maps.stamen.com/test/leaflet.html

Not sure why, the browser debug console the server just isn't responding to tile requests.

Makes me wonder how spotty their service is. The alternative is hosting their tiles ourselves, which would be lots of MB.

[wu-lee]

OSM Greyscale here: https://github.com/Zverik/leaflet-grayscale (see demo link on this page)

[wu-lee]

Omniscale also have an OSM greyscale: https://maps.omniscale.com/en/examples/leaflet_grayscale

[wu-lee]

And there's apparently a way to apply a greyscale transform via CSS:

https://github.com/PaulLeCam/react-leaflet/issues/143#issuecomment-224057041

[wu-lee]

I'm guessing you mean Stamen TonerLite (can't find one literally called just "Lite").

There's a cached version at https://stamen-tiles.a.ssl.fastly.net which works, as used here:

https://leaflet-extras.github.io/leaflet-providers/preview/

Filed a bug with them: https://github.com/stamen/maps.stamen.com/issues/164

So this means I can now test it out. See https://homemakeroxford.org/map/

[wu-lee]

I notice a bit of flickering colour when zooming - seems like the default map gets rendered for a fraction, then replaced? Tried fadeAnimation: false option as per https://github.com/Zverik/leaflet-grayscale README suggestion, without success. Googling hasn't found a solution yet.

[wu-lee]

Ideally use map as shown here [in @JasLewicki feedback doc 2/11] with less focus on roads ... @Charlie-TbD to provide

[wu-lee]

Update from last meeting: decision is now to try the grayscale transform mentioned above: https://github.com/TransitionbyDesign/homemaker/issues/31#issuecomment-719692798

Reason: reduces the flicker (also mentioned above) and we want to avoid Stamen TonerLite's overemphasis on roads.

[Charlie-TbD]

I think this map looks pretty cluttered which destracts from the pins - the one in the WhoOwnsOxford website perfectly matches Jas's map. I'm not in a position to ask the WhoOwnsOx developer for that right now is there any way you can search the code for the map reference?

http://whoownsoxford.letsdance.agency/#/stories https://github.com/johnpuddephatt/oxford

[wu-lee]

Checking the network accesses my browser makes on the WOO site, the tiles are hosted on mapbox.com, with urls like this:

https://api.mapbox.com/styles/v1/johnpuddephatt/cjtajqi1z19f31gl80guf6t1k/tiles/13/4067/2714?access_token=<redacted>

Which suggest this is a tileset hosted on behalf of John Puddephatt, and so might be anything, perhaps custom rendered. But the attribution at the bottom of the map suggests to me it's Ordnance Survey map tiles:

Reproduced with permission of HM Land Registry. © OpenStreetMap. © Crown copyright and database rights 2019 Ordnance Survey 100026316

The "HM Land Registry" link is to to https://www.gov.uk/guidance/inspire-index-polygons-spatial-data

There are these terms of use: https://use-land-property-data.service.gov.uk/datasets/inspire#use_the_data

The TL;DR is I think: a non-commercial, attribution license. But they don't host the tiles in a form Leaflet can use directly, so you need to transform them and then host them somewhere yourself (at your own expense). Which I infer is what John is doing.

Then again, looking at the source code, src/components/Map.vue mentions mapbox.streets, and searching for that finds this:

https://www.mapbox.com/maps/streets

And although that doesn't look like the WOO map, on the same page there is the "Light" style, which looks to me quite similar (although not exactly the same):

• Light, also
• Dark
• Outdoors, and
• Satellite

Mapbox maps have a free tier, but you have to fork up a few dollars once you cross 50k "page loads" per month.

https://www.mapbox.com/pricing/

[Charlie-TbD]

Wonderful, thanks for looking into that - yeah looks like the mapbox Light tiles. Question is whether using those tiles will have the loading issue we were getting before.

I can't imagine we'll hit 50k but in that case we'd pay for it (or claim it's a project trying to do good) if we did get that kind of reach.

On Thu, 5 Nov 2020 at 12:43, wu-lee notifications@github.com wrote:

Checking the network accesses my browser makes on the WOO site, the tiles are hosted on mapbox.com, with urls like this:

https://api.mapbox.com/styles/v1/johnpuddephatt/cjtajqi1z19f31gl80guf6t1k/tiles/13/4067/2714?access_token=

Which suggest this is a tileset hosted on behalf of John Puddephatt, and so might be anything, perhaps custom rendered. But the attribution at the bottom of the map suggests to me it's Ordnance Survey map tiles: Reproduced with permission of HM Land Registry. © OpenStreetMap. © Crown copyright and database rights 2019 Ordnance Survey 100026316 The "HM Land Registry" link is to to https://www.gov.uk/guidance/inspire-index-polygons-spatial-data There are these terms of use: https://use-land-property-data.service.gov.uk/datasets/inspire#use_the_data The TL;DR is I think: *a non-commercial, attribution license*. But they don't host the tiles in a form Leaflet can use directly, so you need to transform them and then host them somewhere yourself (at your own expense). Which I infer is what John is doing. Then again, looking at the source code, src/components/Map.vue mentions mapbox.streets, and searching for that finds this: https://www.mapbox.com/maps/streets And although that doesn't look like the WOO map, on the same page there is the "Light" style, which looks to me quite similar (although not exactly the same): - Light , also - Dark - Outdoors , and - Satellite Mapbox maps have a free tier, but you have to fork up a few dollars once you cross 50k "page loads" per month. https://www.mapbox.com/pricing/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe .

--

Charlie Fisher

Housing Lead Transition by Design

Transition by Design are currently working remotely from home. Our office at Makespace is closed due to government advice in light of the Coronavirus (COVID-19) pandemic

If you would like to stay up to date with project news and the latest events form the T/D studio, please sign up to receive our newsletter http://eepurl.com/dze1Yv (read our past newsletters here https://us14.campaign-archive.com/home/?u=fb5310c7b0a1e22be5ec6588b&id=e4f24c516b)

twitter: @fisher_charlie http://twitter.com/fisher_charlie

Tel: +44 (0)1865 554 927 Mob: +44 (0)7816 294 678

Transition by Design Studio

Makespace Oxford

1 Aristotle Lane

Oxford

OX2 6TP (Parking: OX2 6TT)

Transition by Design' is the trading name of Transition by Design Cooperative CIC. It operates under the ICA principles for Cooperatives and is registered with Companies House and the Community Interest Company Regulator. Company Number: 9664511

[wu-lee]

I think the mapbox servers will be more reliable, since they're basing their business on it, and Mapbox seem relatively big. The Stamen tileservers seem to me to be a free service designed to get Stamen's other paid services visibility, so not as directly business-critical, plus Stamen look a bit smaller.

[wu-lee]

Ok, to use Mapbox services, then @TransitionbyDesign would need to create an account, and then obtain an API key. This may also require inputting credit card details or similar. Is this something you want to do?

[wu-lee]

The CSS filtering trick also seems to make the map panning on my phone very stiff and sluggish. It improves when I disable the filtering.

[Charlie-TbD]

OK will do this. Thanks

On Thu, 5 Nov 2020, 15:59 wu-lee, notifications@github.com wrote:

Ok, to use Mapbox services, then @TransitionbyDesign https://github.com/TransitionbyDesign would need to create an account, and then obtain an API key. This may also require inputting credit card details or similar. Is this something you want to do?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TransitionbyDesign/homemaker/issues/31#issuecomment-722431299, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARHKWLTCR364UAB2WDP3B5LSOK4TNANCNFSM4TEZ57PQ .

[wu-lee]

Re: API token. Bear in mind these tickets are public! I have this info by email notification now, so deleting the above, will move into somewhere protected on this project and reference it here.

[wu-lee]

This also now done. I've stored the API key in about as secure a way as seems possible in this context, as suggested in the Gatsby docs:

https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/#client-side-javascript

Anyway, this means it's not committed to the source code, and is picked up from a GitHub "secret" set in the project settings. So visible in the browser debug pane, but nowhere else.

Seems to work! I've also realised why it was doubling the layers and creating flicker - shouldn't do that any more.

[Charlie-TbD]

Still load time on map tiles when coming to the website fresh but will move to done.