javascript - Adding highcharts to mapbox popup from CSV? -
i'm creating map in mapbox marker points csv file using omnivore. i've figured out how add highcharts maps on popup each marker, can't work pulling data same csv. have figured out how add highcharts pasting in data, instead of manually adding series data, i'd pull data existing csv file , iterate through each column year highchart popup.
could please me add series csv data? attempts replicate have failed.
here current working example (with highcharts popup not using data csv file):
(also on jfiddle need add csv locally:) https://jsfiddle.net/mofq60zq/
<!doctype html> <html> <head> <meta charset=utf-8 /> <title>styled markers csv data</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src="jquery1.6.4.min.js"></script><!-- jquery-1.6.4.min.js --> <script src="jqueryui1.8.16.custom.min.js"></script><!-- jquery-ui-1.8.16.custom.min.js --> <script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script> <link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.1/highcharts.js'></script> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .search-ui { position:absolute; top:10px; right:10px; z-index:1000; } .sparkline { height: 100px; width: 200px; } </style> </head> <body> <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> <div id='map'></div> <input id='search' class='search-ui' placeholder='enter country code' /> <script> l.mapbox.accesstoken = 'pk.eyj1ijoizxrwlxbyb2ply3qilcjhijoiy2lqbdc0dwqwmdaxehuya280ote5dgs0ncj9.vixlmvwxmtv3_uzyvjksoa'; var map = l.mapbox.map('map', 'mapbox.streets') .setview([49.4987919, 13.9583693], 4); // omnivore ajax-request file behind scenes , parse it: // note there considerations: // - csv file must contain latitude , longitude values, in column // named latitude , longitude // - file must either on same domain page requests it, // or both server requested , user's browser must // support cors. // omnivore functions take 3 arguments: // // - url of file fetch // - options parser // - custom layer // // , return custom layer, default l.geojson layer. // // second 2 arguments each optional. in case we're supplying // no arguments parser (null), supplying custom layer: // instance of l.mapbox.featurelayer // means rows simplestyle properties styled // in geojson , elsewhere. //omnivore.csv('gtftest.csv', null, l.mapbox.featurelayer()).addto(map); omnivore.csv('gtftest.csv') .on('ready', function(layer) { this.eachlayer(function(marker) { if (marker.togeojson().properties.type === 'h') { marker.seticon(l.mapbox.marker.icon({ 'marker-color': '#ff8888', 'marker-size': 'small', 'marker-image': 'h.png' })); } else if (marker.togeojson().properties.type === 'lng') { // argument l.mapbox.marker.icon based on // simplestyle-spec: see specification full // description of options. marker.seticon(l.mapbox.marker.icon({ 'marker-color': '#ff0000', 'marker-size': 'small', 'marker-image': 'lng.png' })); } else { marker.seticon(l.mapbox.marker.icon({})); } ////highcharts here//// var linechartoptions = { title: { text: null }, legend: { enabled: false }, credits: { enabled: false }, exporting: { enabled: false }, tooltip: { backgroundcolor: { lineargradient: [0, 0, 0, 60], stops: [ [0, '#ffffff'], [1, '#e0e0e0'] ] }, borderwidth: 1, usehtml: true, bordercolor: '#aaa' }, yaxis: { min: 0, linewidth: 1, tickwidth: 1, title: { text: null }, labels: { style: { 'fontsize': '10px' } } }, xaxis: { type: 'datetime', labels: { style: { 'fontsize': '10px' } } }, plotoptions: { series: { cursor: 'pointer', connectnulls: false } } }; linechartoptions.tooltip.formatter = function() { var y = "$" + this.y; return '<center>' + highcharts.dateformat('%b \'%y', new date(this.x)) + '</center></b><center><b>' + y + '</b></center>'; }; linechartoptions.series = [{ pointinterval: 24 * 3600 * 1000 * 30.41667, pointstart: 1393632000000, data: [ 58044, 60871, 29738, null, 804997, 628727, 20678, null, 100606, 122195, 981459, 39840] }]; // html content port pop-up var popupcontent = '<div id="popup_template">' + '<div class="port_header marker-title">' +marker.togeojson().properties.borderpoint +'</div>' + '<div class="est_value marker-title">'+ 'est. value: $' + marker.togeojson().properties.value +'</div>' + '<div id="est_value_sparkline" class="sparkline"></div>'; var container = $('<div id="popup_template"/>'); container.html( '<div class="port_header marker-title">' +marker.togeojson().properties.borderpoint +'</div>' + '<div class="est_value marker-title">'+ 'est. value: $' + marker.togeojson().properties.value +'</div>' + '<div id="est_value_sparkline" class="sparkline"></div>'); // delegate event handling container , contents container container.find('#est_value_sparkline').highcharts(linechartoptions); marker.bindpopup(container[0]); //}); ///end highcharts }); }) .addto(map); </script> </body> </html> here csv file, i'd use highcharts well:
borderpoint,exit,entry,value,type,lat,lon,oct-08,nov-08,dec-08,jan-09,feb-09,mar-09,apr-09,may-09,jun-09,jul-09,aug-09,sep-09,oct-09,nov-09,dec-09,jan-10,feb-10,mar-10,apr-10,may-10,jun-10,jul-10,aug-10,sep-10,oct-10,nov-10,dec-10,jan-11,feb-11,mar-11,apr-11,may-11,jun-11,jul-11,aug-11,sep-11,oct-11,nov-11,dec-11,jan-12,feb-12,mar-12,apr-12,may-12,jun-12,jul-12,aug-12,sep-12,oct-12,nov-12,dec-12,jan-13,feb-13,mar-13,apr-13,may-13,jun-13,jul-13,aug-13,sep-13,oct-13,nov-13,dec-13,jan-14,feb-14,mar-14,apr-14,may-14,jun-14,jul-14,aug-14,sep-14,oct-14,nov-14,dec-14,jan-15,feb-15,mar-15,apr-15,may-15,jun-15,jul-15,aug-15,sep-15,oct-15 adriatic lng,liquefied natural gas,italy,1.10,lng,45.057529,12.247078,0,0,0,0,0,0,0,0,0,0,0,0,331,456,656,602,581,657,622,608,439,582,529,627,556,648,638,625,616,637,659,685,646,623,405,490,577,531,575,598,493,657,601,581,497,396,269,594,401,556,563,514,544,503,463,416,488,542,357,273,486,321,442,352,363,265,360,536,442,536,178,115,510,353,437,623,531,435,531,538,435,397,490,448,532 almeria,algeria,spain,0.93,h,36.8392791,-2.4699896,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,37,220,257,280,219,142,280,272,256,241,297,336,347,237,288,254,196,171,222,348,362,394,449,487,570,588,532,483,513,324,482,609,607,607,621,576,613,542,520,544,412,395,533,603,557,562,552,435,403,569,516,530,586,616,569,635 alveringem,belgium,france,n/a,h,51.0167,2.7167,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 alveringem,france,belgium,n/a,h,51.0167,2.7167,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5 badajoz,spain,portugal,0.50,h,38.8789,-7.0084523,153,183,85,199,104,9,190,0,0,0,0,0,189,178,247,249,239,246,84,188,145,179,144,159,178,200,244,226,205,213,167,291,291,58,157,203,264,170,103,200,248,254,244,225,218,104,121,147,145,242,230,247,198,209,238,129,139,233,141,179,239,240,222,230,243,280,225,243,193,200,227,262,277,226,146,277,140,141,248,278,325,329,298,294,270 badajoz,portugal,spain,0.50,h,38.8789,-7.0084523,0,0,0,0,12,2,0,0,0,0,0,0,3,9,10,5,4,2,0,0,0,1,22,24,22,24,48,0,0,0,0,0,0,0,0,9,0,0,0,0,0,8,1,2,0,0,0,0,0,8,12,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 what replace linechart in popup data csv file (using data headers oct '08 -oct 15 - columns 8++) can't find way add series using omnivore csv geojson - can me plot graph in marker pop up? thank you!
okay, when omnivore imports csv file, it's bringing data of each row properties of javascript object..the problem want show time series data(meaning ordered data, csv), there no inherent order keys in javascript object. can't loop thru keys , expect order right.
so grabbed key order csv, , declared array like
var keyorder = ["oct-08","nov-08","dec-08","jan-09","feb-09","mar-09","apr-09","may-09","jun-09","jul-09","aug-09","sep-09","oct-09","nov-09","dec-09","jan-10","feb-10","mar-10","apr-10","may-10","jun-10","jul-10","aug-10","sep-10","oct-10","nov-10","dec-10","jan-11","feb-11","mar-11","apr-11","may-11","jun-11","jul-11","aug-11","sep-11","oct-11","nov-11","dec-11","jan-12","feb-12","mar-12","apr-12","may-12","jun-12","jul-12","aug-12","sep-12","oct-12","nov-12","dec-12","jan-13","feb-13","mar-13","apr-13","may-13","jun-13","jul-13","aug-13","sep-13","oct-13","nov-13","dec-13","jan-14","feb-14","mar-14","apr-14","may-14","jun-14","jul-14","aug-14","sep-14","oct-14","nov-14","dec-14","jan-15","feb-15","mar-15","apr-15","may-15","jun-15","jul-15","aug-15","sep-15","oct-15"]; then replaced normal highchart initialization below code, loops through properties , grabs values in proper order.
var thisdata = []; (var = 0; < keyorder.length; i++) { thisdata.push(parseint(marker.feature.properties[keyorder[i]])); } linechartoptions.series = [{ pointinterval: 24 * 3600 * 1000 * 30.41667, pointstart: 1393632000000, data: thisdata }]; you can take @ entire file here. produces popup linecharts believe intended.
Comments
Post a Comment