humangeo / leaflet-dvf Goto Github PK

What is the best way to toggle between various values for polygons (different colors/titles). "displayName" is not a function - so unless it's modified directly, having it bind to a function isn't going to change. If I add multiple display options, it only takes one of the color functions/values for the main view/color. They are, however, functions and so I have something that is reloading the data when these options change thus changing the colors/values of the map. The text doesn't change - the other way I did this was to re-create the display options and reload the layer this way. This seems to be overkill for just switching between attributes in the same layer.

For example, if you have temperature or air pressure and want to toggle between both without creating 2 separate layers (form/dashboard based controls - obviously mine is more advanced).

I have data in geoJSON format which includes 'MultiPolygon' geometries. Leaflet's L.geoJson handle multipolygon layer 'as one polygon', so when I mouse over one polygon, all other polygons which are part of multipolygon will change style. But L.choroplethDataLayer binds mouse event to each polygon separately(each polygon in multipolygon).

In consequence of this behavior, when I set text on each layer, all MultiPolygon layers which include many polygons also insert text

Thanks for your suggest and sorry for my bad Enlish

I hope photo would help understand my mind:

To keep that functionality going with the new marker types.

Hi,

I have tried the piecewisefunction example from the blog http://blog.thehumangeo.com/tag/leaflet/ and I have an error. I also use L.LinearFunction which works perfectly.

The js:

var radiusFunction = new L.PiecewiseFunction(new L.LinearFunction(new L.Point(0, 5), new L.Point(100, 5)), new L.LinearFunction(new L.Point(100, 5), new L.Point(200, 20)));

The error:

TypeError: Cannot call method 'getBounds' of undefined
at L.PiecewiseFunction.L.LinearFunction.extend.initialize (http://localhost:58303/Scripts/leaflet-dvf.markers.js:322:35)
at new e (http://localhost:58303/Scripts/leaflet.js:6:2539)
at http://localhost:58303/app/js/controllers.js:717:38

I want to change properties passed through options of a marker once it is loaded on the map, there are no set methods for markers. Is there a way to change the properties (e.g. number of sides or radius) for existing polygon markers?

Hi guys-

When you initialize a new polygon marker, _latlng does not initialize, which causes .openPopup() to fail.

Right now I'm just using a statement like polygon_1._latlng = polygon_1._centerLatLng as a quick fix, but I figured you might want to make the quick fix in your codebase as well.

Cool library!

I'm using DVF (as it existed after commit efd56c8 on May 14, 2014) with Leaflet 0.7.2. IE8 on Win7.

On IE8, if the user quickly mouses back and forth over a GeohashDataLayer grid cell, Leaflet often generates the following error: "Arg: fraction out of range (0 to 1 allowed) leaflet-src.js:5011".

Specifically, here is the process that triggers the error:

1. Mouse over geohash rectangle
   -> Fires 'mouseover'
   -> Note: continues to fire 'move' as long as mouse is over rectangle, even if not actually moving
2. Move mouse off of rectangle
   -> Fires 'mouseout'
3. IMMEDIATELY move mouse back over rectangle, then off rectangle
   -> Fires 'mouseout' (i.e., does NOT fire 'mouseover')

The result of mouseout being fired twice (without a mouseover) is that unsetHighlight() is being called twice in a row; this can cause the fill opacity to be increased to a value greater than 1.0 since the *= operator is being used:

unsetHighlight: function (layerStyle) {
    layerStyle.weight = layerStyle.weight || 1;
    layerStyle.fillOpacity = layerStyle.fillOpacity || 0.25;
    layerStyle.weight /= 2;
    layerStyle.fillOpacity *= 1.5;

    return layerStyle;
}

Is it possible to set the color of the bar/pie based on the value of a field? For example from the data below, set the color to Green if Score >= 95, Orange if 90 <= Score < 95 and Red if Score < 90?

[{
"Date" : "2014-09-01",
"State" : "Alabama",
"StateCode" : "AL",
"Operators" : [{
"Operator" : "CellServiceA",
"Score" : 88.94
}, {
"Operator" : "CellServiceB",
"Score" : 95.71
}, {
"Operator" : "CellServiceC",
"Score" : 95.36
}, {
"Operator" : "CellServiceD",
"Score" : 90.79
}
]
},...
]

I tried something like below, but it applies the same color to all bars.

'Operators[Operator=CellServiceA].Score': {
fillColor: function (value) {
if(value >= 95)
return 'hsl(114,100%,50%)'; // Green
if(value >= 90)
return 'hsl(63,100%,50%)'; // Yellow
else
return 'hsl(0,100%,50%)'; // Red
}
},
'Operators[Operator=CellServiceA].Score': {
fillColor: function (value) {
if(value >= 95)
return 'hsl(114,100%,50%)'; // Green
if(value >= 90)
return 'hsl(63,100%,50%)'; // Yellow
else
return 'hsl(0,100%,50%)'; // Red
}
},

Good morning,
First of all congratulations for this amazing plugin.

I am developing a map with a chloropeth layer similar to you countystats example.
I would like to give the user the posiibility to choose its color palette(sequential/diverging) and the number of data classes as in the Colorbrewer website.
Using this webpage and this site (http://www.cse.unsw.edu.au/~mike/myrlibrary.old/RColorBrewer/html/ColorBrewer.html), i have been writing the following code for sequential and diverging colors:

var fillColorSeq = new L.CustomColorFunction(range[0], range[1], L.ColorBrewer.Sequential.PuBuGn['9']);
var fillColorDiv= new L.CustomColorFunction(range[0], range[1], L.ColorBrewer.Diverging.PRGn['11']);

I works OK but when i reduce the number of color classes (eg.:L.ColorBrewer.Diverging.PRGn['4']);), i would expect to have 4 colors only in my map and legend but, i still continue to have more colors than data classes with perhaps a clearer tint.

Am i doing something wrong?
Should i use the slice attribute? I didn't find much information on it.

At least, is it possible to define automatically the number of segments of the legend based on the number of data classes chosen for the customeColorFunction without using the numSegments option of the legend and the gradient effect?
I would like to get something similar to the Colorbrewer site.

Thanks in advance for your reply.

Sylvain

I tried to mix the examples
http://humangeo.github.io/leaflet-dvf/examples/html/nlzip.html
and
http://humangeo.github.io/leaflet-dvf/examples/html/incomelevels.html

To generate a barchart on top of a geojson, but when I try to add the borders as in the Netherlands example the javascript console alerts me that
"Maximum call stack size exceeded" at function call TextFunctions._updatePath

My code is here
https://github.com/sabas/GenoaPortStats/blob/gh-pages/trafficoTerminal2012/index.html
and the error arises when includeBoundary:true

What could I have mistaken?

Is there some documentation available for the structure used by countryData.js and stateData.js?

I would like to use other GeoJSON files, such as U.S. counties or legislative districts, but I'm not sure how the GeoJSON is being transformed, exactly, so I'm having trouble making my own files.

In the docs, I see that

Polygons are indexed via a state or country code and lookups are created to map
various state/country code formats to the default index format.

That use of keys seems to create invalid GeoJSON per spec, therefore, it will be difficult to create additional files without a conversion script. Is such a script available, by any chance?

The height.indexOf('%') code in SVGMarker can run into an uncaught typererror exception (when height is interpreted as numeric) in https://github.com/humangeo/leaflet-dvf/blob/master/src/leaflet.dvf.markers.js#L990

if (width === '100%') {
  width = me.options.size.x;
  height = me.options.size.y;

  svg.setAttribute('width', width);
  svg.setAttribute('height', height + (height.indexOf('%') !== -1 ? '' : 'px'));
}

I solved this issue locally by explicitly setting height as string:

svg.setAttribute("height", height + ((height+"").indexOf("%") !== -1 ? "" : "px"));

FYI: I ran into this problem when I loaded a SVG created by Illustrator. In that case the width and height attribute in <svg> is set.

I've had some issues when loading many markers (specifically 1,312) on a map. It could take up to a minute depending on the number of markers. Chrome, Firefox, Safari, and Opera do not have this issue. I have a feeling it's SVG rendering.

The work around for this was to force load IE9 for all versions of IE. I don't particularly like this option, but the load times are back to 0.1 - 2 seconds.

I did look at other plugins for leaflet and they didn't seem to have this same problem. I have yet to disable shadow or other svg elements to see if this improves load time (I suspect it would).

I don't plan on removing the IE9 tag until I do some more tests, but I figured I would write up an issue to document this (even though it's probably a low priority - especially since IE in general renders the DOM very poorly... and I don't expect you to rewrite IE for them, though you'd probably do a pretty excellent job).

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; Data Center; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 20 Nov 2013 19:41:40 UTC

Message: 'L.Util' is null or not an object
Line: 5
Char: 681
Code: 0
URI: https://smartdata.columbiatechnologies.com/dist/leaflet-dvf.min.js

Message: 'L.Class' is null or not an object
Line: 9
Char: 13
Code: 0
URI: https://smartdata.columbiatechnologies.com/dist/leaflet.label.js

Message: Object expected
Line: 25
Char: 5
Code: 0
URI: https://smartdata.columbiatechnologies.com/p/exp/markham/project72/mississauga/maps.js

Hello!
Please create library for Flickr, Mapillary photo services similary Panoramio Photo Browser (display photo in new frame, not in popup...)
Thanks!

Hi

Thanks for sharing this huge addon !

Question, is it possible to implement draggable L.RegularPolygonMarker ?

Cheers

The gradient property doesn't work on Polyline objects. The gradient is set, but with the "fill" attribute. For this particular object, it should be set with the "stroke" attribute.

Hi! Good Morning!

I'm starting to use the leaflet-dvf plugin and I need to change the Radius of my DataLayer depending of the current zoom. I noticed that some Layers have a method to Redraw, but DataLayer doesn't... I also tried to use another kind of Layer, but it didn't fit on what I need.
There is a way to do that, change the radius and redraw the DataLayer?

Thanks in advance!

Phillipe.

Hi,

first of all thanks for the fantastic work.

I am building a map with pie charts using a PieChartDataLayer. The radius of the pie depends on the sum of all the element of the pie (the bigger the pie, the bigger the sum of data inside it).

Everything works except the legend.

When I use getLegend() on my layer, I only have the different pie colors, but not the radius itself, just like in election2012 example.

How could I have the pie colors AND the radius size like in conflictData example?

My layer options object so far:

var options = { recordsField: null, locationMode: L.LocationModes.LATLNG, latitudeField: 'latitude', longitudeField: 'longitude', layerOptions: { fillOpacity: 1, opacity: 1, }, displayOptions: { 'data.sum': { radius: radiusFunction, displayName: 'TOTAL' } }, chartOptions: { 'data.skj_tot': { 'displayName': 'SKJ TOT', 'fillColor': "#3366FF", }, 'data.yft_tot': { 'displayName': 'YFT TOT', 'fillColor': "#EFFF00", }, 'data.bet_tot': { 'displayName': 'BET TOT', 'fillColor': "#FF0000", }, }, tooltipOptions: { iconSize: new L.Point(80, 55), iconAnchor: new L.Point(-5, 55) }

Thanks,
Bruno

When using Leaflet layers you can set them to be initially visible using the visible property. For example:

rain: {
  name: 'Rain',
  type: 'xyz',
  visible: true,
  url: 'http://{s}.tile.openweathermap.org/map/rain/{z}/{x}/{y}.png',
  layerOptions: {
    attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
    opacity: 0.5
  }
}

It would be useful to be able to set flowLines to be visible by default in the same way, for example:

displayOptions: {
  ele: {
    visible: true,
    displayName: 'Elevation',
    weight: new L.LinearFunction([0, 3], [15.02968, 20]),
    color: colors //new L.HSLHueFunction([0, 120], [16, -30])
  }
}

this would cause the map to load with the "Elevation" flowLine visible.

Hi.

It seems that the legend is based on the 'color' variable. Is there anyway to change the legend so that it works of the fillcolor. I'm hoping to have a white outline on my polygons to create contrast however everytime I try, the legend goes white.

Thanks,
Brian

IE 8 & 9 seem to take issue with these lines in L.HTMLUtils.buildTable in leaflet-dvf.js:

1342:   thead.innerHTML = '<tr><th>Name</th><th>Value</th></tr>';

1363:   tbody.innerHTML += '<tr><td>' + property + '</td><td>' + value + '</td></tr>';

This error is thrown: Invalid target element for this operation.

I was able to fix the issue by explicitly creating the tr, th/td using the same method you created the rest of the table elements and then setting the innerHTML of the td/th. But there may also be a better way to do it. It certainly isn't as elegant but it works.

        var thead_tr = L.DomUtil.create('tr', '', thead);
        var thead_values = ['Name','Value'];
        for (var i = 0, l = thead_values.length; i < l; i++) {
            var thead_th = L.DomUtil.create('th', '', thead_tr);
            thead_th.innerHTML = thead_values[i];
        }

and

                var tbody_tr = L.DomUtil.create('tr', '', tbody);
                var tbody_values = [property, value];
                for (var i = 0, l = tbody_values.length; i < l; i++) {
                    var tbody_td = L.DomUtil.create('td', '', tbody_tr);
                    tbody_td.innerHTML = tbody_values[i];
                }

ive been following the markers example and i get a marker but it look nothing like what the examples page looks like, any ideas? just looks like a polygon, without any of the styling? css missing somewhere?

I've had issue when LayerGroup.addLayer after removeLayer multiple times by Layer Control and code

Continue where @pagameba left off and make sure all features work with 0.8-dev/upcoming 1.0

When I pan in IE8 and IE9 using VML, markers don't catch up to the map. However, zooming in/out will re-align/sync the markers to the correct location on the map.

I need to further analyze to make sure I'm not doing something in my setup but it sure looks like a VML rendering issue as it works fine in SVG.

I noticed that bringToBack and bringToFront didn't work on the choropleth (and I'm guessing the other layers as well from dvf) where they worked when I used L.geoJSON. I then tried playing with setZIndex which didn't really do what I was hoping it would.

How do I make ensure 5 layers always show in the appropriate order? As users add/remove layers from the map, they seem to get shuffled out of order. I initially had a method that took an ordinal (I used "zIndex") and ran bringToBack anytime there was a change to the set of available layers. Do we add bringToBack to L.DataLayer or do we implement a more elegant solution based on a global z-index for this layer? (Leaflet's bringToBack/Front way of handling this is a little backwards - no pun intended)

I looked through several existing issues and didn't see this mentioned - if it's already been discussed I sincerely apologize.

I also have a very good friend that works at humangeo whose brother works at mine. I figured I'd give a shout out to this tool to him last we met and apparently he knows some people working on this project. Keep up the good work guys!

Hi there,

following the Geohashes example I've built a map that feeds directly from a JSON output from SOLR. The underlying data is encoded in Geohashes. Everything works fine but I want to change the markers from rectangles to L.MapMarker. I know you can bypass the default markers using getMarker but I couldn't find any clear documentation on how to do that.
Can you please provide an example if possible?

Many thanks,

Ioannis

I created a CustomColorFunction and gave it min/max values and small set of colors (red, yellow, green). When used with a data set that contains values BELOW the min, those low values get assigned the color from the max end of the scale, not the min. I expected the numbers below the min would get the min end of the scale.

To illustrate, I've made this jsFiddle: http://jsfiddle.net/wzfp1mLh/1/
Notice my color function has a min of 35 and a max of 60. Notice the data starts out above 60 and gradually steps down to 34 and then back up 35. I expected the tail end of this FlowLine to be all red but the point that is 34 is green.

I'm not sure if this is "just the way it is" or a bug in one of those components.

I stumbled across this plugin as I was looking for a way to rotate markers - althoguh in future I can see other uses for this lib :).

I am currently only using RegularPolygonMarker to create a triangle direction marker that I have much more control over configuration/display than regular .png marker bitmaps.

The issue I have is I want to display some text on hover, and I see there is no "title" attribute. I have also tried triggering openPopup()/closePopup() in handlers bound to mouseover/mouseout but it seems when the polygon is small the actual display of the popup can cause more mouse events to trigger so I get a flickering effect (this seems to be the case with regular leaflet polygons too.

What I have noticed is that the chart examples have fancy smooth nice popups and I think this is a property specific to them (displayText ?) I was wondering is there any support for these popups on polygon markers ?

Cheers

I have a data set of points drawn using a FlowLine (extended from DataLayer). It draws just fine. When I call the reloadData() function it redraws all the data but it also connects my end points.

I've whipped up a quick jsFiddle to show what I mean. http://jsfiddle.net/wzfp1mLh/ Click the "DataLayer.reloadData()" text above the map.

I should note: I am not actually that interested in calling reloadData() directly. Originally I was using the DataLayer.setDisplayOption() function to alter the opacity of the layer, which in turn calls reloadData(). When the extra line segment appeared, I took steps to isolate the cause.

Hello,

I was hoping you were able to provide a single leaflet-dvf.js in the dist directory?

Thanks!
Glen

In IE8, some of the coloring functions just have some bizarre behavior with VML. For example, what was yellow is turning up as magenta when I use new L.HSLHueFunction(new L.Point(0,90), new L.Point(1,60), {outputSaturation: '100%', outputLuminosity: '50%'});

var ColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(1,60), {outputSaturation: '100%', outputLuminosity: '25%'});
var FillColorFunction = new L.HSLHueFunction(new L.Point(0,90), new L.Point(1,60), {outputSaturation: '100%', outputLuminosity: '50%'});

As I understand, DataLayer extend leaflets LayerGroup and in cicle via method named locationToLayer added every layer in LayerGroup. Is there opportunity to add layer not to layerGroup but to MarkerClasterGroup. I try it but with no result. I would be grateful if you take me direction as it possibly to implement claster via DataLayer... Thank for you suggest

Hey

First i would like to say that you work is awesome !

So my problem
I have a map that allow me to display PieChartDataLayerand BarChartDataLayer

I use all your example to display them successfully in FF/Chrome

But in IE 8 I always get this error :
Error loading centroid for {"id":"05","type":"Feature","geometry":{"type":"Polygon","coordinates":[[[6.6358,44.4469],[6.4863,44.4491],[6.371,44.5245],[6.247,44.4417],[6.0864,44.4653],[5.9562,44.3958],[5.9295,44.2923],[5.8335,44.2594],[5.7615,44.2086],[5.6854,44.1902],[5.6858,44.2388],[5.6372,44.3285],[5.4999,44.3398],[5.4287,44.4147],[5.5111,44.4942],[5.6114,44.467],[5.6008,44.5456],[5.6965,44.6507],[5.8058,44.7059],[5.9553,44.7722],[6.0606,44.8155],[6.1398,44.865],[6.2758,44.8711],[6.3647,44.9102],[6.3245,45.0044],[6.2097,45.0148],[6.2634,45.1282],[6.3687,45.0704],[6.4835,45.0932],[6.6312,45.1119],[6.6751,45.0228],[6.7709,44.9649],[6.8425,44.862],[6.9869,44.8461],[7.0361,44.7242],[6.9547,44.6556],[6.8055,44.605],[6.7134,44.5393],[6.6358,44.4469]]]},"properties":{"name":"Hautes-Alpes","id":"05"}}

I have 20 polygon to display and this error is getting on my nerve !

I look at the code to see where it's coming from and I found in the leaflet-dvf.js where the problem is (Line 610~~)

loadCentroid: function(feature) {
var centroidLatLng = null;
var centroid;
var x, y;
if (feature.geometry && feature.geometry.type === "Point") {
centroidLatLng = new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
} else if (typeof jsts !== "undefined") {
var parser = new jsts.io.GeoJSONParser();
var jstsFeature = parser.read(feature);
//The problem happens here or just before (it go directly in the try/catch)
if (jstsFeature.getCentroid) {

So I would like to know if there is a fix to load the centroid.

FYI : I load those library
script src="js/leaflet.js"></script> (Last version 1.7.2)
script src="js/jquery-1.6.4.min.js"></script>

//Library for centroid
script src="js/javascript.util.js"></script>
script src="js/jsts.js"></script>

//Library for VML
script src="js/core-1.0.5.js"></script>
script src="js/svg.js"></script>

script src="js/leaflet-dvf.js"></script>

//Other library
script src="js/leaflet.markercluster.js"></script>
script src="js/leaflet.markercluster-src.js"></script>
script src="js/jquery.xcolor.js"></script>
script src="js/jquery.xcolor.min.js"></script>

Good morning,

After having set up my chloropleth map and displayed it, i would like to modify my legend to increase or decrease the number of segments for example. Is there a setLegend method available equivalent to setDisplayOptions or setData but only to reset the legend already added to the map?

Thanks for your help.

Sylvain

I'm getting some success with IE8 compatibility. However, the markers don't seem to even show unless the number of sides exceed a large number for L.DataLayer. If it's greater than like 30 or so, the marker will show. I need to use a square for a shape, this is causing a problem.

{
    displayName: ' ',
    displayText: function(){ return ' '; },
    numberOfSides: function(v){ return (v==1)?50:4;},//new L.LinearFunction(new L.Point(0,4),new L.Point(1,50)),
    color: function(v){ return (v==1)?"#FFFF00":"#4afc0c";},//ColorFunction,
    fillColor: function(v){ return (v==1)?"#FFFF00":"#4afc0c";},//FillColorFunction,
    rotation: 45
}

Good morning,
First thanks for your library which produces amazing maps.
I have an issue with some recent data for which the current classification does not render it properly in one of my chloropeth map (few records with extreme values).
I think it is related to the fact that the current classification I am using with DVF is of equal interval or defined interval.

Would it be possible to choose a different classification such as Jenks or quantile to properly render my data and maximize the variance between my classes?

Thanks in advance for your answer

Sylvain

Hi,

Just wandering how I could change the radius size of a pie graph based on a variable from the data. After every abbr field I have added a radius field.

I am pretty much using the same sort of layout as the election data example.

I'm just not sure how to link the radius field to the data.

Thanks

I have created a SVG marker and added it to map. I would like to change the SVG path (for example change from an arrow to a diamond) dynamically?

Thanks.
Wilson

In leaflet, when using the GeoJSON functionality, one has the option to specify style as a function instead of a static value:

$.getJSON("http://vps40616.public.cloudvps.com/latest/clouds.json", function( data ){
    L.geoJson(data.features, {
        style: function(feature) {
            return { "color": feature.properties.colour,
                "opacity": 0.65,
                "weight": 0
            };
        },
    }).addTo(map);

I wanted to use leaflet-dvf’s gradient property and to the same thing, but it fails: it doesn’t seem to accept a function?

I tried to work around this using the onEachFeature option and accessing _makeGradient directly, but that doesn’t seem to work either as it tries to access the Layers element before it’s added to the map.

Hello again,

I'm new to leaflet and leaflet-dvf and it seems I sometimes fail to do the simplest things.
I'm trying to bind a onClick event on every marker within a L.MarkerDataLayer layer. I though it could be possible by using the onEachRecord function but I can't make it work. My code so far is

        var options = {
            recordsField: 'terms',
            latitudeField: 'latLng.0',
            longitudeField: 'latLng.1',
            displayOptions: {
                'count': {
                    title: function (value) {
                        return value;
                    }
                },
            },
            layerOptions: {
                fill: false,
                stroke: false,
                weight: 0,
                color: '#80FF00',
                dropShadow: false,
            },
            setIcon: function (record, options) {
                var size = 40;
                var icon = new L.DivIcon({
                    html: '<div><span>' + record.count + '</span></div>',
                    iconSize: new L.Point(size, size),
                    className: 'marker-cluster marker-cluster-large',
                });

                return icon;
            },
            onEachRecord: function (layer, record) {
                layer.on('click'), function() {
                // this is just an example to see if onClick is working 
                map.zoomIn(3);
                };
            }           

        };

var layer = new L.MarkerDataLayer(convertedJson,options);

I'll appreciate any help.
Thank you for your library and help

Ioannis

Hi there, great great work.
I'd like to use your gradient feature for polygons with the 0.8-dev version but they have a big changelog that makes leaflet-dvf not yet compatible. Where should I start to code to make this feature compatible ? If I could have some tips to begin with ...

It would be nice to be able to use toGeoJSON() on Polygon Markers and other types fo markers.

Cloudmade has stopped providing free map tiles, so update the examples to use a different provider (e.g. Stamen, MapQuest, OSM, etc.)

This class uses the iconSize property to dynamically position tooltips. It should gracefully handle the case when tooltips don't have a fixed size.

I'm trying to add rounded picture inside a map marker.

The actual SVG structure of a map marker (using gradien + shadow) is :

<g>
    <path [...]></path>
    <defs>
        <lineargradient [...]>
            <stop [...]></stop>
            <stop [...]></stop>
        </lineargradient>
        <filter [...]>
            <feoffset [...]></feoffset>
            <fegaussianblur [...]></fegaussianblur>
            <feblend [...]></feblend>
        </filter>
    </defs>
</g>

I'm trying to add something like

<defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="34" width="34">
        <image x="0" y="0" xlink:href="myImage.png"></image>
    </pattern>
</defs>
<circle id='top' cx="10" cy="10" r="40" fill="url(#image)"/>

without success at the moment. I've tried "as is" and inside a new included in actual without success too.

Notice i'm just starting with svg so i don't really understand what i am doing.

Is it possible ? if yes what is the way to go ? I'm looking for the good SVG structure for the moment only

Thanks for your help

In attachement, the sample i'd like to achieve

Franck

Hello,
sorry, I'm a beginner. Thank you for your great work.

Is it possible that the tooltip at the value could be sized larger?
I have data.options with long names and large values, e.g. "1. Category A" : 84900
On the map the tooltip text will be shown but not the whole text is in the white tooltip box and therefore bad readable.

Thank you in advance for your help.

The example in https://github.com/humangeo/leaflet-dvf/blob/master/examples/html/manymarkers.html demonstrates the clustering of markers with the Leaflet MarkerCluster plugin. However, changing L.MapMarker to e.g. L.SVGMarker (with the required parameters, see below) somehow disables the clustering, although the svg markers are displayed correctly.

Is it possible to use MarkerCluster with all markers?

var marker = new L.SVGMarker(new L.LatLng(Math.random() * 90, Math.random() * 180), {
  svg: "http://upload.wikimedia.org/wikipedia/commons/8/8b/Green_Arrow_Up_Darker.svg",
  size: new L.Point(20, 20)
});