OpenLayers 10 with .NET Backend: Interactive Web Maps

The Stack

OpenLayers handles the map rendering. A .NET Web API serves GeoJSON features. EF Core + PostGIS stores the spatial data.

.NET GeoJSON Endpoint

[HttpGet("features")]
public async Task<IActionResult> GetFeatures([FromQuery] BoundingBox bbox)
{
    var envelope = new Envelope(bbox.MinX, bbox.MaxX, bbox.MinY, bbox.MaxY);
    var features = await db.Sites
        .Where(s => s.Location.Within(envelope.ToGeometry()))
        .Select(s => new { s.Id, s.Name, Lon = s.Location.X, Lat = s.Location.Y })
        .ToListAsync();
    return Ok(features);
}

OpenLayers Map Init

const vectorSource = new ol.source.Vector({
    url: '/api/features?minX=72&maxX=73&minY=18&maxY=20',
    format: new ol.format.GeoJSON()
});
const map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({ source: new ol.source.OSM() }),
        new ol.layer.Vector({ source: vectorSource })
    ],
    view: new ol.View({ center: ol.proj.fromLonLat([72.88, 19.07]), zoom: 12 })
});