User Tools

Site Tools


map_suite_web_edition_faq_styles

Table of Contents

Map Suite Web Edition FAQ Styles

Is there something faster than the ValueStyle?

This question has a corresponding sample application(s) associated with it.

Sample: Cached Value Style

The MapSuite API provides a Value Style as you can see in the sample app “Draw features based on value”. This is a great way to display feature features based on some value of a column. With this style and any other styles offered by the MapSuite API, each time the map has to redraw the value for each feature within the current extent has to be fetched. This can affect the performance especially if a large number of features are used. With CachedValueStyle, the value for each feature is cached into memory to reduce the overhead of having to go and fetch the value for each feature each time the map has to draw. Using this CachedValueStyle has a benefit on performance but you need to pay attention on memory usage.

How do I cluster multiple points into one point for display?

Sample:ClusterPointStyle

In this project, you will see how to use a custom style, ClusterPointStyle for clustering various features into one. Sometimes, the map may have many features stacked on top of each other at high zoom levels making the map too busy and difficult to read. Clustering is a usefull technique in those situation making the map more readable. It groups together various features into one symbol with the count of all the features being labeled.

There are many ways for finding the location of the cluster point. One of the simplest is to use the center of gravity of all the clustered features as used in this project.

In this project, we are using volcanoes because natural phenomenon are usually good candidates for being clustered.

How do I display a label in real world dimensions?

This question has a corresponding sample application(s) associated with it.

Sample:World Sized Text Style

At the request of a client, today we have a project showing how to have an ImageStyle of real world dimension. A good example to show that is to use an image representing a cruise ship. Knowing that the ship is of 300 meters of length and 90 meters of width, we can use an image representing a ship and set those dimension to it. It will be drawn on the map always at those dimensions regardless of the zoom level. The logic used for this is very similar to what we saw in the project World Sized TextStyle but applied to images.

How do I display an icon in real world dimensions?

This question has a corresponding sample application(s) associated with it.

Sample:World Sized Image Style

At the request of a client, today we have a project showing how to have an ImageStyle of real world dimension. A good example to show that is to use an image representing a cruise ship. Knowing that the ship is of 300 meters of length and 90 meters of width, we can use an image representing a ship and set those dimension to it. It will be drawn on the map always at those dimensions regardless of the zoom level. The logic used for this is very similar to what we saw in the project World Sized TextStyle but applied to images.

How do I word wrap my labels?

This question has a corresponding sample application(s) associated with it.

Sample:WordWrapped TextStyle

In the Discussion Forum post “Display word-wrapped text”, there is a discussion on how to implement a TextStyle doing word wrapping. In this project, you will actually find a working implementation. Notice that by using the class WordWrappingTextStyle, word-wrapping is applied according the proportion of the size of the text to the size of the bounding box of the feature to label. This means that the label can be word-wrapped or not depending on the zoom level.

You can find the discussion forum post on that topic at:

http://gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/21/aft/6421/afv/topic/Default.aspx

How do I draw features differently based on column values?

This question has a corresponding sample application(s) associated with it.

Sample:ValueStyle with Countries

In today’s project, we revisit the ValueStyle class that is introduced in the “How Do I” sample app “Draw Features Based on Values”. In that sample app we show how to use the ValueStyle on a point based layer to display cities according to their population rank. In today’s Code Community project, we apply the ValueStyle to the polygon based countries layer (supplied with the sample apps). The countries layer has a column named “Color_map” with values from 1 to 8. Each number is assigned a color; that way the countries are displayed with 8 various colors on the map helping to distinguish them easily. Also, in this project, we pay attention to some advisable cosmetic practices for using light or pastel colors. As a general rule, it is recommendable to use lighter colors for displaying general background features such as countries rather than brighter ones to have a more pleasing visual experience for the map users.

How can I display decimal degrees as degrees, minutes and seconds?

This question has a corresponding sample application(s) associated with it.

Sample:Decimal Degrees Formatting

The purpose of this project is to complete the static class DecimalDegreesHelper. This class offers functions to go to and from Decimal Degrees but it lacks the functions handling various formats such as Degrees Decimal Minutes and Degrees Minutes Decimal Seconds. Those formats can be output by different GPS devices and it is handy to know how to manipulate them and convert them to Decimal Degrees, the only format that can be input into a GIS or Mapping application.

How do I display a point based on real time data such as the current time?

Sample:Time Based Point Style

This project shows how to create a custom style to display info based on some live data. Here we display world capital with a symbol for day or for night according to the local time. The method GetRequiredColumnNamesCore is overridden to make sure the column for the time zone is used. The method DrawCore is also overridden. It contains the logic to determine if a feature is within day time or night time according to the time zone column and the system time on the machine.

How do I label each line in a MultiLineShape?

This question has a corresponding sample application(s) associated with it.

Sample:TextStyle for Multi Line

If you are labeling features based on MulilineShapes, using the default TextStyle, only one line of the collection of lines making up the MultilineShape is going to be label. In today’s project, we show how to create a new class inheriting from TextStyle that will label all the lines of the MultilineShapes. That behavior is similar to the property LabelAllPolygonParts of DefaultTextStyle for polygons.

How can I show one-way streets arrows on my roads?

This question has a corresponding sample application(s) associated with it.

Sample:Displaying One-Way Streets

In the Discussion Forum Post “Drawing one-way streets in the map”, we have a question on how to display an arrow on a street that is one way as Google Map does. In this project, we show the solution by creating a LineStyle specifically for that purpose. We take the shapefile “AustinWithOneWayRoad.shp” from the sample app “Route On One-Way Roads” of Map Suite Routing Extension to display the arrow according to the traffic direction on the one-way streets.

How do I draw a line with a different start and end style?

This question has a corresponding sample application(s) associated with it.

Sample:Start End LineStyle

Today, we are looking at how to extent LineStyle to have a style for lines that shows the start and end points. This is useful to display line features with that custom LineStyle if you are mindful of the order it was digitized and you want to know the direction of the lines. This project is similar to previous ones where LineStyle is extended such as “One Way Streets” and “Distance Line Style”.

How do I display the distance of a line as label?

This question has a corresponding sample application(s) associated with it.

Sample:Distance Line Style

This Web project shows how to create a new style class CustomDistanceLineStyle inheriting from LineStyle class. You can pay attention to how the DrawCore function is override for a very specific need of style: displaying the distance label on each line segment making up a LineShape. In addition to the overriding of the DrawCore function, you will find useful some geometry functions such as GetPointOnLine to find the midpoint of a line segment and GetAngleFromTwoVertices to incline correctly the labels according to the orientation of each line segment. You will notice that the CustomDistanceLineStyle works for features made of LineShape and you will have to slightly modify to have it working with MultilineShape.

How do I display a point as a doughnut shape?

This question has a corresponding sample application(s) associated with it.

Sample:Doughnut Point Style

This project shows how to create a doughnut point style as this style is not offered by the MapSuite API. DonutPointStyle inherits from PointStyle and you will notice that in the overridden method DrawCore, no reference to any GDI + API is used. That means that this style is drawing system independent.

How do I draw points where the size is proportional to a column value?

This question has a corresponding sample application(s) associated with it.

Sample:Sized Point Style

Creating a Custom Style is a great way to encapsulate custom logic draw symbol based on some values. This project shows that using the concrete example world capitals. In this example, we draw capitals as circles with the size proportional to the population. We create the class SizedBasedPointStyle inheriting from PointStyle. We override the method DrawCore for the drawing logic. We also override the method GetRequiredColumnNamesCore to make sure we have the column for Population that will be used in DrawCore method to calculate the correct size of the circle for each feature.

How do I rotate a side view icon based on its heading?

This question has a corresponding sample application(s) associated with it.

Sample:Side View Icon

This project is a little bit similar to the previous one Rotate Icon. It shows how to display correctly side view icons of moving vehicles. With top down view icons of vehicle, you simply rotate the icon according to the direction of the vehicle. But with side view icons of vehicle, it is a little bit trickier and you have to use a pair of icons. This project shows how to handle that and also how to calculate the direction of a vehicle based on the current GPS reading and the last one.

How do I change the style of shapes being edited?

This question has a corresponding sample application(s) associated with it.

Sample:EditOverlay Styles

In today’s Web project, we learn how to control the styles of the EditOverlay for both the default style and the editing style. In order to accomplish this, we write some javascript code. Look at the code in the “script” tag to see how we can control the fill color, the opacity, the border width etc of the features in the EditOverlay.

How do I draw an icon that flashes?

This question has a corresponding sample application(s) associated with it.

Sample:Flashing Point Style

In this project, we explore how to create a point style that flashes. Here we take the example of a vehicle moving around based on GPS location and flashes when entering prohibited zones. I think that this project will inspire people working on building a vehicle tracking application. This project is a general solution for a Servicess edition. Notice that we are using two MapEngines with one only for drawing the flashing vehicle to avoid redrawing the other layers at each flashing.

Later, we will publish projects specifically adapted for the Desktop and Web editions.

How do I make a text larger or smaller based on the current scale?

This question has a corresponding sample application(s) associated with it.

Sample:Scaling TextStyle

This project shows how to create a Style inheriting from TextStyle to have the label sizing according to the scale. You will see that the logic of scaling is basically the same as the on in the previous project “ScalingImageStyle” but applied to TextStyle.

How do I make an icon larger or smaller based on the current scale?

This question has a corresponding sample application(s) associated with it.

Sample:Scaling Image Style

This project presents a useful case where you want to have the icon representing a feature to be sized in proportion to the current scale. It is little bit similar to what we show in the project SizedPointStyle exept that the size of the symbol is based on the scale, not on some values specific to each feature. That explains why in the class ScalingImageStyle, the method GetRequiredColumnNames is not overriden. The whole drawing logic can be contained in DrawCore.

How do I create a custom style to display routes?

This question has a corresponding sample application(s) associated with it.

Sample:Routing Styles

The API for the Routing extension product provides a class RoutingLayer. RoutingLayer is basically a convenient layer to have the features for routing being displayed in a default way. You can add the start, end point, the routes and it is going to display that nicely for you without much work on your side. While this is convenient, you may be in the situation when you want more control on the styles and have the whole flexibility that an InMemoryFeatureLayer gives you. In this project, we show how to display in InMemoryFeaturesLayers the start and end points, as well as the resulting route using the full power of InMemoryFeatureLayer such as zoom levels and custom styles.

How do I rotate an icon based on a column value?

This question has a corresponding sample application(s) associated with it.

Sample:Rotate Icon

In the “How Do I” windows apps, there is sample “Efficiently Move A Plane Image” that shows a plane moving across the map from west to east along the Great Circle path. A flaw in this sample is that the plane is always shown flying in one direction regardless of the curve of the path. In today’s project, we learn to correct that by setting an angle to the image. The key function is GetAngleFromTwoVertices. You can take this function is apply it to your vehicle tracking needs. It can be used to display any moving vehicle with the orientation according to the heading direction.

Sample:Rotated Image Style

This project shows how to use an icon to rotate it according to the direction of some GPS readings. An InMemoryFeatureLayer is used with various Features representing vehicles. For representing the symbol a Custom Style is created inheriting from Style. Notice that the Custom Style overrides the methods DrawCore and GetColumnNamesCore. You will also see how to update the X and Y value of the PointShape making up each feature. This project is based on the Servicess edition, I recommend also to look at the project Vehicle Direction which is a Desktop App. The difference is in the use of the Layers and the drawing techniques to update the position and symbol of the features.

Sample:Vehicle Direction

This project is similar to RotatedImageStyle project, but shows in more detail how to use RotatedImageStyle with the Desktop edition. You will see the technique on how to use the Desktop specific OverLays collection to update each Layer. This project forms a good foundation for displaying moving vehicles on a Desktop application.

How do I rotate a feature's text similar to word wrapping?

This question has a corresponding sample application(s) associated with it.

Sample:Hybrid TextStyle

This project is a follow up to the Discussion Forum post http://gis.thinkgeo.com/Support/DiscussionForums/tabid/143/aff/21/aft/6652/afv/topic/Default.aspx Rotating the feature text (similar to wordwrap). In this project, we create a new Text Style combining word wrapping that we saw in the project http://code.thinkgeo.com/projects/show/wordwrapped and text rotation. You can see the labels word wrapping and rotating in harmony with the resizing and rotating of the shapes.

How do I measure the distance of a line accurately in different projections?

This question has a corresponding sample application(s) associated with it.

Sample:Projection Distance LineStyle

This Web project is similar to the project “Distance Line Style”. Here we show how to use a projection of choice different from the projection used on the map. For example, you may have your map using Google map as a background. Google map uses Spherical Mercator projection which is not ideal for distance measurements, that is why using a more appropriate projection for distance measurement such as State Plane will give more accurate results. The CustomDistanceLineStyle inheriting from LIneStyle has the logic built in to have the distance calculated based on a projection of choice instead of the projection of the map. As for the previous project “Distance Line Style”, you can see how the DrawCore function is overridden for the a specific need of style: displaying the distance label on each line segment making up a LineShape. In addition to the overriding of the DrawCore function, you will find useful some geometry functions such as GetPointOnLine to find the midpoint of a line segment and GetAngleFromTwoVertices to incline correctly the labels according to the orientation of each line segment. You will notice that the CustomDistanceLineStyle works for features made of LineShape and you will have to slightly modify to have it working with MultilineShape.

How do I set multiple dot density styles on the map?

This question has a corresponding sample application(s) associated with it.

Sample:Multiple Dot Density Styles

In this sample, we are looking in a little more detail at the DotDensityStyle. You can combine different DotDensityStyles on one FeatureLayer using different columns. Demographic data are usually well fit to be used with that type of style. Here each dot of a certain color represents 100,000 persons of the same age group by state. Using multiple DotDensityStyles, the dimension of age group demographics is added to the representation of population density. Note that the PointToValueRatio is used to set how many people a dot is going to represent. For example, if you want a dot to represent 100,000 persons, you set it to 0.00001 (1 / 100000). If you want it to be 500,000 persons, you set it to 0.000002 (1 / 500000).

How to create a cutomer valuestyle?

This question has a corresponding sample application(s) associated with it.

Sample:Default ValueStyle

In today’s Wpf project, we demonstrate the extensibility of ThinkGeo API by creating a custom Style. Inheriting from ValueStyle, we create a Default Value Style that handles the drawing of features that don’t have a value defined in the ValueStyle. Here we are using a point based layer with PointStyle. Note that the Default ValueStyle would also work with line and polygon based layers.

How to create a line style with increment?

This question has a corresponding sample application(s) associated with it.

Sample:Line Style With Increment

In today’s winforms desktop project, we expend on the functions of DistanceLineStyle shown on a previous sample, “Distance Line Style”. Here we show how to create a custom LineStyle for showing distance increment at a regular interval (every tenth kilometers). Having this LineStyle can be very handy when dealing with line network such as roads or railways.

How do I display multi line labeling?

This question has a corresponding sample application(s) associated with it.

Sample:MultiLine Labeling

For labeling purpose, TextStyle has a property called LabelAllPolygonParts that will label all the parts making up a polygon based feature. Unfortunately, we don’t have an equivalent API for labeling all the parts of a line based feature. But thanks to the flexible framework of Map Suite, we show in this Wpf sample how easily you can expand the TextStyle class to allow this labeling capability. Look at the custom class MultiLinetextStyle and how DrawCore function is overridden to have the expected labeling behavior.

How to create a weather line style?

This question has a corresponding sample application(s) associated with it.

Sample:Weather Line Style

In this Wpf sample, we learn how to extend LineStyle class to create a style for representing weather fronts such as cold front, warm front and occluded front for your weather maps. To achieve that styling a regular LineStyle is used for the front line itself. For symbolizing the type of front an icon is used. Notice the two handy properties to give you more control: Spacing property to adjust the distance in screen coordinate between each symbol on the line and Side property to control on what side of the line front the symbols should appear. Of course, as you zoom in and out on the map the spacing between each symbol remain the same as it is set in screen coordinate.

Can I create isolines (a.k.a. contour lines) with Map Suite?

This question has a corresponding sample application(s) associated with it.

Sample:Isolines

Yes. Starting with build 5.0.87.0 of Map Suite, you can add isolines to your applications with Map Suite – please see the code sample linked above. For the uninitiated, isolines are a way to visualize breaks between different groups of data such as elevation levels, soil properties, or just about anything else you can imagine. The above code sample also shows the various steps in creating isolines, including the gathering of point data, creating a grid using interpolation, and finally, picking your isoline break levels. We also quickly dive into some more advanced options such as generating isolines on the fly. To bring this all together, check out our instructional video that will walk you through the process of setting up and working with isolines in Map Suite.

map_suite_web_edition_faq_styles.txt · Last modified: 2015/09/16 10:31 by admin