Dynamic Grayscale Map View Background

[Grant_Stead]

Would love to be able to dynamically force the Map/XY background to grayscale. (Currently processing images with GC Functions to achieve this for XY backgrounds.)

I’ve seen maps on websites before in grayscale. Example: https://codepen.io/joe-watkins/pen/fsjrI

Also viewing maps in grayscale in general would allow the appsheet pins to really become highlighted… I bet most Appsheet devs would LOVE that option especially if it was dynamic.

[Fabian_Weller]

Hi @Grant_Stead Could you explain what you are doing right now and what you want to get? Maybe I’m stupid, but I don’t understand a word

[Grant_Stead]

We’re using XY with drawings that tend to be in color, highly detailed and thus very busy. So busy that the formatting on the pins doesn’t communicate well and get lost. So, we’re working on taking uploaded images, and converting them to greyscale and posting that image back to be used as the background.

[Fabian_Weller]

Hi @Grant_Stead just something that came into my mind.
Do you icons for your map pins?
I use the icon “spinner-third” . The pin gets bigger and it has a nice look
By adding transparency, you can also see the background image.

--------->

You could also try “Minimum Cluster Size” in your map view.
Those numbers will also have transparency.

[Grant_Stead]

That spinner third does look slick. Almost like “catch light.” Better than the circle I usually put in to make the pins bigger… I field tested the clustering. People didn’t like it. The applications I’m building tend to be for visual management. So the pins all turn different colors based on actions that need to be taken. So, at a glance you can see issues, or what needs attention. With the clustering, that core concept starts to breakdown.

[Fabian_Weller]

Got it. In this case clustering is not effective.

[Grant_Stead]

I edited my original post to provide a little more clarity.

[Grant_Stead]

@Fabian do you see how that code in my post uses this filter…

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

I wonder if we could do something like that in the different image/kml stuff you’ve been experimenting with?

[Grant_Stead]

It looks like google maps released “styled maps” in V3 10+ years ago, I feel like Appsheet could expose grayscale. I also think it would make the pin coloring/icons so much more dynamic.

stackoverflow.com

Google Maps in Grayscale

javascript, google-maps

asked by DLiKS on 10:46AM - 23 Oct 10 UTC

#TeamAppSheet

[Fabian_Weller]

I don’t know how we could use this filter.

But I got inspired by you

Make a map or XY background image lighter or darker Tips & Tricks 💡

Using this method you can make it brighter or darker a XY Background Image or a Map. In fact this is just a white or black that has transparency used for image overlay. The Pin would appear better. Original [image] Brighter: [image] Darker: [image] Original: [image] Brighter: [image] Darker: [image] The KML for the XY would look like this: <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="h…

[Fabian_Weller]

Maybe @Jonathon can help us? Do you know how we could use this SVG filter with a xyXY background image?

[Grant_Stead]

Good idea! @Jonathon is the man!

Also, I might roll with your KML situation. It rocks!

[Jonathon]

With respect to maps, I think you’re right Grant that it should be easy for appsheet to turn on a greyscale basemap.

I do mapping quite a bit for work and frequently use open street map to download and work with basemaps. They have an API where you can specify a bounding box to download regions - this might simplify your workflow? And of course you can set the basemap to greyscale, as well as lots of other different styles. Mapbox is also good for this, but I haven’t used it as much.

wiki.openstreetmap.org

Static map images - OpenStreetMap Wiki

I’ll take a look at this filter anyway - there would be interesting use-cases for greyscaling images in appsheet beyond mapmaking

[Jonathon]

Yes, you can apply the filter to images with SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
  <defs>
    <filter id="grayscale">
      <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>
    </filter>
  </defs>
  
  <g filter="url(#grayscale)">
    <circle fill="rgb(255,100,0)" cx="0" cy="0" r="100"/>
    <circle fill="rgb(0,0,205)" cx="0" cy="0" r="66"/>
    <circle fill="rgb(0,255,0)" cx="0" cy="0" r="33"/>
  </g>
</svg>

You could do it to a raster image by first encoding the raster to base64. Although if you are preprocessing the images, then It would be better to just greyscale them at that point rather than doing this in the application? I’m not personally a fan of using raster imagery in SVG’s.

CodePen

Greyscale

...

[Jonathon]

Apologies for the spam; I believe your best workflow would be to use MapBox API for static images.

It lets you pass parameters through URL to return a static map image, for example:

<!-- Retrieve a map at -87.0186 longitude, 32.4055 latitude, -->
<!-- zoom 14, bearing 0. Pitch will default to 0. -->
<!-- The map will be 500 pixels wide and 300 pixels high. -->
<img
src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-87.0186,32.4055,14/500x300?
access_token=YOUR_MAPBOX_ACCESS_TOKEN">

---

Pricing

Mapbox pricing info

[Fabian_Weller]

Hi @Grant_Stead I just found a service to do the grayscale by using a filter:

cloudimage.io

Cloudimage - Europe's leading Image CDN

Cloudimage solves the problem of slow loading image-heavy sites by automatically optimizing all images for best quality and compression ratio, adjusting for individual device screen size and delivering through a dedicated image CDN network.

I learned about it in this post:

Appsheet Image URLs with URL API Questions

I’m trying to use Cloudimage, using it as a URL based API, to add watermarks to images within appsheet (similar to what has been done before with filestack). I’m using the GetTableFileURL expression to generate the appsheet image URL which is working just fine, but the URL generated isn’t working with Cloudimage. I’m assuming that has something to do with the way appsheet stores the images? I can get Cloudimage to work with any standard image url, but not the one appsheet produces.