{"id":23463718,"url":"https://github.com/ptv-logistics/webformsmap","last_synced_at":"2026-01-20T23:32:39.653Z","repository":{"id":26797454,"uuid":"30255883","full_name":"ptv-logistics/WebFormsMap","owner":"ptv-logistics","description":"Add a data-driven map to a WebForms application","archived":false,"fork":false,"pushed_at":"2024-08-07T09:12:26.000Z","size":442,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-02-16T01:43:51.104Z","etag":null,"topics":["leaflet","ptv-xserver","webforms"],"latest_commit_sha":null,"homepage":"","language":"ASP.NET","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ptv-logistics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-02-03T17:43:46.000Z","updated_at":"2024-08-07T09:12:30.000Z","dependencies_parsed_at":"2024-08-07T12:43:20.308Z","dependency_job_id":"16af368d-05dc-4f69-8a79-19b3814b19f3","html_url":"https://github.com/ptv-logistics/WebFormsMap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptv-logistics%2FWebFormsMap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptv-logistics%2FWebFormsMap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptv-logistics%2FWebFormsMap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptv-logistics%2FWebFormsMap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ptv-logistics","download_url":"https://codeload.github.com/ptv-logistics/WebFormsMap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565086,"owners_count":21125415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet","ptv-xserver","webforms"],"created_at":"2024-12-24T09:15:30.270Z","updated_at":"2026-01-20T23:32:34.634Z","avatar_url":"https://github.com/ptv-logistics.png","language":"ASP.NET","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebFormsMap\nAdd a data-driven map to a WebForms application\n\nThe sample shows how to visualize your geographic data in a [ASP.NET WebForms application](http://www.asp.net/web-forms). 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.\n\nTo run this code you need\n\n* Microsoft Visual Studio or Visual Studio Express 2013 for Web http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx\n* An xServer internet token. Go to http://xserver.ptvgroup.com/en-uk/products/ptv-xserver-internet/test/ to get a trial token.\n\n### 01 - Create the Solution and prepare it for Leaflet\n\n* In Visual Studio create a new Solution of type \"ASP.NET Web Forms Application\"\n* Add a link to the Leaflet style sheet in  Site.Master [here](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/Site.Master#L9).\n* Add a link to the Leaflet JavaScript source in Site.Master [here](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/Site.Master#L23).\n* PTV xMapServer requires an addon for single-tile map images. The code is provided by [this GitHub project](https://github.com/ptv-logistics/Leaflet.NonTiledLayer). 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](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/Site.Master#L24-L25).\n\n### 02 - Create a MapControl and add it to a Page\n* In Visual Studio we create a new item of type \"Web Forms User Control\" and name it MapControl\n* The [Markup Code](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx) contains the initialization of Leaflet with some properties that are provided by the [Code Behind](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx.cs).\n* 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](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/Default.aspx#L29-31#L33).\n\n### 03 - Supply the Control with Data and display it on the Map\n* To simulate our database, we just use a plain [CSV file](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/App_Data/Baufeldt.txt) that contains some retail stores with geographic coordinates. \n* We want to provide this data as [GeoJson](http://geojson.org/), 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](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapData.ashx.cs) reads our \"database\" and converts the data to GeoJson. \n* 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\n* The [data initialization](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx#L22) fetches the data via jQuery and initializes a new layer with the response.\n\n### 04 - Style the Data\n\n* We want to display different balloon icons, depending on the type property of the GeoJson data. For this purpose we add [new Leaflet icons](https://github.com/ptv-logistics/WebFormsMap/tree/master/WebFormsMap/Images/Markers) to our web project.\n* In the control part these properties are used to create dynamic pushpins with the Leaflet [pointToLayer function](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx#L24-L40).\n\n### 05 - Add interaction\n\n* We want to provide a delete function for a pushpin that calls a function on our ASP-Site to delete a location.\n* We just implement a new [dummy-handler](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapAction.ashx.cs) which is called from the map and would delete a location from our database.\n* For the leaflet popup we add a [link button](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx#L34-L36) and a [callback with jQuery](https://github.com/ptv-logistics/WebFormsMap/blob/master/WebFormsMap/MapControl.ascx#L49-L55) that calls our ASP-method and deletes the client-side icon if succeeded.\n\nAfter these steps we see [colored and clickable pushpins in a map](http://176.95.37.29/WebFormsMap/). On the about page i've added [some other samples](http://176.95.37.29/WebFormsMap/About).  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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptv-logistics%2Fwebformsmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fptv-logistics%2Fwebformsmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptv-logistics%2Fwebformsmap/lists"}