Dynamic Grayscale Map View Background

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.

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 :upside_down_face:

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.

1 Like

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 :slight_smile:
By adding transparency, you can also see the background image.

image ---------> image

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

1 Like

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. :frowning:

1 Like

Got it. In this case clustering is not effective.

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

1 Like

@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?

1 Like

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.

#TeamAppSheet

1 Like

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

But I got inspired by you :wink:

1 Like

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

1 Like

Good idea! @Jonathon is the man!

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

1 Like

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.

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

1 Like

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.

1 Like

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

image

2 Likes

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

I learned about it in this post:

1 Like

@Fabian thanks for being on the lookout! Unfortunately, unless I’m mistaken, we need to have legit images if we want them to be downloaded for offline use. (URL based images won’t be downloaded for offline use)

1 Like

You are absolutely right.

1 Like