simon/geocsv-js
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Surprising, works!

Browse source
This commit is contained in:
Simon Brooke 2020-02-25 10:31:38 +00:00
parent 0345a0f2c3
commit e6dda463ee
No known key found for this signature in database
GPG key ID: A7A4F18D1D4DF987
2 changed files with 41 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/public/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>GeoCSV Lite</title>
<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">
@ -11,9 +11,9 @@ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIpt
crossorigin=""/>
</head>
<body>
<h1>GeoCSV Lite</h1>
<h1>GeoCSV JS</h1>
<h4>
An ultra-lightweight tool to show comma-separated value data on a map
An even more ultra-lightweight tool to show comma-separated value data on a map
</h4>
<p id="message"></p>
<p id="error"></p>
@ -184,8 +184,6 @@ crossorigin=""></script>
/* Map using data from element content */
GeoCSV.initialise_map_element("element-content-map",
document.getElementById("element-content-map").innerText);
</script>
<!-- script>
/* Map using inline CSV passed to the function */
GeoCSV.initialise_map_element("inline-csv-map",
"Country,Name,Latitude,Longitude,CountryCode,Continent\n" +
@ -250,6 +248,6 @@ crossorigin=""></script>
/* Map using CSV from URL */
var url = window.location.href.substring(0, window.location.href.length - "index.html".length) + "data/europe-capitals.csv";
GeoCSV.initialise_map_element("url-map", url);
</script -->
</script>
</body>
</html>

59
resources/public/js/geocsv.js
View file

@ -10,21 +10,26 @@ var GeoCSV = {
var record = new Object();
for ( i = 0; i < Math.min( ks.length, vs.length); i++) {
if ( ks[ i]) {
record[ ks[ i]] = vs[ i];
}
}
return record;
},
prepareRecords( data) {
var cols = data[0].forEach( c => {
c.trim().toLowerCase().replace( /[^\w\d]+/, "-");
var cols = data[0].map( c => {
return c.trim().toLowerCase().replace( /[^\w\d]+/, "-");
});
console.log( "data[0]: " + data[0] + "; cols: " + cols);
var rest = data.slice( 1);
// I should be able to do this with a forEach over data.slice( 1), but
// I've failed to make it work.
var result = [];
for ( j = 1; j < rest.length; j++) {
@ -71,7 +76,7 @@ var GeoCSV = {
popupContent( record) {
var c = "<h5>" + record[ "name"] + "</h5><table>";
record.keys().foreach( k => {
Object.keys(record).forEach( k => {
c += "<tr><th>" +
k +
"</th><td>" +
@ -85,21 +90,26 @@ var GeoCSV = {
addPin( record, index, view) {
var lat = Number( record[ "latitude"]);
var lng = Number( record[ "longitude"]);
var pin = L.icon( {iconAnchor: [16, 41],
iconSize: [32, 42],
iconUrl: "img/map-pins/" +
this.pinImage( record) +
".png",
riseOnHover: true,
shadowAnchor: [16, 23],
shadowSize: [57, 24],
shadowUrl: "img/map-pins/shadow_pin.png"});
var marker = L.marker( L.latLng( lat, lng),
{icon: pin, title: record["name"]});
marker.bindPopup( popupContent( record));
marker.addTo( view);
return marker;
if ( !isNaN( lat) && !isNaN( lng)) {
var pin = L.icon( {iconAnchor: [16, 41],
iconSize: [32, 42],
iconUrl: "img/map-pins/" +
this.pinImage( record) +
".png",
riseOnHover: true,
shadowAnchor: [16, 23],
shadowSize: [57, 24],
shadowUrl: "img/map-pins/shadow_pin.png"});
var marker = L.marker( L.latLng( lat, lng),
{icon: pin, title: record["name"]});
marker.bindPopup( this.popupContent( record));
marker.addTo( view);
return marker;
} else {
return null;
}
},
removePins( view) {
@ -143,10 +153,15 @@ var GeoCSV = {
},
refreshPins( view, records) {
removePins( view);
record.forEach( r => {
});
computeBounds( view, records);
this.removePins( view);
for ( i = 0; i < records.length; i++) {
if( records[i]) {
this.addPin( records[i], i, view);
}
}
this.computeBounds( view, records);
}
},
@ -208,7 +223,7 @@ var GeoCSV = {
this.Notify.message( "Found " + records.length +
" records of inline data for map " + id);
this.Gis.refreshPins( view, records);
this.GIS.refreshPins( view, records);
}
}
}