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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>GeoCSV Lite</title> <title>GeoCSV JS</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css">
@ -11,9 +11,9 @@ integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIpt
crossorigin=""/> crossorigin=""/>
</head> </head>
<body> <body>
<h1>GeoCSV Lite</h1> <h1>GeoCSV JS</h1>
<h4> <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> </h4>
<p id="message"></p> <p id="message"></p>
<p id="error"></p> <p id="error"></p>
@ -184,8 +184,6 @@ crossorigin=""></script>
/* Map using data from element content */ /* Map using data from element content */
GeoCSV.initialise_map_element("element-content-map", GeoCSV.initialise_map_element("element-content-map",
document.getElementById("element-content-map").innerText); document.getElementById("element-content-map").innerText);
</script>
<!-- script>
/* Map using inline CSV passed to the function */ /* Map using inline CSV passed to the function */
GeoCSV.initialise_map_element("inline-csv-map", GeoCSV.initialise_map_element("inline-csv-map",
"Country,Name,Latitude,Longitude,CountryCode,Continent\n" + "Country,Name,Latitude,Longitude,CountryCode,Continent\n" +
@ -250,6 +248,6 @@ crossorigin=""></script>
/* Map using CSV from URL */ /* Map using CSV from URL */
var url = window.location.href.substring(0, window.location.href.length - "index.html".length) + "data/europe-capitals.csv"; 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); GeoCSV.initialise_map_element("url-map", url);
</script --> </script>
</body> </body>
</html> </html>

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

@ -10,21 +10,26 @@ var GeoCSV = {
var record = new Object(); var record = new Object();
for ( i = 0; i < Math.min( ks.length, vs.length); i++) { for ( i = 0; i < Math.min( ks.length, vs.length); i++) {
if ( ks[ i]) {
record[ ks[ i]] = vs[ i]; record[ ks[ i]] = vs[ i];
}
} }
return record; return record;
}, },
prepareRecords( data) { prepareRecords( data) {
var cols = data[0].forEach( c => { var cols = data[0].map( c => {
c.trim().toLowerCase().replace( /[^\w\d]+/, "-"); return c.trim().toLowerCase().replace( /[^\w\d]+/, "-");
}); });
console.log( "data[0]: " + data[0] + "; cols: " + cols);
var rest = data.slice( 1); var rest = data.slice( 1);
// I should be able to do this with a forEach over data.slice( 1), but // I should be able to do this with a forEach over data.slice( 1), but
// I've failed to make it work. // I've failed to make it work.
var result = []; var result = [];
for ( j = 1; j < rest.length; j++) { for ( j = 1; j < rest.length; j++) {
@ -71,7 +76,7 @@ var GeoCSV = {
popupContent( record) { popupContent( record) {
var c = "<h5>" + record[ "name"] + "</h5><table>"; var c = "<h5>" + record[ "name"] + "</h5><table>";
record.keys().foreach( k => { Object.keys(record).forEach( k => {
c += "<tr><th>" + c += "<tr><th>" +
k + k +
"</th><td>" + "</th><td>" +
@ -85,21 +90,26 @@ var GeoCSV = {
addPin( record, index, view) { addPin( record, index, view) {
var lat = Number( record[ "latitude"]); var lat = Number( record[ "latitude"]);
var lng = Number( record[ "longitude"]); 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) { removePins( view) {
@ -143,10 +153,15 @@ var GeoCSV = {
}, },
refreshPins( view, records) { refreshPins( view, records) {
removePins( view); this.removePins( view);
record.forEach( r => {
}); for ( i = 0; i < records.length; i++) {
computeBounds( view, records); 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 + this.Notify.message( "Found " + records.length +
" records of inline data for map " + id); " records of inline data for map " + id);
this.Gis.refreshPins( view, records); this.GIS.refreshPins( view, records);
} }
} }
} }