ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
This is an old revision of the document!
The ThinkGeo UI Web for Blazor Quickstart Guide will guide you through the process of creating a sample blazor serverside application and will help you become familiar with ThinkGeo Products. The Quickstart Guide supports ThinkGeo UI Web for Blazor 12.0 and higher and will show you how to create an ASP.NET Core Blazor application.
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 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.
Get started with Blazor, you need .NET Core 3.0 and Visual Studio 2019 Preview. More information please refer 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.
Now, you successfully created a native blazor serverside sample. See Get started with ASP.NET Core Blazor, If there are any issue during running this sample.
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.
Now, we have all the references set. let's start by writing code step by step to display a world map with Shapefile.
1. Add the following code snippet to ~/_imports.razor file to reference ThinkGeo.UI.Blazor into all components in this project:
@using ThinkGeo.Core @using ThinkGeo.UI.Blazor
2. Open the ~/Pages/_host.cshtml file in the blazor project. Register the stylesheet and javascript of ThinkGeo Web For Blazor from CDN:
<head> ... <link href="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.css" rel="stylesheet" /> </head> <body> ... <script src="https://cdn.thinkgeo.com/blazor/1.0.0/blazor.js"></script> </body>
3. Open ~/wwwroot/css/site.css file and add the following stylesheet for demomap which is the element Id of map in this sample.
#demomap { width:600px; height:500px; }
4. Open ~/Pages/Index.razor file and Add a ThinkGeo.UI.Blazor.Map component at the end as following:
@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.908560446, 5855996.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); } }
we'll use a ShapeFile containing data of the entire world. We have one such ShapeFile available to us:
(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 generate your developer license. For more details, please refer to http://wiki.thinkgeo.com/wiki/map_suite_developer_license_guide.
Once the developer license is ready, run the application. Your map should look like the one below:
Add a ShapeFileFeatureLayer with PointStyle for Capitals in method “OnInitialized”.
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 stylewith 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); }
TextStyles are used to label items on the map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. 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.
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.
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 stylewith 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 tolabel on map. capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = textStyle; capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; // As the map is drawn by tiles, it needs to draw on the margin to make sure the text is complete after wejoining the tiles together. // Change the number to another one (for example 0) and you can see the difference expecially when panning. layers.Add(capitalLabelLayer); }
Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer, and create our own custom Style and TextStyle.
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, theappearance 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 wanttolabelon 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); }
Below is the result.
and the PointStyle will change as you zoom in.
This completes this scenario. The next thing you might want to do is to make it run on another machine that does not have a developer license. A runtime license is the one we are looking for. Here is the guide to generate a runtime license: http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_desktop
You now know the basics of using ThinkGeo Web for Blazor and are able to start adding this functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of ThinkGeo work together: