Digital Geography

10. August 2015

CSV to HTML 101 webmap

Alright, away from python scripting, I want to share a small tool CSV to HTML 101 with you, guys. I used VB.NET to develop it in order to help non-GIS experts from converting a CSV file to a web page using leaflet.JS library. Honestly, it’s not that complicated tool, but it gives them that push to start a web map especially if they have not dug that deep in web development, javascript and leaflet. However, I’m one of these people, so  please don’t judge my ugly code 😳

The developed tool should meet the following criteria:

  1. Simple enough to be used by my grandma. 😛
  2. Converting a CSV file directly to an HTML file without using any third-party web/software that could be used to convert them to geoJSON/ JSON,…. (trying not to confuse my grandma 😛 )
  3. The output is one file only (No CSS or JS source files). That will  make it much easier for sharing on any operating system using a web browser.
  4. The tool should allow the user to choose the desired fields to be displayed in the markers popups.
  5. The tool should be executable (windows, here) as it does not require additional software packages to run the script.
  6. The tool should allow the user to insert an abstract about the project

Steps:

  1. Download the tool from here
  2. Click on import CSV and navigate to the desired CSV file: The tool reads the CSV file and extracts the header.
  3. The fields headers will be loaded in the checkbox: The checked fields will be displayed in the popups.
  4. Specify the latitude and longitude  fields (from the combo boxes)
  5. Specify the zoom level of the first map: For map initial sets, the center will be automatically calculated based on the markers locations but the zoom level depends on the geographic distribution of the data. (Therefore it’s required here!)
  6. Write a brief  description of the project/ data you are displaying.
  7. Click on “Generate” button and choose the desired location of HTML file
  8. Insert the web page title
  9. Insert the project title
  10. Done 🙂 (examine it here)

P.S. The tool uses OSM

CSV2HTML

Your comments are more than welcome