For developing this application, a stack of tools should be used. The diagram below explains the used tools and their interaction

Data is stored in a table called municipalities in a Postgree Database. 

In order to run the example, make sure that you installed Posgree and the PostGIS extension. Make sure you installed PG Admin as graphical user interface to manage the installed Postgree server. 

Create a database but do not create a table at this time. 

Since we will use an ASP .Net Core project with a code first approach, the Entity Framework will create the table automatically from the data model.

Once the table is created you should import the data of the table using COPY command.

An example of the command is below:

COPY municipalities (id, municipality, geometry)

FROM 'c:\\ai\\municipalities.csv’

WITH (FORMAT csv, HEADER true, DELIMITER ',');

Add a connection string at appsettings.json file.

A version of appsettings.json file is brought below. 

Make sure to replace your reference to your server and credentials in the connection string

Create a folder Data in your project.

Within that folder create a file named ApplicationDBContext.cs

Below is an example of the ApplicationDBContext.cs file: 

Open progam.cs file and add the following line before the command 

var app = builder.Build();

Code to add, that registers the data context in your project

Under folder Models create a file named municipalities.cs.  Make sure that the name is writen correctly and with lowercase letters. 

Add the following code to the file: 

using Microsoft.EntityFrameworkCore;

using NetTopologySuite.Geometries;

namespace GISCourse2025.Models

{

    public class municipalities

    {

        public int id { get; set; }

        public string name { get; set; }

        public Geometry geometry { get; set; }

    }

}

Now that we have setup up the project, prepared the data model, we will apply the data model to the database.

Using Package Manager Console in Visual Studio run the following commands:

add-migration Initial Create

Have a look at folder Migrations, you will find a file with the name starting with numbers (showing time) and ending with InitialCreate. Open the file but do not modify anything on it. Just read the content and intuitively you should understand that the command generated the c# code to create the municipalities table as it is described in Models/municipalities.cs class.

Now execute this migration by executing command:

udpate-database

This would create the database and municipalities table in Postgres.

Open PG Admin and verify that table municipalities is created as per the definition in the municipalities.cs class.

Import municipalities.csv to table municipalities

In PG Admin create a new query editor and insert the following command:

COPY municipalities (id, municipality, geometry)

FROM 'c:\\ai\\municipalities.csv’

WITH (FORMAT csv, HEADER true, DELIMITER ',');

Municipalities control is responsible for taking end user request and serving Municipalities.cshtml view.

MunicipalitiesController.cs

using GISCourse2025.Data;

using GISCourse2025.Models;

using Microsoft.AspNetCore.Mvc;

using NetTopologySuite.Geometries;

namespace GISCourse2025.Controllers

{

    public class MunicipalitiesController : Controller

    {

        ApplicationDbContext context;

        public MunicipalitiesController(ApplicationDbContext context)

        {

            this.context = context;

        }

        public IActionResult Index()

        {

            List<municipalities> municipalities1 = context.municipalities

             .Where(k => k.id > 0)

             .ToList();

            return View("Municipalities", municipalities1);

        }

        }

    }

}

The controller constructor injects the DBContext.

 this.context = context;

While the default method Index, gets the records of the table municipalities and returns a Municipalities View, passing as well the list of the municipalities.

Map Wep API publishes a web method that gets as parameter the id of the municipality and returns its geometric shape.

@model IEnumerable<GISCourse2025.Models.municipalities>

@{

    ViewData["Title"] = "Municipalities";

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>OpenLayers Polygon</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">

    <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

</head>

<body>

    <table width="100%">

        <tr>

            <td width="20%">

                <h2 >Municipalities</h2>

                <p>List of municipalities</p>

                @foreach (municipalities m in Model)

                {

                    <p>

                        <a href="#" onclick="loadPolygon(@m.id)"> @m.name </a></p>

               }

            </td>

            <td valign="top">

                <h2>Municipalities in the Map</h2>

                <div id="map" style="width: 100%; height: 1000px;float:right;"></div>

            </td>

        </tr>

    </table> 

    <script>

        var map;  //global variable

        function InitMap()   //function to initialize map with OSM 

        {

                map = new ol.Map({

                target: 'map',

                layers: [

                    new ol.layer.Tile({

                        source: new ol.source.OSM()

                    })

                ],

                view: new ol.View({

                    center: ol.proj.fromLonLat([19.818698, 41.327546]), // Adjust center based on polygon

                    zoom: 8

                })

            });

        }

        async function loadPolygon(id) 

        {

            // Fetch WKT from ASP.NET API

            const response = await fetch('../../api/map/'+id); // Replace '1' with the actual polygon ID

            if (!response.ok) 

            {

                console.error("Failed to load polygon");

                return;

            }

            const wkt = await response.text();

            console.log("Polygon WKT:", wkt);

            // Convert WKT to OpenLayers Feature

            var format = new ol.format.WKT();

            var feature = format.readFeature(wkt, 

                                                {

                                                    dataProjection: 'EPSG:4326', // Matches the database format

                                                    featureProjection: 'EPSG:3857' // OpenLayers uses EPSG:3857

                                                }

                                            );

            // Define vector layer for the polygon

            var vectorLayer = new ol.layer.Vector({

                source: new ol.source.Vector({

                    features: [feature]

                }),

                style: new ol.style.Style({

                    stroke: new ol.style.Stroke({

                        color: 'blue',

                        width: 2

                    }),

                    fill: new ol.style.Fill({

                        color: 'rgba(0, 0, 255, 0.3)'

                    })

                })

            });

               map.addLayer(vectorLayer);

         }

       // loadPolygon();

        InitMap();

    </script>

</body>

</html>

Let's explain parts of the code

@model IEnumerable<GISCourse2025.Models.municipalities>

Tells the view what datatype is accepting from the controller. Replace GISCourse2025  with your projetc's namespace.

<td width="20%">

                <h2 >Municipalities</h2>

                <p>List of municipalities</p>

                @foreach (municipalities m in Model)

                {

                    <p>

                        <a href="#" onclick="loadPolygon(@m.id)"> @m.name </a></p>

               }

            </td>