Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
Quickstart Updated sample with Visual Studio Code. Oct 18, 2019
.gitignore Upload Screenshot. Sep 24, 2019
Quickstart.sln Upload QuickstartSample-ForBlazor. Sep 30, 2019 Update Sep 30, 2019
Screenshot.png Upload Screenshot. Sep 24, 2019



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.

Please refer to Wiki for the details.



This sample makes use of the following NuGet Packages


About the Code

<MapView Id="demomap" BackgroundColor="@(GeoColor.FromHtml("#89d3f0ff"))"
         Center="@(new PointShape(-11067139.908560446, 5855996.337964549))"
        <LayerOverlay Id="CustomOverlay" Layers="@layers"></LayerOverlay>
            <ZoomBarMapTool />
GeoCollection<Layer> layers = new GeoCollection<Layer>();

    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.

        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;

        // 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.

        // 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.

Getting Help

ThinkGeo Web UI for Blazor Wiki Resources

Coming soon

ThinkGeo Community Site

ThinkGeo Web Site

Key APIs

This example makes use of the following APIs:

About ThinkGeo UI 12 For .NET Core 3.0

ThinkGeo UI controls empower developers to add amazing maps to their .NET applications across web, desktop and mobile platforms. Version 12 adds full support for .NET Core 3.0, a native Blazor control and much more.

About ThinkGeo

ThinkGeo is a GIS (Geographic Information Systems) company founded in 2004 and located in Frisco, TX. Our clients are in more than 40 industries including agriculture, energy, transportation, government, engineering, software development, and defense.

You can’t perform that action at this time.