267 lines
14 KiB
HTML
267 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GeoCSV JS</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">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
|
crossorigin=""/>
|
|
</head>
|
|
<body>
|
|
<h1>GeoCSV JS</h1>
|
|
<h4>
|
|
An even more 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,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,
|
|
</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.initialiseMapElement(id, data-source)</code>: <br/>
|
|
<samp><script>geocsv_lite.core.initialiseMapElement("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>
|
|
<h2>
|
|
GitHub repository
|
|
</h2>
|
|
<p>
|
|
Is <a href="https://github.com/simon-brooke/geocsv-js">here.</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<div id="credits">
|
|
<div>
|
|
<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="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="js/geocsv.js" type="text/javascript"></script>
|
|
<script>
|
|
/* Map using data from element content */
|
|
GeoCSV.initialiseMapElement("element-content-map",
|
|
document.getElementById("element-content-map").innerText);
|
|
/* Map using inline CSV passed to the function */
|
|
GeoCSV.initialiseMapElement("inline-csv-map",
|
|
"Country,Name,Latitude,Longitude,CountryCode,Continent,Category\n" +
|
|
"Somaliland,Hargeisa,9.55,44.05,NULL,Africa,\n" +
|
|
"Western Sahara,El-Aaiún,27.153611,-13.203333,EH,Africa,EH\n" +
|
|
"Algeria,Algiers,36.75,3.05,DZ,Africa,DZ\n" +
|
|
"Angola,Luanda,-8.83333333333333,13.216667,AO,Africa,AO\n" +
|
|
"Benin,Porto-Novo,6.48333333333333,2.616667,BJ,Africa,BJ\n" +
|
|
"Botswana,Gaborone,-24.6333333333333,25.9,BW,Africa,BW\n" +
|
|
"Burkina Faso,Ouagadougou,12.3666666666667,-1.516667,BF,Africa,BF\n" +
|
|
"Burundi,Bujumbura,-3.36666666666667,29.35,BI,Africa,BI\n" +
|
|
"Cameroon,Yaounde,3.86666666666667,11.516667,CM,Africa,CM\n" +
|
|
"Cape Verde,Praia,14.9166666666667,-23.516667,CV,Africa,CV\n" +
|
|
"Central African Republic,Bangui,4.36666666666667,18.583333,CF,Africa,CF\n" +
|
|
"Chad,N'Djamena,12.1,15.033333,TD,Africa,TD\n" +
|
|
"Comoros,Moroni,-11.7,43.233333,KM,Africa,KM\n" +
|
|
"Democratic Republic of the Congo,Kinshasa,-4.31666666666667,15.3,CD,Africa,CD\n" +
|
|
"Republic of Congo,Brazzaville,-4.25,15.283333,CG,Africa,CG\n" +
|
|
"Cote d'Ivoire,Yamoussoukro,6.81666666666667,-5.266667,CI,Africa,CI\n" +
|
|
"Djibouti,Djibouti,11.5833333333333,43.15,DJ,Africa,DJ\n" +
|
|
"Egypt,Cairo,30.05,31.25,EG,Africa,EG\n" +
|
|
"Equatorial Guinea,Malabo,3.75,8.783333,GQ,Africa,GQ\n" +
|
|
"Eritrea,Asmara,15.3333333333333,38.933333,ER,Africa,ER\n" +
|
|
"Ethiopia,Addis Ababa,9.03333333333333,38.7,ET,Africa,ET\n" +
|
|
"Gabon,Libreville,0.383333333333333,9.45,GA,Africa,GA\n" +
|
|
"The Gambia,Banjul,13.45,-16.566667,GM,Africa,GM\n" +
|
|
"Ghana,Accra,5.55,-0.216667,GH,Africa,GH\n" +
|
|
"Guinea,Conakry,9.5,-13.7,GN,Africa,GN\n" +
|
|
"Guinea-Bissau,Bissau,11.85,-15.583333,GW,Africa,GW\n" +
|
|
"Kenya,Nairobi,-1.28333333333333,36.816667,KE,Africa,KE\n" +
|
|
"Lesotho,Maseru,-29.3166666666667,27.483333,LS,Africa,LS\n" +
|
|
"Liberia,Monrovia,6.3,-10.8,LR,Africa,LR\n" +
|
|
"Libya,Tripoli,32.8833333333333,13.166667,LY,Africa,LY\n" +
|
|
"Madagascar,Antananarivo,-18.9166666666667,47.516667,MG,Africa,MG\n" +
|
|
"Malawi,Lilongwe,-13.9666666666667,33.783333,MW,Africa,MW\n" +
|
|
"Mali,Bamako,12.65,-8,ML,Africa,ML\n" +
|
|
"Mauritania,Nouakchott,18.0666666666667,-15.966667,MR,Africa,MR\n" +
|
|
"Mauritius,Port Louis,-20.15,57.483333,MU,Africa,MU\n" +
|
|
"Morocco,Rabat,34.0166666666667,-6.816667,MA,Africa,MA\n" +
|
|
"Mozambique,Maputo,-25.95,32.583333,MZ,Africa,MZ\n" +
|
|
"Namibia,Windhoek,-22.5666666666667,17.083333,NA,Africa,NA\n" +
|
|
"Niger,Niamey,13.5166666666667,2.116667,NE,Africa,NE\n" +
|
|
"Nigeria,Abuja,9.08333333333333,7.533333,NG,Africa,NG\n" +
|
|
"Rwanda,Kigali,-1.95,30.05,RW,Africa,RW\n" +
|
|
"Saint Helena,Jamestown,-15.9333333333333,-5.716667,SH,Africa\n" +
|
|
"Sao Tome and Principe,Sao Tome,0.333333333333333,6.733333,ST,Africa,ST\n" +
|
|
"Senegal,Dakar,14.7333333333333,-17.633333,SN,Africa,SN\n" +
|
|
"Seychelles,Victoria,-4.61666666666667,55.45,SC,Africa,SC\n" +
|
|
"Sierra Leone,Freetown,8.48333333333333,-13.233333,SL,Africa,SL\n" +
|
|
"Somalia,Mogadishu,2.06666666666667,45.333333,SO,Africa,SO\n" +
|
|
"South Africa,Pretoria,-25.7,28.216667,ZA,Africa,ZA\n" +
|
|
"South Sudan,Juba,4.85,31.616667,SS,Africa,SS\n" +
|
|
"Sudan,Khartoum,15.6,32.533333,SD,Africa,SD\n" +
|
|
"Swaziland,Mbabane,-26.3166666666667,31.133333,SZ,Africa,SZ\n" +
|
|
"Tanzania,Dar es Salaam,-6.8,39.283333,TZ,Africa,TZ\n" +
|
|
"Togo,Lome,6.11666666666667,1.216667,TG,Africa,TG\n" +
|
|
"Tunisia,Tunis,36.8,10.183333,TN,Africa,TN\n" +
|
|
"Uganda,Kampala,0.316666666666667,32.55,UG,Africa,UG\n" +
|
|
"Zambia,Lusaka,-15.4166666666667,28.283333,ZM,Africa,ZM\n" +
|
|
"Zimbabwe,Harare,-17.8166666666667,31.033333,ZW,Africa,ZW\n" +
|
|
"British Indian Ocean Territory,Diego Garcia,-7.3,72.4,IO,Africa,\n" );
|
|
/* Map using CSV from URL */
|
|
console.log( "Window.location.href = `" + window.location.href + "`");
|
|
var url = window.location.href;
|
|
|
|
if (url.endsWith( "index.html")) {
|
|
url = url.substring(0, window.location.href.length - "index.html".length);
|
|
}
|
|
|
|
url = url + "data/europe-capitals.csv";
|
|
|
|
GeoCSV.initialiseMapElement("url-map", url);
|
|
</script>
|
|
</body>
|
|
</html>
|