Markers with on hover innerHTML - csv

Question

I am creating a Map datavisualisation with Leaflet js. And I am running into a (probably easy solved) problem. But I can't figure it out.
I have a div with an ID which is "zipcode"
<div id="zipcode></div>
And I am trying to change the text content of this div on a hover of a specific marker that has been plotted on the Map. I tried something like this:
marker.on('mouseover', function (e) {
this.openPopup();
document.getElementById("zipcode").innerHTML = rows[i]['postcode'];
});
The variable rows[i]['postcode'] is a value from a CSV which I load in with d3. This looks like:
d3.csv("data/data.csv", function(d) {
return {
client: d.Client,
postcode: d.Postcode,
plaats: d.Plaats,
totaal: d.Totaal,
budget: d.Budget,
besteed: d.Besteed,
percentage: d.Percentage,
latitude: d.Lat,
longitude: d.Long,
street: d.Street
};
}, function(error, rows) {
for(i=0; i<rows.length; i++) {
var latitude = rows[i]['latitude'];
var longitude = rows[i]['longitude'];
var percentage = rows[i]['percentage']/100;
var street = rows[i]['street'];
var cssIcon = L.divIcon({
// Specify a class name we can refer to in CSS.
className: 'css-icon',
// Set marker width and height
iconSize: [rows[i]['budget']/25+10, rows[i]['budget']/25+10]
});
var marker = L.marker([latitude,longitude], {icon: cssIcon, opacity: percentage}).addTo(map);
}
});
Unfortunatly I can't find a solution for this. Please help me!

Answer 1

You can store the data associated with the marker like this:
for(i=0; i<rows.length; i++) {
var latitude = rows[i]['latitude'];
var longitude = rows[i]['longitude'];
var percentage = rows[i]['percentage']/100;
var street = rows[i]['street'];
var cssIcon = L.divIcon({
// Specify a class name we can refer to in CSS.
className: 'css-icon',
// Set marker width and height
iconSize: [rows[i]['budget']/25+10, rows[i]['budget']/25+10]
});
var marker = L.marker([latitude,longitude], {icon: cssIcon, opacity: percentage}).addTo(map);
marker.myData = rows[i];//setting the data
}
Then in side your event you should be able to get the row data
marker.on('mouseover', function (e) {
this.openPopup();
document.getElementById("zipcode").innerHTML = this.myData.postcode;
});
Hope this helps!