map_suite_styling
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
map_suite_styling [2015/11/16 08:14] tgwikiupdate [Predefined Styles] |
map_suite_styling [2015/12/03 09:33] (current) tgwikiupdate [Video Overview] |
||
|---|---|---|---|
| Line 5: | Line 5: | ||
| <div newline></div> | <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 ===== | ===== Overview ===== | ||
| - | Map Suite provides a comprehensive set of styles which will cover most mapping requirements. Read more about the Map Suite Style Guide at [[Map_Suite_Style_Guide|Style Guide.]] | + | 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.]] |
| - | In this sample, we show how to visualize data with basic styles in Map Suite WebAPI Edition, including PointStyle, LineStyle, AreaStyle, CompoundStyles and PredefinedStyles. Styles use pens, brushes and fonts to draw data on the canvas. These tools can be used in various combinations to achieve interesting effects. Each style may use different combinations of these tools. | + | 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> | <div newline></div> | ||
| Line 19: | Line 26: | ||
| </div> | </div> | ||
| - | In this sample, we render map with some predefined styles. | + | In this sample we render the data with predefined styles. |
| - | Area style :base land and water | + | Area style :basemap and water |
| Line style :highway | Line style :highway | ||
| - | Point style :poi | + | Point style :poi (points of interest) |
| Line 39: | Line 46: | ||
| //Changed style.// | //Changed style.// | ||
| </div> | </div> | ||
| - | Render areas such as polygons, ellipses and rectangles.In this sample we render three areas.Area style has fill solid brush and Outline pen.Brush has color and alpha.Pen width also include color and alpha.We can change their values. | + | 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> | <div newline></div> | ||
| Line 50: | Line 57: | ||
| </div> | </div> | ||
| - | Renders lines and multiline. In this sample we render major roads in Frisco. Line style has center pen, inner pen, and outer pen. We can use different colors to express different traffic conditions. | + | 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> | <div newline></div> | ||
| Line 61: | Line 68: | ||
| </div> | </div> | ||
| - | Renders point with image.In this sample, we render high schools in Frisco.We set the point type to bitmap, and give the path of image. | + | 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> | <div newline></div> | ||
| Line 72: | Line 79: | ||
| </div> | </div> | ||
| - | Render point with predefined symbol, including circle, square, triangle, cross, diamond, diamond2, star, star2. In this sample we using a triangle to marker the headquarters of ThinkGeo. We need to give the point symbol type, size and area style options. | + | 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> | <div newline></div> | ||
| Line 83: | Line 90: | ||
| </div> | </div> | ||
| - | Render point with character. In this sample, we render hospitals in Frisco. We set the point type to character. Giving character index, font and character solid brush. | + | Allows you to render points based on a font. In this sample all hospitals in Frisco are rendered with an "H". |
| <div newline></div> | <div newline></div> | ||
| Line 90: | Line 97: | ||
| {{webapiedition:stylebyzoomlevels1.png?300}} | {{webapiedition:stylebyzoomlevels1.png?300}} | ||
| \\ | \\ | ||
| - | //Zoomlevels :1// | + | //Zoomlevel :17// |
| \\ | \\ | ||
| {{webapiedition:stylebyzoomlevels2.png?300}} | {{webapiedition:stylebyzoomlevels2.png?300}} | ||
| \\ | \\ | ||
| - | //Zoomlevels :2// | + | //Zoomlevel :18// |
| \\ | \\ | ||
| {{webapiedition:stylebyzoomlevels3.png?300}} | {{webapiedition:stylebyzoomlevels3.png?300}} | ||
| \\ | \\ | ||
| - | //Zoomlevels :3// | + | //Zoomlevel :19// |
| \\ | \\ | ||
| </div> | </div> | ||
| - | In general styles are applied to some particular ZoomLevels. In this sample we have three sets of styles, zoom in/out we can tell the style change through different zoomlevels. | + | 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> | <div newline></div> | ||
| Line 113: | Line 120: | ||
| </div> | </div> | ||
| - | Put multiple styles together by custom styles.In this sample, we marker ThinkGeo location by circle with one star. | + | Create a compound style by combining multiple styles. In this sample we combine a circle and a star to show our office location. |
map_suite_styling.1447661667.txt.gz · Last modified: 2015/11/16 08:14 by tgwikiupdate