Image options for features on the map

Chris_Marassovich1 · June 9, 2022, 12:32am

Hello ThinkGeo,

I am wondering what options I have for the images displayed for a feature on the Map?

I have looked over the doco and the samples repo and this is the set of options I believe I have.

Image file such as a png pulled from the local devices file system.
Use the inbuilt classes to build up an image using shapes (circle, square, triangle, etc) and pens to create color.

I am wondering are there any other options I am missing?
From a search through the forums I have seen mention to some form of an “icon pack”. These were very old posts and I think is a deprecated or not available option for my platform.

My platform is Xamarin Mobile … specifically producing Android and iOS apps.

Let me explain my scenario as it may help you understand what I am trying to achieve.
Using a scenario I have used before …
A Map showing Delivery vehicles.
The vehicles are moving, there can be a lot of them or very few and they will come and go from the map based on metadata. Data is fed to the map via signalr.

I am expecting a very busy and continually changing set of features on the map. Good visualization and color will really help the user to understand what they are looking at.

Of the many vehicles there will be many types with sub types so I need quite a range of styles for them. Lets say we have all different sizes of vehicles ranging from Semi-trailer down to small vans so I may want to have a different style for each of those variants. Then within each variant the sub type may be the transportation firm that owns the vehicle and I would need to distinguish that … possibly a variation on color for this. Additionally they may want to pivot that around and set a style for the transportation firm and color variants for the vehicle types. Depending on the data displayed the user may have varying style requirements.

I expect to offer up a range of a dozen styles with a variation on color within that style.

With such a range it would be reasonable for the user to want to set their own styles to suit their needs.

I am considering allowing the user to customize locally on the device and allow for customization on the server. Possibly allowing the server to specify a “super set” and then a small amount of local user customization.

As you can see this can get quite complicated to manage.
I envisage the potential perfect solution would be the user can simply assign what they want to use for each style and variation … thus pushing the complexity to the user. Such an assignment might simply be images on a web server that the app is given a URL to and it pulls that down.
That style of image is quite easy for Xamarin as it has controls to do just that (Image from a URL) but the Map samples simply use a png source file.

I am seeking information if there are any other options in ThinkGeo that I missed that may address this.
Also some advice/direction/guidance around my scenario I have laid out above.

Cheers
Chris …

Kyle_Day · June 10, 2022, 10:14pm

Hey @Chris_Marassovich1,

The icon pack that you’ve seen mention awhile ago was a collection of images that we sold a really long time ago and has been retired for some time now. Especially with the advent of a ton of more modern looking icons from Google Icons, Noun Project, and Font Awesome, managing our own icons seems redundant. Most of these providers have the option to download SVGs, which allow you to color the icons with a simple hex code because they are created using XML and can be converted to PNGs quite easily. Highly recommended for your situation.

But yes, essentially, you have two ways to display points: an image and basic shapes. I think for your situation, you’ll definitely need images. And I think you can use the FilterStyle class to display all of this. You can even nest into additional FilterStyles for the sub categories. Here’s an example with cars and trucks with nested sub types for red, blue, and green:

var carFilterStyle = new FilterStyle()
{
    Conditions = { new FilterCondition("VehicleType", "Car") },
    Styles = {
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Red Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/car-red.png")) }
        },
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Blue Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/car-blue.png")) }
        },
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Green Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/car-green.png")) }
        }
    }
};

var truckFilterStyle = new FilterStyle()
{
    Conditions = { new FilterCondition("VehicleType", "Truck") },
    Styles = {
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Red Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/truck-red.png")) }
        },
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Blue Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/truck-blue.png")) }
        },
        new FilterStyle()
        {
            Conditions = { new FilterCondition("SubType", "Green Co.") },
            Styles = { new PointStyle(new GeoImage(@"Resources/truck-green.png")) }
        }
    }
};

Given that you want the users to define this, you’ll probably want to use a JSON configuration that allows them to define the rules in a UI and send that JSON into your CreateStyles method to construct the FilterStyles by read that JSON config, but how you structure that JSON schema is entirely up to you.

Hope that gives you an idea/direction to go off of.

Thanks,
Kyle

Chris_Marassovich1 · November 3, 2022, 5:03am

Afternoon @Kyle_Day,

I would like to circle back onto this topic of what are my options with the PointStyle class.

Doco is scant in answering my question and the samples all simply use png files and the inbuilt shapes. This is in line with our previous posts, but I am seeing other stuff that is making me ask this question again.

Your website states icons, fonts, svg’s …etc
Data Visualization | ThinkGeo Core Features — ThinkGeo, GIS Mapping Made Easy

GeoImage can take a stream for the image … it never states anywhere (samples or doco) what the format is. Can you confirm what image stream formats can be used here please.
PointStyle can accept a Glyphfont of type GeoFont and a GlyphContent. No samples are using this but is this indicating I can make use of something such as Font Awesome here to style my Points?

I took our previous posts that a PointStyle is styled either of the two options:
1.from a png image or
2. the builtin basic shapes.

But the website (URL above) and the class definitions are giving me enough doubt to ask this question again.

Sorry if I am sounding repetitive.

Cheers
Chris …

Kyle_Day · November 3, 2022, 4:00pm

Hey @Chris_Marassovich1,

Not sure why SVGs are mentioned on the website as we don’t support them yet, but would like to. I’ll send in a change to PNG.

GeoImage supports PNG or JPG. Our plan is to support other formats in the future.
The GlyphFont is just a standard TFF font, such as a standard font like Arial or a glyph set like WingDings (which I don’t think exists on Android/iOS unless you install it). Font Awesome’s icons library uses SVGs as far as I’m aware.

So, in summation, PointStyles support 3 types:

PointSymbolTypes (Circles, Squares, anything in that enum)
Icons (PNG/JPG images)
Glyphs (standard text fonts)

I hope that clears things up for you. With your app, were you still thinking about using some sort of icon library like font awesome for your users to select styles? Might be something for us to look into supporting SVGs in the future.

Thanks,
Kyle

Chris_Marassovich1 · November 6, 2022, 11:59pm

Morning @Kyle_Day,

Thanks for the clarification.
I was being queried by other parts of our business about my statements of what is supported (based on your statements back in June).

The content on the website was enough for me to simply ask the question again so thank you for responding.

To respond to your questions …

SVG … not had a great time with SVG. In Xamarin Forms 4.x (I think) period they had SVG support via a 3rd party NuGet. It looked great and I went in on it. After time it turned out to be a pain. Often the SVG render would stop on either platform (iOS or Droid) and it appeared to occur simply between builds. The Lib maintainer could not always replicate (he did Dev from the Mac and many of the issue reporters were on Windows). It was simply an unpleasant period, and I am still backing out that move to SVG.

Xamarin Forms 5.x now supports Font Icons via the FontImageSource object. I quite like this, and it works well. You simply embed as a resource the .otf file and it just works on all the Xamarin platforms.
This would be nice if you implement some support around (either your own implementation or hook into the Forms implementation?) this but it is quite mobile specific, I guess.

I summary I am very happy with the PNG solution. As for SVG support I am still personally suffering from SVG PTSD.

Not sure I have offered much direction there. It is a hard space. The Website group, Desktop group and Mobile group will all have very different desires, I am sure.

Regards
Chris …

Kyle_Day · November 7, 2022, 6:27pm

Hey @Chris_Marassovich1,

Well I think that’s possible to support. As it turns out, the icons that we use for our vector maps is ironically a font. In fact, if you do the following in your PointStyle:

new PointStyle(new GeoFont("vectormap-icons", 16, DrawingFontStyles.Bold), "\ue0ab", GeoBrushes.Black)

You’ll get the icon we use to label universities:

For reference, I’m using our World Streets style JSON and picking out a point-glyph-content and using that unicode character.

The problem is that this isn’t opened up for you to use custom fonts in the API. I think I can do that, but it might take me some time to get to since we have a release coming up soon.

Thanks,
Kyle

Kyle_Day · November 10, 2022, 9:45pm

Hey @Chris_Marassovich1,

I found a workaround for you. The problem kind of comes from being an embedded resource on a mobile application. But we can move that resource to a cache directory and have GeoFont access it that way:

Add your font resource as an embedded resource in your application

Copy that font into a cache directory

private void CacheFont()
{
   var cacheFile = Path.Combine(FileSystem.CacheDirectory, "ionicons.tff");
   if (File.Exists(cacheFile))
       File.Delete(cacheFile);
   using (var resource = Assembly.GetExecutingAssembly().GetManifestResourceStream("ThinkGeo.UI.XamarinForms.Debug.Resources.ionicons.ttf"))
   using (var file = new FileStream(cacheFile, FileMode.Create, FileAccess.Write))
   {
       resource.CopyTo(file);
   }
}

Reference the full path to that cached font resource in GeoFont:

var symbolPointStyle = new PointStyle(new GeoFont(Path.Combine(FileSystem.CacheDirectory, "ionicons.tff"), 16, DrawingFontStyles.Bold), "\uf30c", GeoBrushes.Black)

And here is the result:

Hope that works for you.

Thanks,
Kyle

Chris_Marassovich1 · November 14, 2022, 12:51am

@Kyle_Day

Very nice. Works well.

Thanks for the effort!

AWESOME!

Cheers
Chris …

Kyle_Day · November 14, 2022, 4:27pm

Hey @Chris_Marassovich1,

Good to hear!

Thanks,
Kyle