ThinkGeo.com    |     Documentation    |     Premium Support

Image options for features on the map

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.

  1. Image file such as a png pulled from the local devices file system.
  2. 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 …

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