Skip to content

Home

Jump to bottom Edit New page
Oliver Heilig edited this page Oct 11, 2019 · 132 revisions

What the tutorial shows

The tutorial shows how to build a web-based map application with JavaScript to visualize, analyze and manipulate spatial data. Most tutorials on the web show how to work with a limited number of client-side push pins or the 50 US states polygons (which are at a large part just plain rectangles). This tutorial however explains how to work with large amount of complex spatial data, stored in a spatial-relational database. I am using SQL-Server Spatial and/or SpatialLite. The backend for the JavaScript frontend is implemented in ASP.NET. For the map/route/locate services i'm using PTV xServer internet. The result will be some interactive maps like these:

The ambition for this tutorial

  • The map must be responsive. So i don't have to wait until i get the new map image when scrolling in the map.
  • The map content must be interactive. It is not just a WMS overlay image. I can click on a feature to get additional infos or change features.
  • The map must be mobile-friendly. It should work well on a smartphone with the according touch-gestures like pinch-zoom or tap.
  • The data can be complex and large. So it cannot simply be loaded as (Geo)JSON to the client.
  • The spatial data is not "special" data. It is stored in the database together with my non-spatial business data. This means i can do SQL queries with joins, etc.
  • The data is dynamic. It is directly rendered out of the database. Whenever the spatial or associated business data changes, this is immediately reflected when refreshing the map. There is no additional processing neccessary.
  • Copy deployment You can download and start the tutorial. That's why i'm using SpatialLite, while this is not my preferred database. I'm using SQL Spatial for real applications, but this would involve some additional steps for deployment and i want to focus on the code. I'll mention the equivalent SQL-Server queries at the tutorial parts.
  • Min dependency I'm not using any spatial libraries (NetTopologySuite, SharpMap or System.Data.Spatial). One reason is that i want to explain the basics and not the frameworks. Another reason is speed - Using frameworks involves some overhead and i have to search at what part of the framework the performance bottleneck hides. I'm using Leaflet on the JavaScript side though, because i don't want to code this stuff by myself. However, i also run the more high-level tutorial SharpMap.Widgets, which uses SharpMap as library for geo-access and rendering.

Prerequisites

You can download the source code at the repository page. The samples use PTV xServer internet for tha basemap tiles. You can get a trial access here. To build the tutorial, you need Microsoft Visual Studio or the free Visual Studio Community.

Note: There's also an early port of the code to ASP.NET Core https://github.com/oliverheilig/STCore

Add a custom footer
Add a custom sidebar
Clone this wiki locally