Need help creating additional layers on a leafletjs map

[Tim-Intellipharm]

By @ozermm

I am trying to add a map layer to the marker chart in order to define the border of the city but I couldn't do it. Can anyone tell me how to do it?

When I use dc_leaflet.markerChart option to generate the map, I cannot add any other layers. Could you please help me on this. I tried to find a solution but couldn't do. Any help is greatly appreciated.

[Tim-Intellipharm]

After you have rendered the leaflet market chart you can use var leaflet_map = chart.map() to get the leaflet map object. You then should be able to add any custom layers that you want using normal leaflet methods.

[ozermm]

Thank you Tim! I tried a couple of different versions but I couldn't do it. Could you please show me how to do it if you don't mind. Here is the Yurukov's code that I want to add a layer and layer control to the LeafletBase. Thank you very much for your help.

function drawMarkerSelect(data) { var xf = crossfilter(data); var groupname = "marker-select"; var facilities = xf.dimension(function(d) { return d.geo; }); var facilitiesGroup = facilities.group().reduceCount();

dc.leafletMarkerChart("#demo1 .map",groupname) .dimension(facilities) .group(facilitiesGroup) .width(600) .height(400) .center([42.69,25.42]) .zoom(7) .cluster(true);

var types = xf.dimension(function(d) { return d.type; });
var typesGroup = types.group().reduceCount();

dc.pieChart("#demo1 .pie",groupname) .dimension(types) .group(typesGroup) .width(200) .height(200) .renderLabel(true) .renderTitle(true) .ordering(function (p) { return -p.value; });

dc.renderAll(groupname);

}

[ozermm]

Thank you Tim and Gordon! I solved the problem. My solution is that I could only add the layers directly to dc.leaflet.js file. It works.

[gordonwoodhull]

That's great, @ozermm. Yes, I was somewhat concerned that dc.leaflet would overwrite your custom layers if you access leaflet via chart.map(). If you can see a way to change the dc.leaflet interface to allow these kinds of specializations without having to change the source, I think that would be a welcome contribution.

[ozermm]

Yes, I am thinking to write a code that automatically pass the custom layers to dc.leaflet.js. I need to play more because I am little bit new to this area.

[ozermm]

Good morning Gordon, I noticed that dc-leaflet can only handle small amount of data (less than 2,000) compared to leaflet markercluster. Do you know the underlying reason for this? I still use markercluster for dc.leaflet but it crashes around 2,000 clustered points and locks/freezes the website.

[ozermm]

one more thing: Do you know any library that allow point/marker selection on map that filters crossfilter data.

[ozermm]

Good morning Gordon. I really need you help. I tried many different ways but couldn't overcome this problem. In normal leaflet markercluster, all coordinates are grouping well and generate the total number of cases in the data. However, when we use dc.leaflet.MarkerChart, clustering is not created for the points that exactly fall to the same place. I checked Yurukov's example and the same problem was there. For instance, demo1.tsv has 1378 data points but the map only display 1324 as total. I think there is problem in grouping procedure. Here is the related partial code of Yurukov. Any help is greatly appreciated. Thanks, Murat

var types = xf.dimension(function(d) { return d.type; });
var typesGroup = types.group().reduceCount();

[ozermm]

Sorry here is the correct part:

var facilities = xf.dimension(function(d) { return d.geo; });
var facilitiesGroup = facilities.group().reduceCount();

[ozermm]

for the beginners like me, the answer (Just in case) is: var facilities = xf.dimension(function(d) { return d.geo + d.ID;}); var facilitiesGroup = facilities.group().reduceCount();

I did not know that dimension works in this manner.