====== Map Suite Basic Styling ======

===== Video Overview =====
{{youtube>mROlfsJBHT4?large |Web API Basic Styling Learning Sample}}

<div newline></div>
<div download_viewsource_buttons tryitonline>
{{filehistory:WebAPIEditionSample_Styles_CS_151111.zip|C# Project}}
[[source_code_webapieditionsample_styles.zip|View Source]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/BasicStyling/leaflet/|Try It Online(Leaflet)]]
[[http://samples.thinkgeo.com/WebApiEdition/SampleTemplates/BasicStyling/openlayers/|Try It Online(Openlayers)]]

</div>
===== Overview =====
Map Suite provides a comprehensive set of styles which will cover most mapping requirements. Read more about the Map Suite Style Guide under [[Map_Suite_Style_Guide|Style Guide.]]
This basic styling sample for Map Suite WebAPI Edition will provide you with an introduction to the some of the available styles, including PointStyle, LineStyle, AreaStyle, CompoundStyles, and PredefinedStyles. Styles use pens, brushes and fonts to render your data on canvas. These can be used together to achieve desired effects.
<div newline></div>

===== Predefined Styles =====
<div captionwithborder floatright>
{{webapiedition:predefinedstyles.png?300}}
\\
//Using predefined styles for US highway and 
\\
major cities. including area, line, point.//
</div>

In this sample we render the data with predefined styles.

Area style :basemap and water

Line style :highway

Point style :poi (points of interest)


<div newline></div>
===== Area Style =====
<div captionwithborder floatright>
{{webapiedition:areastyle.png?300}}
\\
//Initialize style.//
\\
{{webapiedition:areastyleChanged.png?300}}
\\
//Changed style.//
</div>
Allows you to style areas such as polygons, ellipses and rectangles. In this sample we render schools and parks. You can render based on colors, set transparency and set the width of the borders.  

<div newline></div>
=====Line Style=====
<div captionwithborder floatright>
{{webapiedition:linestyle.png?300}}
\\
//Line style.
//
</div>

Renders lines and multilines. In this sample we render major roads in Frisco. Line styles have center pen, inner pen, and outer pen. You can use different colors to express traffic conditions.

<div newline></div>
=====Image Point Style=====
<div captionwithborder floatright>
{{webapiedition:imagepointstyle.png?300}}
\\
//Image point style.
//
</div>

Renders point with custom image. In this sample we render high schools in Frisco. We set the point type to bitmap, and give the path of image.

<div newline></div>
=====Symbol Point Style=====
<div captionwithborder floatright>
{{webapiedition:symbolpointstyle.png?300}}
\\
//Symbol point style,symbol type is triangle.
//
</div>

Allows you to render point with predefined symbol, including circle, square, triangle, cross, diamond, diamond2, star, star2. In this sample we using a triangle to mark the ThinkGeo headquarters. This is a great option if your don't have any custom images.

<div newline></div>
=====Character Point Style=====
<div captionwithborder floatright>
{{webapiedition:characterpointstyle.png?300}}
\\
//Character point style,character index is 72(H).
//
</div>

Allows you to render points based on a font. In this sample all hospitals in Frisco are rendered with an "H".

<div newline></div>
=====Style by Zoomlevels=====
<div captionwithborder floatright>
{{webapiedition:stylebyzoomlevels1.png?300}}
\\
//Zoomlevel :17//
\\
{{webapiedition:stylebyzoomlevels2.png?300}}
\\
//Zoomlevel :18//
\\
{{webapiedition:stylebyzoomlevels3.png?300}}
\\
//Zoomlevel :19//
\\
</div>

Styles can be assigned to ZoomLevels. In this sample there are four sets of styles, as you zoom in/out you are able to view the the different styles based on your current zoomlevels.

<div newline></div>
=====Compound Style=====
<div captionwithborder floatright>
{{webapiedition:compoundstyle.png?300}}
\\
//Compound style.
//
</div>

Create a compound style by combining multiple styles. In this sample we combine a circle and a star to show our office location.