GeoCSV JS

An even more ultra-lightweight tool to show comma-separated value data on a map

Map using data from element content

To make this work, you need a <pre> tag wrapping the data. View source of this page to see this work. 

          Country,Name,Latitude,Longitude,CountryCode,Continent,Category
          Saint Martin,Marigot,18.0731,-63.0822,MF,North America,MF
          Anguilla,The Valley,18.2166666666667,-63.05,AI,North America,
          Antigua and Barbuda,Saint John's,17.1166666666667,-61.85,AG,North America,
          Argentina,Buenos Aires,-34.5833333333333,-58.666667,AR,South America,AR
          Aruba,Oranjestad,12.5166666666667,-70.033333,AW,North America,
          Bahamas,Nassau,25.0833333333333,-77.35,BS,North America,
          Barbados,Bridgetown,13.1,-59.616667,BB,North America,BB
          Belize,Belmopan,17.25,-88.766667,BZ,Central America,BZ
          Bermuda,Hamilton,32.2833333333333,-64.783333,BM,North America,
          Bolivia,La Paz,-16.5,-68.15,BO,South America,BO
          Brazil,Brasilia,-15.7833333333333,-47.916667,BR,South America,BR
          British Virgin Islands,Road Town,18.4166666666667,-64.616667,VG,North America,
          Canada,Ottawa,45.4166666666667,-75.7,CA,Central America,CA
          Cayman Islands,George Town,19.3,-81.383333,KY,North America,
          Chile,Santiago,-33.45,-70.666667,CL,South America,CL
          Colombia,Bogota,4.6,-74.083333,CO,South America,CO
          Costa Rica,San Jose,9.93333333333333,-84.083333,CR,Central America,CR
          Cuba,Havana,23.1166666666667,-82.35,CU,North America,CU
          Curaçao,Willemstad,12.1,-68.916667,CW,North America,
          Dominica,Roseau,15.3,-61.4,DM,North America,DM
          Dominican Republic,Santo Domingo,18.4666666666667,-69.9,DO,North America,DO
          Ecuador,Quito,-0.216666666666667,-78.5,EC,South America,EC
          El Salvador,San Salvador,13.7,-89.2,SV,Central America,SV
          Falkland Islands,Stanley,-51.7,-57.85,FK,South America,
          Greenland,Nuuk,64.1833333333333,-51.75,GL,Central America,
          Grenada,Saint George's,12.05,-61.75,GD,North America,GD
          Guatemala,Guatemala City,14.6166666666667,-90.516667,GT,Central America,GT
          Guyana,Georgetown,6.8,-58.15,GY,South America,GY
          Haiti,Port-au-Prince,18.5333333333333,-72.333333,HT,North America,HT
          Honduras,Tegucigalpa,14.1,-87.216667,HN,Central America,HN
          Jamaica,Kingston,18,-76.8,JM,North America,JM
          Mexico,Mexico City,19.4333333333333,-99.133333,MX,Central America,MX
          Montserrat,Plymouth,16.7,-62.216667,MS,North America,
          Nicaragua,Managua,12.1333333333333,-86.25,NI,Central America,NI
          Panama,Panama City,8.96666666666667,-79.533333,PA,Central America,PA
          Paraguay,Asuncion,-25.2666666666667,-57.666667,PY,South America,PY
          Peru,Lima,-12.05,-77.05,PE,South America,PE
          Puerto Rico,San Juan,18.4666666666667,-66.116667,PR,North America,
          Saint Barthelemy,Gustavia,17.8833333333333,-62.85,BL,North America,
          Saint Kitts and Nevis,Basseterre,17.3,-62.716667,KN,North America,KN
          Saint Lucia,Castries,14,-61,LC,North America,LC
          Saint Pierre and Miquelon,Saint-Pierre,46.7666666666667,-56.183333,PM,North America,
          Saint Vincent and the Grenadines,Kingstown,13.1333333333333,-61.216667,VC,Central America,VC
          Sint Maarten,Philipsburg,18.0166666666667,-63.033333,SX,North America,
          Suriname,Paramaribo,5.83333333333333,-55.166667,SR,South America,SR
          Trinidad and Tobago,Port of Spain,10.65,-61.516667,TT,North America,TT
          Turks and Caicos Islands,Grand Turk,21.4666666666667,-71.133333,TC,North America,
          United States,Washington DC,38.883333,-77,US,North America,US
          Uruguay,Montevideo,-34.85,-56.166667,UY,South America,UY
          Venezuela,Caracas,10.4833333333333,-66.866667,VE,South America,VE
          US Virgin Islands,Charlotte Amalie,18.35,-64.933333,VI,North America,

Map using inline CSV

Map using CSV from URL

This is more limited than I would like, because of cross-site scripting blocks; the URL must be sourced from the same host as the page.

Use this page as a crib for how to use geocsv-js in your projects. In order for it to work, you need:

  1. Javascript dependencies:
    1. Leaflet (provides mapping);
    2. PapaParse (provides CSV parsing);
  2. A line which includes the geocsv library, which should be after those including the dependencies:
    <script src="js/geocsv.js" type="text/javascript"></script>
  3. One (or more) div elements to contain your maps. It is a requirement of Leaflet that these must have a fixed pixel height. Each must have a distinct id;
  4. For each div which you wish to contain a map view, an invocation of the function GeoCSV.initialiseMapElement(id, data-source):
    <script>GeoCSV.initialiseMapElement("map", "data/data.csv");</script>

The value passed as data-source may be CSV text, or it may be a URL from which CSV text can be sourced.

Custom map pins

If your CSV document has a column called category (case insensitive), then, as with the full-fat GeoCSV, if there is an image file in the img/map-pins subdirectory whose name is the value of that column with -pin.png appended, then that image will be used as the image for the map pin. The image should be 40 pixels high and 30 wide. It will be anchored centre bottom. You are advised to use Unknown-pin.png as the basis for your design.

WARNING: if you have a column called category, and you don't have an appropriate pin image for each value present, then you will get 'broken' pin images appearing on your map.

GitHub repository

Is here.