# Quickstart Sample for Blazor

### Description 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.

[Quick Start in VS Code - Part 1 - Adding the Basemap (7:00)](https://www.youtube.com/watch?v=Hz8o0EhRc1U)

Please refer to [Wiki](https://wiki.thinkgeo.com/wiki/thinkgeo_web_for_blazor) for the details.


### About the Code ``` csharp <MapView Id=“demomap” MapUnit=“@ThinkGeo.Core.GeographyUnit.Meter” Zoom=“3” Width=“800” Height=“600”>

  <OverlaysSetting>
      <ThinkGeoCloudRasterMapsOverlay Id="RasterOverlay" MapType="ThinkGeo.Core.ThinkGeoCloudRasterMapsMapType.Light" ApiKey=""></ThinkGeoCloudRasterMapsOverlay>
  </OverlaysSetting>

</MapView> ``` ### Getting Help

[ThinkGeo Web UI for Blazor Wiki Resources](https://wiki.thinkgeo.com/wiki/thinkgeo_web_for_blazor)

[ThinkGeo Community Site](https://community.thinkgeo.com/c/thinkgeo-ui-for-web/thinkgeo-ui-for-web-blazor)

[ThinkGeo Web Site](http://www.thinkgeo.com)

### 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. # How Do I Sample for Blazor

### Description

The “How Do I?” samples collection is a comprehensive set containing dozens of interactive samples. Available in C# (Blazor), these samples are designed to hit all the highlights of ThinkGeo Blazor UIs, from simply adding a layer to a map to performing vehicle tracking and applying a thematic style. Consider this collection your “encyclopedia” of all the ThinkGeo basics and a great starting place for new users.

Please refer to [ThinkGeo Web UI for Blazor](https://thinkgeo.com/gis-ui-web) for the details.


### About the Code Backgrounds for this sample are powered by ThinkGeo Cloud Maps and require an API Key. The following function is just for reminding you to input the key. ```csharp

  <MapView Id="map" MapUnit="@ThinkGeo.Core.GeographyUnit.Meter" ProgressiveZooming="true"
       Center="@(new PointShape(-11037792.463030849, 4953010.053845501))"
       Zoom="5">
      <OverlaysSetting>
          <ThinkGeoCloudVectorMapsOverlay Id="VectorOverlay"
                                          ApiKey=""
                                          MapType="mapType" />
      </OverlaysSetting>
  </MapView>

@code{

  Map map;
  protected override void OnInitialized()
  {
      // Initialize here ...
  }

} ```

### Getting Help

[ThinkGeo Community Site](https://community.thinkgeo.com)

[ThinkGeo Web Site](https://www.thinkgeo.com)

### FAQ - Q: How do I make background map work? A: Backgrounds for this sample are powered by ThinkGeo Cloud Maps and require a Client ID and Secret. These were sent to you via email when you signed up with ThinkGeo, or you can register now at https://cloud.thinkgeo.com. Once you get them, please update the code in property ApiKey=“” in RazorControl partial classes.

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

# Display ShapeFiles Sample for Blazor

### Description The sample will guide you through the process of creating a sample blazor serverside application by using Shapefiles. The sample supports ThinkGeo UI Web for Blazor 12.0 and higher.

Please refer to [Wiki](https://wiki.thinkgeo.com/wiki/thinkgeo_web_for_blazor) for the details.


### About the Code ``` csharp <MapView Id=“demomap”

       MapUnit="@ThinkGeo.Core.GeographyUnit.Meter"
       Zoom="3">
  <OverlaysSetting>
      <LayerOverlay Id="CustomOverlay" Layers="@layers"></LayerOverlay>
  </OverlaysSetting>

</MapView> ```

```csharp 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.
      var worldLayer = new ShapeFileFeatureLayer("./Data/countries/countries.shp");
      worldLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);

      // Set the worldLayer to use a preset Style.
      var areaStyle = new AreaStyle
      {
          FillBrush = new GeoSolidBrush(GeoColor.FromArgb(255, 233, 232, 214)),
          OutlinePen = new GeoPen(GeoColor.FromArgb(255, 118, 138, 69), 1)
      };
      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);

      var capitalLayer = new ShapeFileFeatureLayer("./Data/capitals/WorldCapitals.shp");
      capitalLayer.FeatureSource.ProjectionConverter = new ProjectionConverter(4326, 3857);

      var stackStyle = new PointStyle
      {
          SymbolType = PointSymbolType.Square,
          FillBrush = new GeoSolidBrush(GeoColors.Maroon),
          OutlinePen = new GeoPen(GeoColors.Transparent, 0),
          SymbolSize = 2
      };

      var pointStyle = new PointStyle
      {
          SymbolType = PointSymbolType.Square,
          FillBrush = new GeoSolidBrush(GeoColors.White),
          OutlinePen = new GeoPen(GeoColors.Black, 1),
          SymbolSize = 6
      };
      pointStyle.CustomPointStyles.Add(stackStyle);
      capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = pointStyle;

      var font = new GeoFont("Arial", 9, DrawingFontStyles.Bold);
      var txtBrush = new GeoSolidBrush(GeoColors.Maroon);
      var textStyle = new TextStyle("CITY_NAME", font, txtBrush);
      // 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.
      capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = textStyle;

      // 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);
  }

```

### Getting Help

[ThinkGeo Web UI for Blazor Wiki Resources](https://wiki.thinkgeo.com/wiki/thinkgeo_web_for_blazor)

[ThinkGeo Community Site](https://community.thinkgeo.com/c/thinkgeo-ui-for-web/thinkgeo-ui-for-web-blazor)

[ThinkGeo Web Site](http://www.thinkgeo.com)

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