264 lines
16 KiB
HTML
264 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GeoCSV Lite</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
|
<link rel="icon" href="favicon.ico">
|
|
<if you prefer loading libraries from standard hosts, uncomment this and
|
|
comment out the local source -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
crossorigin=""/ -->
|
|
<!-- link rel="stylesheet" href="vendor/node_modules/leaflet/dist/leaflet.css" type="text/css" -->
|
|
<!-- if you prefer loading libraries from standard hosts, un comment this and
|
|
comment out the local source -->
|
|
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
|
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
|
|
crossorigin=""></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
|
|
<!-- script src="vendor/node_modules/leaflet/dist/leaflet.js"></script -->
|
|
<!-- script src="vendor/node_modules/papaparse/papaparse.min.js"></script -->
|
|
</head>
|
|
<body>
|
|
<h1>GeoCSV Lite</h1>
|
|
<h4>
|
|
An ultra-lightweight tool to show comma-separated value data on a map
|
|
</h4>
|
|
<p id="message"></p>
|
|
<p id="error"></p>
|
|
<div id="app">
|
|
<p>
|
|
</p>
|
|
<h2>
|
|
Map using data from element content
|
|
</h2>
|
|
<p>
|
|
To make this work, you need a <samp><pre></samp> tag wrapping
|
|
the data. View source of this page to see this work.</samp>
|
|
</p>
|
|
<div id="element-content-map"
|
|
style="height: 600px; width: 80%; border: thin solid gray;">
|
|
<pre>
|
|
Country,Name,Latitude,Longitude,CountryCode,Continent
|
|
Saint Martin,Marigot,18.0731,-63.082200,MF,North America
|
|
American Samoa,Pago Pago,-14.266666666666667,-170.700000,AS,Australia
|
|
Anguilla,The Valley,18.216666666666665,-63.050000,AI,North America
|
|
Antigua and Barbuda,Saint John's,17.116666666666667,-61.850000,AG,North America
|
|
Argentina,Buenos Aires,-34.583333333333336,-58.666667,AR,South America
|
|
Aruba,Oranjestad,12.516666666666667,-70.033333,AW,North America
|
|
Bahamas,Nassau,25.083333333333332,-77.350000,BS,North America
|
|
Barbados,Bridgetown,13.1,-59.616667,BB,North America
|
|
Belize,Belmopan,17.25,-88.766667,BZ,Central America
|
|
Bermuda,Hamilton,32.28333333333333,-64.783333,BM,North America
|
|
Bolivia,La Paz,-16.5,-68.150000,BO,South America
|
|
Brazil,Brasilia,-15.783333333333333,-47.916667,BR,South America
|
|
British Virgin Islands,Road Town,18.416666666666668,-64.616667,VG,North America
|
|
Canada,Ottawa,45.416666666666664,-75.700000,CA,Central America
|
|
Cayman Islands,George Town,19.3,-81.383333,KY,North America
|
|
Chile,Santiago,-33.45,-70.666667,CL,South America
|
|
Colombia,Bogota,4.6,-74.083333,CO,South America
|
|
Costa Rica,San Jose,9.933333333333334,-84.083333,CR,Central America
|
|
Cuba,Havana,23.116666666666667,-82.350000,CU,North America
|
|
Curaçao,Willemstad,12.1,-68.916667,CW,North America
|
|
Dominica,Roseau,15.3,-61.400000,DM,North America
|
|
Dominican Republic,Santo Domingo,18.466666666666665,-69.900000,DO,North America
|
|
Ecuador,Quito,-0.21666666666666667,-78.500000,EC,South America
|
|
El Salvador,San Salvador,13.7,-89.200000,SV,Central America
|
|
Falkland Islands,Stanley,-51.7,-57.850000,FK,South America
|
|
Greenland,Nuuk,64.18333333333334,-51.750000,GL,Central America
|
|
Grenada,Saint George's,12.05,-61.750000,GD,North America
|
|
Guatemala,Guatemala City,14.616666666666667,-90.516667,GT,Central America
|
|
Guyana,Georgetown,6.8,-58.150000,GY,South America
|
|
Haiti,Port-au-Prince,18.533333333333335,-72.333333,HT,North America
|
|
Honduras,Tegucigalpa,14.1,-87.216667,HN,Central America
|
|
Jamaica,Kingston,18,-76.800000,JM,North America
|
|
Mexico,Mexico City,19.433333333333334,-99.133333,MX,Central America
|
|
Montserrat,Plymouth,16.7,-62.216667,MS,North America
|
|
Nicaragua,Managua,12.133333333333333,-86.250000,NI,Central America
|
|
Panama,Panama City,8.966666666666667,-79.533333,PA,Central America
|
|
Paraguay,Asuncion,-25.266666666666666,-57.666667,PY,South America
|
|
Peru,Lima,-12.05,-77.050000,PE,South America
|
|
Puerto Rico,San Juan,18.466666666666665,-66.116667,PR,North America
|
|
Saint Barthelemy,Gustavia,17.883333333333333,-62.850000,BL,North America
|
|
Saint Kitts and Nevis,Basseterre,17.3,-62.716667,KN,North America
|
|
Saint Lucia,Castries,14,-61.000000,LC,North America
|
|
Saint Pierre and Miquelon,Saint-Pierre,46.766666666666666,-56.183333,PM,Central America
|
|
Saint Vincent and the Grenadines,Kingstown,13.133333333333333,-61.216667,VC,Central America
|
|
Sint Maarten,Philipsburg,18.016666666666666,-63.033333,SX,North America
|
|
Suriname,Paramaribo,5.833333333333333,-55.166667,SR,South America
|
|
Trinidad and Tobago,Port of Spain,10.65,-61.516667,TT,North America
|
|
Turks and Caicos Islands,Grand Turk,21.466666,-71.133333,TC,North America
|
|
United States,Washington D.C.,38.883333,-77.000000,US,Central America
|
|
Uruguay,Montevideo,-34.85,-56.166667,UY,South America
|
|
Venezuela,Caracas,10.483333333333333,-66.866667,VE,South America
|
|
US Virgin Islands,Charlotte Amalie,18.35,-64.933333,VI,North America
|
|
</pre>
|
|
</div>
|
|
<h2>
|
|
Map using inline CSV
|
|
</h2>
|
|
<div id="inline-csv-map"
|
|
style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
|
<h2>
|
|
Map using CSV from URL
|
|
</h2>
|
|
<p>
|
|
This is more limited than I would like, because of cross-site scripting
|
|
blocks; the URL <b>must</b> be sourced from the same host as the page.
|
|
</p>
|
|
<div id="url-map"
|
|
style="height: 600px; width: 80%; border: thin solid gray;"></div>
|
|
<div id="doc">
|
|
<p>
|
|
Use this page as a crib for how to use <b>GeoCSV Lite</b> in your projects. In order
|
|
for it to work, you need:
|
|
</p>
|
|
<ol>
|
|
<li>Javascript dependencies:
|
|
<ol>
|
|
<li><a href="">Leaflet</a> (provides mapping);</li>
|
|
<li><a href="">PapaParse</a> (provides CSV parsing);</li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
A line which includes the geocsv_lite library, which should be
|
|
<em>after</em> those including the dependencies: <br/>
|
|
<samp><script src="js/compiled/geocsv_lite.js"
|
|
type="text/javascript"></script></samp>
|
|
</li>
|
|
<li>One (or more) <code>div</code> elements to contain your maps. It
|
|
is a requirement of Leaflet that these must have a fixed pixel height.
|
|
Each must have a distinct <code>id</code>;</li>
|
|
<li>
|
|
For each <code>div</code> which you wish to contain a map view,
|
|
an invocation of the function
|
|
<code>geocsv_lite.core.initialise_map_element(id, data-source)</code>: <br/>
|
|
<samp><script>geocsv_lite.core.initialise_map_element("map", "data/data.csv");</script></samp>
|
|
</li>
|
|
</ol>
|
|
<p>
|
|
The value passed as <var>data-source</var> may be CSV text, or it
|
|
may be a URL from which CSV text can be sourced.
|
|
</p>
|
|
<h2>
|
|
Custom map pins
|
|
</h2>
|
|
<p>
|
|
<img src="img/map-pins/Anchor-customer-pin.png"/>
|
|
<img src="img/map-pins/Broadband-supplier-pin.png"/>
|
|
<img src="img/map-pins/Champion-pin.png"/>
|
|
<img src="img/map-pins/Developer-pin.png"/>
|
|
<img src="img/map-pins/Further-education-pin.png"/>
|
|
<img src="img/map-pins/Higher-education-pin.png"/>
|
|
<img src="img/map-pins/Investor-pin.png"/>
|
|
<img src="img/map-pins/Landowner-pin.png"/>
|
|
<img src="img/map-pins/Operator-pin.png"/>
|
|
<img src="img/map-pins/Unknown-pin.png"/>
|
|
</p>
|
|
<p>
|
|
If your CSV document has a column called <samp>category</samp> (case insensitive),
|
|
then, as with the full-fat GeoCSV, if there is an image file in the
|
|
<samp>img/map-pins</samp> subdirectory whose name is the value of that
|
|
column with <samp>-pin.png</samp> 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
|
|
<samp>Unknown-pin.png</samp> as the basis for your design.
|
|
</p>
|
|
<p>
|
|
<strong>WARNING:</strong> if you have a column called <samp>category</samp>,
|
|
and you don't have an appropriate pin image for each value present,
|
|
then you will get 'broken' pin images appearing on your map.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<div id="credits">
|
|
<div>
|
|
<img height="16" width="16" alt="Clojure"
|
|
src="img/credits/clojure-icon.gif"/> Powered by
|
|
<a href="http://clojure.org">Clojure</a> ||
|
|
<img height="16" width="16" alt="GitHub"
|
|
src="img/credits/github-logo-transparent.png"/>Find me/fork me on
|
|
<a href="https://github.com/simon-brooke/geocsv-lite">Github</a> ||
|
|
<img height="16" width="16"
|
|
alt="Free Software Foundation"
|
|
src="img/credits/gnu.small.png"/>Licensed under the
|
|
<a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License version 2.0</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/compiled/geocsv_lite.js" type="text/javascript"></script>
|
|
<script>
|
|
/* Map using data from element content */
|
|
geocsv_lite.core.initialise_map_element("element-content-map",
|
|
document.getElementById("element-content-map").innerText);
|
|
/* Map using inline CSV passed to the function */
|
|
geocsv_lite.core.initialise_map_element("inline-csv-map",
|
|
"Country,Name,Latitude,Longitude,CountryCode,Continent\n" +
|
|
"Somaliland,Hargeisa,9.55,44.050000,NULL,Africa\n" +
|
|
"Western Sahara,El-Aaiún,27.153611,-13.203333,EH,Africa\n" +
|
|
"Algeria,Algiers,36.75,3.050000,DZ,Africa\n" +
|
|
"Angola,Luanda,-8.833333333333334,13.216667,AO,Africa\n" +
|
|
"Benin,Porto-Novo,6.483333333333333,2.616667,BJ,Africa\n" +
|
|
"Botswana,Gaborone,-24.633333333333333,25.900000,BW,Africa\n" +
|
|
"Burkina Faso,Ouagadougou,12.366666666666667,-1.516667,BF,Africa\n" +
|
|
"Burundi,Bujumbura,-3.3666666666666667,29.350000,BI,Africa\n" +
|
|
"Cameroon,Yaounde,3.8666666666666667,11.516667,CM,Africa\n" +
|
|
"Cape Verde,Praia,14.916666666666666,-23.516667,CV,Africa\n" +
|
|
"Central African Republic,Bangui,4.366666666666666,18.583333,CF,Africa\n" +
|
|
"Chad,N'Djamena,12.1,15.033333,TD,Africa\n" +
|
|
"Comoros,Moroni,-11.7,43.233333,KM,Africa\n" +
|
|
"Democratic Republic of the Congo,Kinshasa,-4.316666666666666,15.300000,CD,Africa\n" +
|
|
"Republic of Congo,Brazzaville,-4.25,15.283333,CG,Africa\n" +
|
|
"Cote d'Ivoire,Yamoussoukro,6.816666666666666,-5.266667,CI,Africa\n" +
|
|
"Djibouti,Djibouti,11.583333333333334,43.150000,DJ,Africa\n" +
|
|
"Egypt,Cairo,30.05,31.250000,EG,Africa\n" +
|
|
"Equatorial Guinea,Malabo,3.75,8.783333,GQ,Africa\n" +
|
|
"Eritrea,Asmara,15.333333333333334,38.933333,ER,Africa\n" +
|
|
"Ethiopia,Addis Ababa,9.033333333333333,38.700000,ET,Africa\n" +
|
|
"Gabon,Libreville,0.38333333333333336,9.450000,GA,Africa\n" +
|
|
"The Gambia,Banjul,13.45,-16.566667,GM,Africa\n" +
|
|
"Ghana,Accra,5.55,-0.216667,GH,Africa\n" +
|
|
"Guinea,Conakry,9.5,-13.700000,GN,Africa\n" +
|
|
"Guinea-Bissau,Bissau,11.85,-15.583333,GW,Africa\n" +
|
|
"Kenya,Nairobi,-1.2833333333333332,36.816667,KE,Africa\n" +
|
|
"Lesotho,Maseru,-29.316666666666666,27.483333,LS,Africa\n" +
|
|
"Liberia,Monrovia,6.3,-10.800000,LR,Africa\n" +
|
|
"Libya,Tripoli,32.88333333333333,13.166667,LY,Africa\n" +
|
|
"Madagascar,Antananarivo,-18.916666666666668,47.516667,MG,Africa\n" +
|
|
"Malawi,Lilongwe,-13.966666666666667,33.783333,MW,Africa\n" +
|
|
"Mali,Bamako,12.65,-8.000000,ML,Africa\n" +
|
|
"Mauritania,Nouakchott,18.066666666666666,-15.966667,MR,Africa\n" +
|
|
"Mauritius,Port Louis,-20.15,57.483333,MU,Africa\n" +
|
|
"Morocco,Rabat,34.016666666666666,-6.816667,MA,Africa\n" +
|
|
"Mozambique,Maputo,-25.95,32.583333,MZ,Africa\n" +
|
|
"Namibia,Windhoek,-22.566666666666666,17.083333,NA,Africa\n" +
|
|
"Niger,Niamey,13.516666666666667,2.116667,NE,Africa\n" +
|
|
"Nigeria,Abuja,9.083333333333334,7.533333,NG,Africa\n" +
|
|
"Rwanda,Kigali,-1.95,30.050000,RW,Africa\n" +
|
|
"Saint Helena,Jamestown,-15.933333333333334,-5.716667,SH,Africa\n" +
|
|
"Sao Tome and Principe,Sao Tome,0.3333333333333333,6.733333,ST,Africa\n" +
|
|
"Senegal,Dakar,14.733333333333333,-17.633333,SN,Africa\n" +
|
|
"Seychelles,Victoria,-4.616666666666667,55.450000,SC,Africa\n" +
|
|
"Sierra Leone,Freetown,8.483333333333333,-13.233333,SL,Africa\n" +
|
|
"Somalia,Mogadishu,2.066666666666667,45.333333,SO,Africa\n" +
|
|
"South Africa,Pretoria,-25.7,28.216667,ZA,Africa\n" +
|
|
"South Sudan,Juba,4.85,31.616667,SS,Africa\n" +
|
|
"Sudan,Khartoum,15.6,32.533333,SD,Africa\n" +
|
|
"Swaziland,Mbabane,-26.316666666666666,31.133333,SZ,Africa\n" +
|
|
"Tanzania,Dar es Salaam,-6.8,39.283333,TZ,Africa\n" +
|
|
"Togo,Lome,6.116666666666666,1.216667,TG,Africa\n" +
|
|
"Tunisia,Tunis,36.8,10.183333,TN,Africa\n" +
|
|
"Uganda,Kampala,0.31666666666666665,32.550000,UG,Africa\n" +
|
|
"Zambia,Lusaka,-15.416666666666666,28.283333,ZM,Africa\n" +
|
|
"Zimbabwe,Harare,-17.816666666666666,31.033333,ZW,Africa\n" +
|
|
"British Indian Ocean Territory,Diego Garcia,-7.3,72.400000,IO,Africa\n" );
|
|
/* Map using CSV from URL */
|
|
var url = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + "/data/europe-capitals.csv";
|
|
geocsv_lite.core.initialise_map_element("url-map", url);
|
|
</script>
|
|
</body>
|
|
</html>
|