WebFormsMap

Add a data-driven map to a WebForms application

The sample shows how to visualize your geographic data in a ASP.NET WebForms application. Starting with a newly created ASP.NET WebForms project, it demonstrates the steps that are required to add an interactive map and display your data on it.

To run this code you need

• Microsoft Visual Studio or Visual Studio Express 2013 for Web http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
• An xServer internet token. Go to http://xserver.ptvgroup.com/en-uk/products/ptv-xserver-internet/test/ to get a trial token.

01 - Create the Solution and prepare it for Leaflet

• In Visual Studio create a new Solution of type "ASP.NET Web Forms Application"
• Add a link to the Leaflet style sheet in Site.Master here.
• Add a link to the Leaflet JavaScript source in Site.Master here.
• PTV xMapServer requires an addon for single-tile map images. The code is provided by this GitHub project. Add the two files NonTiledLayer.js and NonTiledLayer.WMS.js to the Scripts folder of the project and link to them in the Site.Master file here.

02 - Create a MapControl and add it to a Page

• In Visual Studio we create a new item of type "Web Forms User Control" and name it MapControl
• The Markup Code contains the initialization of Leaflet with some properties that are provided by the Code Behind.
• The control itself has no size parameters. To place it in our page, we first drop a Panel from to toolbox on the page in the designer, set a size, and then drop the map control on the panel. To initialize the control, we have to set the cluster name and our token here.

03 - Supply the Control with Data and display it on the Map

• To simulate our database, we just use a plain CSV file that contains some retail stores with geographic coordinates.
• We want to provide this data as GeoJson, because Leaflet can display this data out-of-the box. So we create a new item of type "Generic Handler" in Visual Studio. The code reads our "database" and converts the data to GeoJson.
• We can also provide some request parameters, so we can fetch our data with a HTTP get http://176.95.37.29/WebFormsMap/MapData.ashx?someRequestParams=foo
• The data initialization fetches the data via jQuery and initializes a new layer with the response.

04 - Style the Data

• We want to display different balloon icons, depending on the type property of the GeoJson data. For this purpose we add new Leaflet icons to our web project.
• In the control part these properties are used to create dynamic pushpins with the Leaflet pointToLayer function.

05 - Add interaction

• We want to provide a delete function for a pushpin that calls a function on our ASP-Site to delete a location.
• We just implement a new dummy-handler which is called from the map and would delete a location from our database.
• For the leaflet popup we add a link button and a callback with jQuery that calls our ASP-method and deletes the client-side icon if succeeded.

After these steps we see colored and clickable pushpins in a map. On the about page i've added some other samples. While these are just included as iframe, they use the same components: Leaflet, some with ASP.NET as data service. You could add these in WebForms with this technique.