dymaptic / GeoBlazor

Core Components for the Dymaptic GeoBlazor Library
MIT License
109 stars 19 forks source link

# GeoBlazor

Home Page

View the live demo site!

Read the Docs

Join our Discord Server!

Using GeoBlazor

Please read the Getting Started page in the documentation on how to get started using the GeoBlazor nuget package. The following sections are for developers who want to build the code from source.

Build Requirements

For the Asp.NET projects, including the core library, you can run on the latest .NET 6 SDK or .NET 7 SDK.

For the Maui sample project, you need the latest Visual Studio 2022 and/or .NET 7 SDK.

If you have not installed node.js on your system, you will need to download and install it in order for the npm scripts to run. Please select the appropriate installer for your system.

You will need to install Powershell 7 on your machine to run the powershell script as part of the build process. -Complete installation instructions for Powershell [can be found here] (https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.2).

Note A reboot is required after installing the above components.

Because GeoBlazor uses an unsigned, local powershell script to copy files in the Sample.Shared project, you need to allow unsigned scripts to be run in Powershell. -The procedure to change the "execution policies" and set them to RemoteSigned are found here: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2#change-the-execution-policy

Note If you receive an unsigned error even after you set the above execution policy, try setting it again in the older version of PowerShell (the one that comes with Windows).

On the first build, the Core project needs to download a large number of files from npm to node_modules, and then copy them into wwwroot/assets. If this process fails, or you get an error on running the samples of "Cannot load ArcGIS Assets", usually re-building the project will fix the errors.

Projects

dymaptic.GeoBlazor.Core

dymaptic.GeoBlazor.Core.Sample.Shared

dymaptic.GeoBlazor.Core.Sample.Server

dymaptic.GeoBlazor.Core.Sample.Wasm

dymaptic.GeoBlazor.Core.Sample.Maui

dymaptic.GeoBlazor.pro (not included in open source repo)

This project wraps the ArcGIS Javascript API in a Blazor templating framework. It generates a nuget package that can be imported and consumed from any Blazor application, without directly interacting with javascript.

In addition to "hiding" the javascript implementation, the goal is also to make a simple, component-based system for declaring a map and view. For example:

<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 600px; width: 100%;">
    <Map ArcGISDefaultBasemap="arcgis-topographic">
        <GraphicsLayer>
            <Graphic>
                <Point Longitude="_longitude" Latitude="_latitude"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleMarkerSymbol>
            </Graphic>
            <Graphic>
                <PolyLine Paths="@_mapPaths"/>
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
            </Graphic>
            <Graphic>
                <Polygon Rings="@_mapRings"/>
                <SimpleFillSymbol Color="@(new MapColor(227, 139, 79, 0.8))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleFillSymbol>
                <Attributes Name="This is a Title" Description="And a Description"/>
                <PopupTemplate Title="{Name}" Content="{Description}"/>
            </Graphic>
        </GraphicsLayer>
    </Map>
</MapView>

for a 2D map with a default ArcGIS basemap, or

<SceneView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 600px; width: 100%;" ZIndex="2000" Tilt="76">
    <Map Ground="world-elevation">
        <Basemap>
            <PortalItem Id="f35ef07c9ed24020aadd65c8a65d3754" />
        </Basemap>
        <GraphicsLayer>            <Graphic>
                <Point Longitude="_longitude" Latitude="_latitude"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleMarkerSymbol>
            </Graphic>
            <Graphic>
                <PolyLine Paths="@_mapPaths"/>
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
            </Graphic>
            <Graphic>
                <Polygon Rings="@_mapRings"/>
                <SimpleFillSymbol Color="@(new MapColor(227, 139, 79, 0.8))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleFillSymbol>
                <Attributes Name="This is a Title" Description="And a Description"/>
                <PopupTemplate Title="{Name}" Content="{Description}"/>
            </Graphic>
        </GraphicsLayer>
    </Map>
</SceneView>

for a 3D map with a basemap loaded from a PortalId.