Location Search Made Easy with GeoBlazor

The talented developers at Syncfusion recently posted an article titled Location Search Made Easy with Google Places and Blazor AutoComplete, showcasing their AutoComplete Blazor component. While this tool is powerful and flexible, we want to show you how to achieve similar (or better!) functionality using GeoBlazor—with less code and no JavaScript. Below is a quick comparison, followed by a step-by-step tutorial to get you started.

Get the Template

The Syncfusion example began with a basic Blazor template, but we can do one better with custom, map-enabled templates! Type the following from a terminal on your dev machine:

dotnet new install dymaptic.GeoBlazor.Templates

After that, if you open Visual Studio, you will see the templates listed immediately! You can also stay in the terminal to create the new application with dotnet new geoblazor -int Server.

Get the Keys

The next step is to register your GeoBlazor application with dymaptic to generate a free registration key. This is simply for us to be able to contact you if we need to push out important updates, and you can always unsubscribe from any mailings we send (we never sell your contact info). Head to https://licensing.dymaptic.com to register and generate your key. If you have any trouble, you can find more detailed instructions at https://docs.geoblazor.com/pages/gettingStarted.

There is a second key needed as well, to support the mapping services and tile data you will be consuming. Syncfusion used Google, which had their own API key, but for GeoBlazor we use ArcGIS Location Services (current ArcGIS users can also use Online, Portal or Enterprise accounts). Here is a getting started page for ArcGIS, and you can also use our own Getting Started page as reference.

Once you have both the keys, you need to place then where they can be read by the Dependency Injection system as part of IConfiguration. The simplest location is appsettings.Development.json. Add the following JSON properties, replacing yourArcGISApiKey and yourGeoBlazorKey with the keys you generated.

{
    "ArcGISApiKey":"yourArcGISApiKey",
    "GeoBlazor": {
         "RegistrationKey": "yourGeoBlazorKey"
     }
}

Depending on your rendering mode:

• InteractiveWebAssembly → add to Client/appsettings.Development.json
• InteractiveServer → add to Server/appsettings.Development.json
• InteractiveAuto → add to both

⚠️ Security Tip: Don't commit your keys to source control—add appsettings.Development.json to .gitignore!

Run the App

Launch the application. You should see something similar to the picture below. Feel free to play around and see what features we've included. The "Home" page is a time-indexed layer of hurricanes over many years, that is organized with a BookmarksWidget. You can click a bookmark to zoom in and see the path of a specific hurricane.

The "Counter" page still counts the number of times you click, but now it also has a search bar, and supports location search! So we already have the same core location searching functionality as the Syncfusion example with zero lines of code! Try it out. You can search for any business or famous location. You can also allow it to track your own location with the "use my current location" button.

Customizing the Maps

Let's make some changes to learn more about how GeoBlazor maps work. The Syncfusion example was on a 2D map, and had a fun bouncing map pin. So recreating that will be our goal. First, find the code for Counter.razor. You'll notice right away that the map is defined primarily in Razor markup as components. You see a SceneView, with nested components Map, Basemap, BasemapStyle, GraphicsLayer, and SearchWidget. Let's replace the SceneView with a MapView to make the map two-dimensional and change the basemap style to ArcgisStreets to change the look to be more like Google Street View.

<MapView @ref="_mapView" 
         Style="height:500px; width:100%;" 
         OnClick="OnClick"
         OnViewRendered="OnViewRendered">
    <Map>
        <Basemap>
            <BasemapStyle Name="BasemapStyleName.ArcgisStreets" />
        </Basemap>
        <GraphicsLayer @ref="_graphicsLayer" />
    </Map>
    <SearchWidget Position="OverlayPosition.TopRight" />
</MapView>
    

@code {
    private MapView? _mapView;
}

<SearchWidget Position="OverlayPosition.TopRight" 
              ResultGraphicEnabled="false"
              OnSelectResult="OnSelectResult" />

private async Task OnSelectResult(SearchSelectResultEvent selectResultEvent)
{
    var searchResult = selectResultEvent.Result?.Feature;
    if (searchResult is null)
    {
        return;
    }
    await _graphicsLayer!.Clear();
    await _graphicsLayer.Add(new Graphic(searchResult.Geometry, _bouncingPinSymbol));
}

private PictureMarkerSymbol? _bouncingPinSymbol = new PictureMarkerSymbol("bouncing_pin.gif", 40, 40);

Finally, we don't want to lose our popup information from the search, but it is getting in the way of our cool animation, so let's dock the popup to the side. We can do this by explicitly defining the PopupWidget in markup right below the SearchWidget.

<MapView @ref="_mapView" 
    Style="height:500px; width:100%;" 
    OnClick="OnClick"
    OnViewRendered="OnViewRendered">
    <Map>
        <Basemap>
            <BasemapStyle Name="BasemapStyleName.ArcgisStreets" />
        </Basemap>
        <GraphicsLayer @ref="_graphicsLayer" />
    </Map>
    <SearchWidget Position="OverlayPosition.TopRight" 
                ResultGraphicEnabled="false"
                OnSelectResult="OnSelectResult" />
    <PopupWidget DockEnabled="true">
        <PopupDockOptions Position="PopupDockPosition.BottomRight" />
    </PopupWidget>
</MapView>