User Tools

Site Tools


thinkgeo_web_for_blazor_quick_start_guide

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
thinkgeo_web_for_blazor_quick_start_guide [2019/10/02 21:09]
brianr Styled the example code as syntax highlighted blocks.
thinkgeo_web_for_blazor_quick_start_guide [2019/10/18 06:03] (current)
tgwikiupdate [Summary]
Line 5: Line 5:
 </​div>​ </​div>​
  
-ThinkGeo UI Web for Blazor is a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a [[https://​docs.microsoft.com/zh-cn/​aspnet/​core/​blazor/?​view=aspnetcore-3.0|ASP.NET Core Blazor]] application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes.+ThinkGeo UI Web for Blazor is a full-featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a [[https://​docs.microsoft.com/​aspnet/​core/​blazor/?​view=aspnetcore-3.0|ASP.NET Core Blazor]] application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes.
  
 How do we start to learn how to take advantage of the power of ThinkGeo UI Web for Blazor? The best way is to make a sample application with it.  How do we start to learn how to take advantage of the power of ThinkGeo UI Web for Blazor? The best way is to make a sample application with it. 
  
 ===== Download the Sample ===== ===== Download the Sample =====
-<faicon fa fa-download ​ fa-lg> ​ {{https://wiki.thinkgeo.com/wiki/thinkgeo_web_for_blazor_quick_start_guide|Download Sample Code From GitHub(Coming Soon)}} +<faicon fa fa-download fa-lg> ​ {{https://github.com/ThinkGeo/QuickstartSample-ForBlazor|Download Sample Code From GitHub}} ​
  
 ===== Setting up the Environment ===== ===== Setting up the Environment =====
-Get started with Blazor, you need [[https://​dotnet.microsoft.com/​download/​dotnet-core/​3.0|.NET Core 3.0]] and [[https://​visualstudio.microsoft.com/​vs/preview/|Visual Studio 2019 Preview]]. More information please refer to [[https://​docs.microsoft.com/​zh-cn/​aspnet/​core/​blazor/​get-started?​view=aspnetcore-3.0&​tabs=visual-studio|Get started with ASP.NET Core Blazor]]. +To get started with ThinkGeo UI Web for Blazor, you first need to install the [[https://​dotnet.microsoft.com/​download/​dotnet-core/​3.0|.NET Core 3.0 SDK]].  You'll also want an IDE, such as [[https://​visualstudio.microsoft.com/​vs/​|Visual Studio 2019 (version 16.3 or newer)]] or [[https://​code.visualstudio.com/​download|Visual Studio Code]]. ​ For this quick start guide, we'll be using Visual Studio Code.  ​More information ​about the tools you can use to work with Blazor, ​please refer to the Microsoft documentation on [[https://​docs.microsoft.com/​en-us/​aspnet/​core/​blazor/​get-started?​view=aspnetcore-3.0&​tabs=visual-studio-code|how to get started with ASP.NET Core Blazor]].
-(NOTE: ThinkGeo UI Web for Blazor only support server-side of Blazor currently, In this guide we are just using Blazor serverside as an example.)+
  
-Let's create a Blazor ​project after the environment is installed. Also you can run the project you just downloaded.+NOTE: ThinkGeo UI Web for Blazor ​currently only supports server-side Blazor projects, so in this guide we will walk you through ​the process of creating a server-size Blazor sample. ThinkGeo intends to support client-side Blazor projects with WebAssembly once Microsoft'​s client-side Blazor framework has left preview.
  
-  - Open Visual Studio 2019 Preview +Once your environment and tooling are set up, let's create ​a Blazor project.
-  - Create ​New Project +
-  - Select ​Blazor ​App. Select Next.{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​select_blazor_app.png}} +
-  - Type project ​name as '​QuickStart'​ in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create. +
-  - For ThinkGeo UI Web for Blazor, choose the Blazor Server App template. Select Create.{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​create_blazor_app.png}} +
-  - Press F5 to run the app, you can see the browser is launched as following:​{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​init_page.png}}+
  
-Now, you successfully created a native blazor serverside sampleSee [[https://​docs.microsoft.com/​zh-cn/​aspnet/​core/​blazor/​get-started?​view=aspnetcore-3.0&​tabs=visual-studio|Get started with ASP.NET Core Blazor]], If there are any issue during running this sample+  - Open Visual Studio Code. 
 +  - Execute the following command in command shell for creating a Blazor Server project.<​code html>​dotnet new blazorserver -o QuickStart</​code>​ 
 +  - Open the //​QuickStart//​ folder in Visual Studio Code. 
 +  - For a Blazor Server project, the Visual Studio Code requests that you add assets to build and debug the project. Select **Yes**. 
 + 
 +Now, you have successfully created a server-side Blazor boilerplate projectNext, we'll be adding the ThinkGeo UI map control to the web page.  If you have encountered any issues getting to this point, please refer to the Microsoft documentation on [[https://​docs.microsoft.com/​en-us/​aspnet/​core/​blazor/​get-started?​view=aspnetcore-3.0&​tabs=visual-studio-code|getting ​started with ASP.NET Core Blazor]].
  
 ===== Installing ThinkGeo UI Web for Blazor NuGet packages ===== ===== Installing ThinkGeo UI Web for Blazor NuGet packages =====
  
-To build this sample, you need to reference the component ​package from NuGet Manager. NuGet brings us a flexible way and pleasant experience to manage our references. +To build this sample, you need to reference the "​ThinkGeo.UI.Blazor" ​package from NuGet Package ​Manager. NuGet brings us a flexible way and pleasant experience to manage our references. 
-  -Right-click on the project in the solution and select Manage ​NuGet Package:​{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​manage_nuget_packages.png}} +  - Open NuGet Package ​Manager 
-  -Search ​the packages named 'ThinkGeo.UI.Blazor' list above and install it.{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​install_thinkgeo_ui_blazor.png}} +  - Install ​the "ThinkGeo.UI.Blazor" ​package ​by typing "​ThinkGeo.UI.Blazor"​.
-  -Now the package ​is installing into the projectClick “OK” if the message box like the following pops up.{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​accept.png}}+
  
 ===== Add the Map Component ===== ===== Add the Map Component =====
-Now, we have all the references set. let's start by writing code step by step to display a world map with [[https://​en.wikipedia.org/​wiki/​Shapefile|Shapefile]].+Now, we have all the references set. let's start by writing code step by step to display a world map.
  
 ==== Display a world map ==== ==== Display a world map ====
  
-1. Add the following code snippet to ~/_imports.razor ​file to reference ​ThinkGeo.UI.Blazor into all components in this project: +  - Open ~/Imports.razor ​and add 2 using directives ​to reference ​the Map components. <code csharp>​ 
- +@using ThinkGeo.Core  
-<code csharp>​ +@using ThinkGeo.UI.Blazor</​code>​ 
-    @using ThinkGeo.Core +  ​- ​Open the ~/Pages/_Host.cshtml ​and add the stylesheet and javascript ​references ​of ThinkGeo Web For Blazor from CDN:<​code html>
-    @using ThinkGeo.UI.Blazor +
-</​code>​ +
- +
-2. Open the ~/Pages/_host.cshtml ​file in the blazor project. Register ​the stylesheet and javascript of ThinkGeo Web For Blazor from CDN: +
- +
-<code html>+
     <​head>​     <​head>​
         ...         ...
Line 59: Line 51:
     </​body>​     </​body>​
 </​code>​ </​code>​
 +  - Open ~/​Pages/​Index.razor file and add a ThinkGeo.UI.Blazor.Map component as following:<​code csharp>
 +@page "/"​
  
-3. Open ~/​wwwroot/​css/​site.css file and add the following stylesheet for demomap which is the element Id of map in this sample. +<!--You can control ​the width and height ​in CSS too, if you like--> 
- +<MapView Id="​demomap"​ MapUnit="​@ThinkGeo.Core.GeographyUnit.Meter"​ Zoom="​3"​ Width="​800"​ Height="​600"​
-<code css+    ​<​OverlaysSetting>​ 
-    ​#demomap { +        ​<​ThinkGeoCloudRasterMapsOverlay Id="​RasterOverlay"​ MapType="​ThinkGeo.Core.ThinkGeoCloudRasterMapsMapType.Light"​ ApiKey="​Input your key"></​ThinkGeoCloudRasterMapsOverlay>​ 
-        ​width:​600px;​ +    ​</​OverlaysSetting>​ 
-        height:​500px;​ +</​MapView>​
-    ​}+
 </​code>​ </​code>​
- +It requires an APIKey of ThinkGeo ​Cloud, and you can get the API Key from the registration emailIf you don't have an account ​of ThinkGeo Cloud yet, please refer to [[thinkgeo_cloud_client_keys_guideline|ThinkGeo Cloud Client Keys]] to get your ThinkGeo Cloud account.
-4. Open ~/​Pages/​Index.razor file and Add a ThinkGeo.UI.Blazor.Map component at the end as following:​ +
- +
-<code csharp>​ +
-  @page "/"​ +
-   +
-  <​h1>​Hello World!</​h1>​ +
-   +
-  Welcome to your new app. +
-  <MapView Id="​demomap"​ @ref="​map"​ BackgroundColor="​@backgroundColor"​ +
-       ​MapUnit="​@ThinkGeo.Core.GeographyUnit.Meter"​ +
-       ​Center="​@(new PointShape(-11067139.9085604465855996.337964549))"​ +
-       ​Zoom="​3">​ +
-      <​OverlaysSetting>​ +
-          <​LayerOverlay Id="​CustomOverlay"​ Layers="​@layers"></​LayerOverlay>​ +
-      </​OverlaysSetting>​ +
-      <​MapToolsSetting>​ +
-          <​MapTools>​ +
-              <​ZoomBarMapTool /> +
-          </​MapTools>​ +
-      </​MapToolsSetting>​ +
-  </​MapView>​ +
-   +
-  @code{ +
-      GeoColor backgroundColor = GeoColor.FromHtml("#​89d3f0ff"​);​ +
-      GeoCollection<​Layer>​ layers = new GeoCollection<​Layer>​();​ +
-      MapView map; +
-   +
-      protected override void OnInitialized() +
-      { +
-          // We create a new Layer and pass the path to a ShapeFile into its constructor. +
-          ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer("​./​Data/​countries/​countries.shp"​);​ +
-          worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-           +
-          // Set the worldLayer to use a preset Style. +
-          AreaStyle areaStyle = new AreaStyle();​ +
-          areaStyle.FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255,​ 233, 232, 214)); +
-          areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255,​ 118, 138, 69), 1); +
-          areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;​ +
-          worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;​ +
-           +
-          // This setting will apply from ZoomLevel01 to ZoomLevel20,​ which means we can  +
-          // see the world the same style all the time no matter how far we zoom in or out. +
-          worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-           +
-          // We need to add the worldLayer to the LayerOverlay in the map. +
-          layers.Add(worldLayer);​ +
-      } +
-  }    +
-</​code>​ +
- +
-We'll use a ShapeFile containing data of the entire world. We have one such ShapeFile available ​to us: +
- +
-  *The borders of every country in the world (countries.shp)  +
- +
-(**NOTE:** The data used in this sample can be found in the attached sample above at “./​Data/​countries” folder)+
  
 Run the app by pressing F5. If you have not set up a developer license, the Map Suite Product Center will pop up. You will need to activate your developer license, either by starting a free evaluation of ThinkGeo UI Web for Blazor, or by purchasing the full edition of the product. For more details, please refer to our [[map_suite_developer_license_guide|developer license guide]]. Run the app by pressing F5. If you have not set up a developer license, the Map Suite Product Center will pop up. You will need to activate your developer license, either by starting a free evaluation of ThinkGeo UI Web for Blazor, or by purchasing the full edition of the product. For more details, please refer to our [[map_suite_developer_license_guide|developer license guide]].
Line 129: Line 67:
 Once your developer license is ready, run the application. Your map should look like the one below: Once your developer license is ready, run the application. Your map should look like the one below:
  
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​blazor_map.png}} +{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​blazor_quick_start_sample.jpg}}
- +
-==== Add PointStyle for the Capitals of the World Countries ==== +
- +
-Next, let's add a ShapeFileFeatureLayer with a PointStyle for displaying the world'​s capital cities. We'll do this in the ''​OnInitialized''​ method. +
- +
-<code csharp>​ +
-    protected override void OnInitialized() +
-    { +
-        // We create a new Layer and pass the path to a ShapeFile into its constructor. +
-        ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer("​./​Data/​countries/​countries.shp"​);​ +
-        worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        // Set the worldLayer to use a preset Style. +
-        AreaStyle areaStyle = new AreaStyle();​ +
-        areaStyle.FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255,​ 233, 232, 214)); +
-        areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255,​ 118, 138, 69), 1); +
-        areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;​ +
-        worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;​ +
-     +
-        // This setting will apply from ZoomLevel01 to ZoomLevel20,​ which means we can  +
-        // see the world the same style all the time no matter how far we zoom in or out. +
-        worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the worldLayer to the LayerOverlay in the map. +
-        layers.Add(worldLayer);​ +
-     +
-        ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer("​./​Data/​capitals/​WorldCapitals.shp"​);​ +
-        capitalLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        PointStyle pointStyle = new PointStyle();​ +
-        pointStyle.SymbolType = PointSymbolType.Square;​ +
-        pointStyle.FillBrush = new GeoSolidBrush(GeoColors.White);​ +
-        pointStyle.OutlinePen = new GeoPen(GeoColors.Black,​ 1); +
-        pointStyle.SymbolSize = 6; +
-     +
-        PointStyle stackStyle = new PointStyle();​ +
-        stackStyle.SymbolType = PointSymbolType.Square;​ +
-        stackStyle.FillBrush = new GeoSolidBrush(GeoColors.Maroon);​ +
-        stackStyle.OutlinePen = new GeoPen(GeoColors.Transparent,​ 0); +
-        stackStyle.SymbolSize = 2; +
-     +
-        pointStyle.CustomPointStyles.Add(stackStyle);​ +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;​ +
-        // This setting also applies from ZoonLevel01 to ZoomLevel20,​ that means we can  +
-        // see city symbols the same style with ZoomLevel01 all the time. +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the capitalLayer to the LayerOverlay in the map. +
-        layers.Add(capitalLayer);​ +
-    } +
-</​code>​ +
- +
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​blazor_map_with_capitals.png}} +
- +
-==== Add a TextStyle to Display the City Names ==== +
- +
-TextStyles are used to label items on the map. Because every ShapeFile has a companion .dbf file that includes descriptions for each record, the most common way to use TextStyles is for labeling features with these descriptive values. For example, the WorldCapitals Shapefile'​s corresponding .dbf file contains the field “CITY_NAME”. We can use this field to label the cities on our map. +
- +
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​dbf.png}} +
- +
-ThinkGeo.Core has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. +
- +
-<code csharp>​ +
-    protected override void OnInitialized() +
-    { +
-        // We create a new Layer and pass the path to a ShapeFile into its constructor. +
-        ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer("​./​Data/​countries/​countries.shp"​);​ +
-        worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        // Set the worldLayer to use a preset Style. +
-        AreaStyle areaStyle = new AreaStyle();​ +
-        areaStyle.FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255,​ 233, 232, 214)); +
-        areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255,​ 118, 138, 69), 1); +
-        areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;​ +
-        worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;​ +
-     +
-        // This setting will apply from ZoomLevel01 to ZoomLevel20,​ which means we can  +
-        // see the world the same style all the time no matter how far we zoom in or out. +
-        worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the worldLayer to the LayerOverlay in the map. +
-        layers.Add(worldLayer);​ +
-     +
-        ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer("​./​Data/​capitals/​WorldCapitals.shp"​);​ +
-        capitalLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        PointStyle pointStyle = new PointStyle();​ +
-        pointStyle.SymbolType = PointSymbolType.Square;​ +
-        pointStyle.FillBrush = new GeoSolidBrush(GeoColors.White);​ +
-        pointStyle.OutlinePen = new GeoPen(GeoColors.Black,​ 1); +
-        pointStyle.SymbolSize = 6; +
-     +
-        PointStyle stackStyle = new PointStyle();​ +
-        stackStyle.SymbolType = PointSymbolType.Square;​ +
-        stackStyle.FillBrush = new GeoSolidBrush(GeoColors.Maroon);​ +
-        stackStyle.OutlinePen = new GeoPen(GeoColors.Transparent,​ 0); +
-        stackStyle.SymbolSize = 2; +
-     +
-        pointStyle.CustomPointStyles.Add(stackStyle);​ +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;​ +
-        // This setting also applies from ZoonLevel01 to ZoomLevel20,​ that means we can  +
-        // see city symbols the same style with ZoomLevel01 all the time. +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the capitalLayer to the LayerOverlay in the map. +
-        layers.Add(capitalLayer);​ +
-     +
-        // We create a new Layer for labeling the capitals. +
-        ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer("​./​Data/​capitals/​WorldCapitals.shp"​);​ +
-        capitalLabelLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        GeoFont font = new GeoFont("​Arial",​ 9, DrawingFontStyles.Bold);​ +
-        GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColors.Maroon);​ +
-        TextStyle textStyle = new TextStyle("​CITY_NAME",​ font, txtBrush);​ +
-        textStyle.XOffsetInPixel = 0; +
-        textStyle.YOffsetInPixel = -6; +
-        // We use the preset TextStyle. Here we passed in the “CITY_NAME”,​ +
-        // which is the name of the field we want to show on the map. +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = textStyle;​ +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        layers.Add(capitalLabelLayer);​ +
-    } +
-</​code>​ +
- +
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​labeling.png}} +
- +
-Now that we know how to render text and render symbols, let's define two different ZoomLevel ranges in one single layer, and create our own custom Style and TextStyle. +
- +
-<code csharp>​ +
-    protected override void OnInitialized() +
-    { +
-        // We create a new Layer and pass the path to a ShapeFile into its constructor. +
-        ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer("​./​Data/​countries/​countries.shp"​);​ +
-        worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-     +
-        // Set the worldLayer to use a preset Style. +
-        AreaStyle areaStyle = new AreaStyle();​ +
-        areaStyle.FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255,​ 233, 232, 214)); +
-        areaStyle.OutlinePen = new GeoPen(GeoColor.FromArgb(255,​ 118, 138, 69), 1); +
-        areaStyle.OutlinePen.DashStyle = LineDashStyle.Solid;​ +
-        worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = areaStyle;​ +
-     +
-        // This setting will apply from ZoomLevel01 to ZoomLevel20,​ which means we can  +
-        // see the world the same style all the time no matter how far we zoom in or out. +
-        worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the worldLayer to the LayerOverlay in the map. +
-        layers.Add(worldLayer);​ +
-     +
-        ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer("​./​Data/​capitals/​WorldCapitals.shp"​);​ +
-        capitalLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-        PointStyle pointStyle = new PointStyle();​ +
-        pointStyle.SymbolType = PointSymbolType.Square;​ +
-        pointStyle.FillBrush = new GeoSolidBrush(GeoColors.White);​ +
-        pointStyle.OutlinePen = new GeoPen(GeoColors.Black,​ 1); +
-        pointStyle.SymbolSize = 6; +
-     +
-        PointStyle stackStyle = new PointStyle();​ +
-        stackStyle.SymbolType = PointSymbolType.Square;​ +
-        stackStyle.FillBrush = new GeoSolidBrush(GeoColors.Maroon);​ +
-        stackStyle.OutlinePen = new GeoPen(GeoColors.Transparent,​ 0); +
-        stackStyle.SymbolSize = 2; +
-     +
-        pointStyle.CustomPointStyles.Add(stackStyle);​ +
-        // We can customize our own Style. Here we passed in a color and a size. +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyle.CreateSimpleCircleStyle(GeoColors.White,​ 7, GeoColors.Brown);​ +
-        // The Style we set here is available from ZoomLevel01 to ZoomLevel05.  +
-        // That means if we zoom in a bit more, the appearance we set here  +
-        // will not be visible anymore. +
-        capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​ +
-     +
-        capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = pointStyle;​ +
-        // The Style we set here is available from ZoomLevel06 to ZoomLevel20.  +
-        // That means if we zoom out a bit more, th appearance we set here  +
-        // will not be visible any more. +
-        capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the capitalLayer to the LayerOverlay in the map. +
-        layers.Add(capitalLayer);​ +
-     +
-        // We create a new Layer for labeling the capitals. +
-        ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer("​./​Data/​capitals/​WorldCapitals.shp"​);​ +
-        capitalLabelLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326,​ 3857); +
-        GeoFont font = new GeoFont("​Arial",​ 9, DrawingFontStyles.Bold);​ +
-        GeoSolidBrush txtBrush = new GeoSolidBrush(GeoColors.Maroon);​ +
-        TextStyle textStyle = new TextStyle("​CITY_NAME",​ font, txtBrush);​ +
-        textStyle.XOffsetInPixel = 0; +
-        textStyle.YOffsetInPixel = -6; +
-        // We use the preset TextStyle. Here we passed in the “CITY_NAME”,​  +
-        // which is the name of the field we want to show on the map. +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyle.CreateSimpleTextStyle("​CITY_NAME",​ "​Arial",​ 8, DrawingFontStyles.Italic,​ GeoColors.Black,​ 3, 3); +
-        // The TextStyle we set here is available from ZoomLevel01 to ZoomLevel05. +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;​ +
-     +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = textStyle;​ +
-        // The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20. +
-        capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;​ +
-     +
-        // We need to add the capitalLayer to the LayerOverlay in the map. +
-        layers.Add(capitalLabelLayer);​ +
-    } +
-</​code>​ +
- +
-Below is the result. +
- +
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​zoom4.png}} +
- +
-The PointStyle will change as you zoom in. +
- +
-{{thinkgeo12:​screenshots:​blazor:​quickstartguide:​zoom6.png}} +
- +
-That completes ​this scenario. The next thing you might want to do is to make your application run on another machine, such as a web server, ​that does not have a ThinkGeo UI developer license installed. ​ For that, you'll want to install a production deployment ​license on your server. [[map_suite_production_server_licensing|Check out our deployment licensing guide]] for further details.+
  
 ===== Summary ===== ===== Summary =====
Line 348: Line 73:
  
   -It is of the utmost importance that the unit of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data.   -It is of the utmost importance that the unit of measurement (feet, meters, decimal degrees, etc.) be set properly for the map, based on the requirements of your data.
-  -ShapeFiles (and other data sources like Oracle, Postgre, SQL 2008, etc.) provide the data used by ThinkGeo to render a map. 
   -A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered.   -A Map is the basic class that contains all of the other objects that are used to define how the map will be rendered.
-  -A Map has one-to-many Layers. A Layer contains the data (from ShapeFile or other data sources) for drawing. 
-  -A layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges of when a layer should be shown or hidden. 
  
  
thinkgeo_web_for_blazor_quick_start_guide.1570050558.txt.gz · Last modified: 2019/10/02 21:09 by brianr