ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
======  Map Suite MVC Edition Styles Samples  ======
<div sampleitem>
==== Default ValueStyle ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Wpf Edition Sample Default ValueStyle.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WpfEditionSample DefaultValueStyle CS 110218.zip|View Source]]
{{:File:WpfEditionSample DefaultValueStyle CS 110218.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== Distance Line Style ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Web Edition Sample Distance Line Style.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WebEditionSample_DistanceLineStyle_CS_100611.zip|View Source]]
{{:File:WebEditionSample_DistanceLineStyle_CS_100611.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== EditOverlay Styles ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Web Edition Sample EditOverlay Styles.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WebEditionSample_EditOverlayStyles_CS_100910.zip|View Source]]
{{:File:WebEditionSample_EditOverlayStyles_CS_100910.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== Line Style With Increment ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Desktop Edition Sample Line Style With Increment.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_DesktopEditionSample_LineStyleWithIncrement_CS_110307.zip|View Source]]
{{:File:DesktopEditionSample_LineStyleWithIncrement_CS_110307.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== Multiple Dot Density Styles ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Wpf Desktop Edition Sample Multiple Dot Density Styles.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WpfDesktopEditionSample_MultipleDotDensityStyles_CS_101110.zip|View Source]]
{{:File:WpfDesktopEditionSample_MultipleDotDensityStyles_CS_101110.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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).
</div>
</div>

----
<div sampleitem>
==== MultiLine Labeling ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Wpf Desktop Sample MultiLine Labeling.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WpfDesktopEditionSample MultiLineLabeling CS 110316.zip|View Source]]
{{:File:WpfDesktopEditionSample MultiLineLabeling CS 110316.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== Projection Distance LineStyle ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Web Edition Sample Projection Distance LineStyle.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WebEditionSample_ProjectionDistanceLineStyle_CS_100902.zip|View Source]]
{{:File:WebEditionSample_ProjectionDistanceLineStyle_CS_100902.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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. 
</div>
</div>

----
<div sampleitem>
==== Side View Icon ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Web Edition Sample Side View Icon.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_DesktopEditionSample_SideViewIcon_CS_091104.zip|View Source]]
{{:File:DesktopEditionSample_SideViewIcon_CS_091104.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
<div sampleitem>
==== Smooth Transparent Route ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Web Edition Sample Smooth Transparent Route.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_DesktopEditionSample_RoutingExtension_SmoothTransparentRoute_CS_100615.zip|View Source]]
{{:File:DesktopEditionSample_RoutingExtension_SmoothTransparentRoute_CS_100615.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
In the Routing extension, the API GetRoute of the RoutingEngine returns a MultilineShape made of a collection of LineShape. By default, the MultilineShape has LineShapes for each two vertex line segment. The result in the displaying of the route using some transparency is a route that looks dotted and irregular. In this project, we show the trick to get one continuous LineShape which will show as smooth and regular. We recognized that the default result is not the most adequate in most cases and we will correct that for the next major release of the Routing extension. In the meantime, you can use that project to get the result that you want to display your routes. 
</div>
</div>

----
<div sampleitem>
==== Weather Line Style ====
<div screenshot>
{{mvcedition:codesamples:Map Suite Wpf Desktop Edition Sample Weather Line Style.jpg?300x180}}
</div>
<div content>
<div download_viewsource_buttons>
[[Source_Code_WpfDesktopEditionSample WeatherLineStyle CS 110325.zip|View Source]]
{{:File:WpfDesktopEditionSample WeatherLineStyle CS 110325.zip|C# Download}}
</div>
<div sample_otherlinks>
[[Map Suite Samples Applies To|Applies To: MVC \ Desktop \ Web \ Silverlight \ Service \ Wpf]]
\\
[[Map Suite Samples Alternate Languages | Need it in another language?]]
</div>
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.
</div>
</div>

----
{{page>Map Suite Services Edition Styles Samples}}
Map Suite UI Controls

MapSuite GIS Services

Free Tools

Professional Services

Support & Learning

About ThinkGeo

User Tools

Site Tools

Page Tools

Map Suite UI Controls

MapSuite GIS Services

Free Tools

Professional Services

Support & Learning

About ThinkGeo
