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
CSV2HTML

Your comments are more than welcome

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

28 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jens Oldeland
9 years ago

Wow – thatยดs simple ! I will forward to all my non-GIS colleagues in hope that they will be able to make their own quick and dirty maps and not bother me all the time. THX for sharing and programming! Thatยดs why the internet is so great – itยดs a sharing community!

Habboub
Habboub
9 years ago
Reply to  Jens Oldeland

Exactly, Jens ..This is purpose of this tool ๐Ÿ˜‰

Jens Oldeland
9 years ago
Reply to  Habboub

Do you plan to exand the tool in the future? If so, I had already one point for the wishlist ๐Ÿ™‚

Maybe there could be a field in the CSV that holds colors, e.g. “red”, “green”. Then the user could choose in the tool the color column and voila the groups could be colored. That would allow users to visualize classifications of points very easily but is already difficult for the non-GIS folks if they have to do it in other tools.

cheers

Habboub
Habboub
9 years ago
Reply to  Jens Oldeland

Yup, why not ๐Ÿ˜‰ Thanks for the ideas

David Piles
9 years ago

Cool! I needed to correct the center, but it works so easy that offends. Great!

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  David Piles

Nice to hear!
well, since it’s a general too, it averages both latitudes and longitudes and assigns them to be the center ๐Ÿ™‚

David Piles
9 years ago

It’s a good solution. I don’t know why it did not work correctly with my csv.

Nuno Sรก
Nuno Sรก
9 years ago

Interesting, does it allow some kind of collaborative mapping??

Habboub
Habboub
9 years ago
Reply to  Nuno Sรก

Actually, it is a very basic tool that barely can map you csv files up.
Sorry ๐Ÿ™

Tmo
Tmo
9 years ago

Love the simple interface, however during the generate portion I’m getting the following error message ” Unhandled exception has occured in your application. If you click Continue, the application will ignore this error and attempt to continue. If you click Quit, the application will close immedietly. Conversion from string “Ontario”” to type “Double” is not valid. ” Why is this attempting to convert a string to number? In the CSV file the column is listed as general and each cell begins with a text character so I’m lost as to why it’s trying to convert to a double. Thanks in… Read more »

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Tmo

Hi Tmo,
Most probably, the error is handling the lat. and long. columns. These columns should contain numbers (WGS84 geographic coordinates – decimal formatted like 34.123456). do they?

Tmo
Tmo
9 years ago

Yup, formatted properly.

It’s throwing an exception when it’s attempting to change the hometown field to a double type. The “hometown” field is formatted as text in the csv.

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Tmo

Yup, I knew what the problem is.
The “hometown” field contains commas. Since the CSV file is “Comma Separated Values”, the code got confused and assume that it’s a value in the next field (which is the “x”) since a “,” in the CSV file means a new field. As a result, the number of the values in the header will be less by one than in the fields.
The solution: replace the “,” in the hometown with “-” . You can do that easily using (Ctrl+H) in MS excel.
Please let me know if it works ๐Ÿ™‚

Tmo
Tmo
9 years ago

Sorry for the late response, it does work! Thanks

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Tmo

๐Ÿ™‚ happy to hear

Kurt
Kurt
9 years ago

Hi,
please explain, why this simple test-file does not work:

ORT,lng,lat
“LaaanderThaya”,16.3875,48.7188
“Aigen-Schlรคgl”,13.9678,48.6390
“Altaussee”,13.7633,47.6395

thanks

Kurt

Kurt
Kurt
9 years ago
Reply to  Kurt

Under a german windows 7 the map-center is wrong, when generated. with my simple sample-data I got the following :
var map = L.map(‘map’).setView([483324,333333333,147062],12);

Kurt
Kurt
9 years ago
Reply to  Kurt

Hi Mohammed, any chances to get this fixed?

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Kurt

yes, I tried it using the coordinates you sent .. it works

Kurt
Kurt
9 years ago

tried it again, same result: center-calculation is messed up (as posted above). musrt be a language-specific-problem

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Kurt

var map = L.map(‘map’).setView([48.3324333333333,14.7062],12);

Kurt
Kurt
9 years ago

one more problem. Fill in data (#1 to #5) . delete all from box (#6 in your screen shot). now try to enter your own text (e.g. test) —> crash (see screenshot)

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Kurt

Oops, Sorry for that but since it is not English, I can understand what the error says! would you mind translate it?

Kurt
Kurt
9 years ago

nmea2leaflet does not work anymore. A problem prohibited the correct execution of the program. Close the program

Mohammed Habboub
Mohammed Habboub
9 years ago
Reply to  Kurt

Sorry, I have no idea ๐Ÿ™
I tested it on more than one machine, and it works (I’ll keep working on it till I find sort it out)

Mohammed Habboub
Mohammed Habboub
9 years ago

does your CSV file look the same?

Kurt
Kurt
9 years ago

yes!!!

Marco Born
Marco Born
7 years ago

Hi, it seems to be a great tool. Thanks for sharing it. I tried to import a small CSV I have but the generated page ist just a simple, empty OSM page with some explanations on the left side. Do I need to upload the file to a webserver or can I open it from my Desktop?