mapMarker with picture inside about leaflet-dvf

[franck34]

I just realized i can't manipulate the HTML to update SVG structure in Chrome ... The shape disappear if i just insert a new line without anything else

[franck34]

Got SVG structure now, thanks google and http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
 </g>
 <g>
  <title>Layer 2</title>
  <g id="svg_1">
   <path id="svg_3" d="m296,251l17.3205,-30l0,0l0.68585,-1.29538l0.58917,-1.34213l0.48926,-1.38168l0.38678,-1.41379l0.28223,-1.43832l0.17609,-1.45514l0.06903,-1.4641l-0.03839,-1.46524l-0.14557,-1.45854l-0.25201,-1.44391l-0.35706,-1.4216l-0.46021,-1.3916l-0.56097,-1.35419l-0.65857,-1.30945l-0.75269,-1.25772l-0.84283,-1.19919l-0.92841,-1.13425l-1.00891,-1.06323l-1.08411,-0.98645l-1.1535,-0.90442l-1.21655,-0.81754l-1.27319,-0.72621l-1.323,-0.63103l-1.3656,-0.53242l-1.40094,-0.431l-1.42877,-0.32724l-1.44885,-0.22171l-1.46121,-0.11497l-1.46579,-0.00769l-1.46228,0.09969l-1.45105,0.20654l-1.43219,0.31224l-1.40546,0.41632l-1.37109,0.5181l-1.32953,0.61714l-1.2807,0.71283l-1.2251,0.80475l-1.16284,0.89227l-1.09436,0.97507l-1.02008,1.05261l-0.94019,1.12445l-0.85535,1.19031l-0.76581,1.24977l-0.6723,1.30249l-0.57507,1.34825l-0.47473,1.38672l-0.37195,1.4178l-0.26715,1.44118l-0.16083,1.45691l-0.05371,1.46475l0.05371,1.46474l0.16083,1.45692l0.26715,1.44118l0.37195,1.4178l0.47473,1.38672l0.57507,1.34825l0.6723,1.30249l0.10376,0.18193l17.3205,30l0,-0.00003l0,-0.00003l0,-0.00002z" class="testi" filter="url(#filter4d3629d3-e4b8-c7d8-eb16-164eb682090a)" fill="url(#graddee265b5-2bfa-7b7e-b2df-b32c4ca1901d)" stroke-opacity="0.5" stroke="#aaa" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
   <circle fill="url(#image)" cx="296" cy="211" r="15" id="svg_2"/>
   <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="32" x="-8" y="3" width="32">
     <image width="32" xlink:href="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/s32x32/50162_696470817_71772679_q.jpg" id="svg_4" height="32"/>
    </pattern>
    <linearGradient id="graddee265b5-2bfa-7b7e-b2df-b32c4ca1901d" y2="100%" y1="0%" x2="100%" x1="0%">
     <stop stop-color="rgb(255, 255, 255)" offset="0%"/>
     <stop stop-color="rgba(250,126,38,1)" offset="60%"/>
    </linearGradient>
   </defs>
  </g>
 </g>
</svg>

So i need to add a "circle", linked with a "pattern", having an "image".

Now time to go in the code. I can anticipate some works later regarding :

• how to set cx and cy of the circle ?
• effect of mapMarker radius options on the size and position of the circle ?

[franck34]

So, in function

var PathFunctions = PathFunctions || {

I've added (for testing with a static image at the moment)

    _createCircleImage: function (imageUrl) {

        var patternGuid = L.Util.guid();

                // Not sure it's the good moment to do that
                var coo = this._map.latLngToLayerPoint(this._latlng);

        var circle = this._createElement('circle');
        circle.setAttribute('fill','url(#'+patternGuid+')');
        circle.setAttribute('cx',coo.x); /////////////////////// <- how can i set this value ?
        circle.setAttribute('cy',coo.y); /////////////////////// <- how can i set this value ?
        circle.setAttribute('r',15);

        var pattern = this._createElement('pattern');
        pattern.setAttribute('id',patternGuid);
        pattern.setAttribute('patternUnits','objectBoundingBox');
        pattern.setAttribute('height',32);
        pattern.setAttribute('width',32);
        pattern.setAttribute('x',0);
        pattern.setAttribute('y',0);

        var image = this._createElement('image');
        image.setAttribute('width',32);
        image.setAttribute('height',32);
        image.setAttribute('x',0);
        image.setAttribute('y',0);
        image.setAttribute('xlink:href','https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/s32x32/50162_696470817_71772679_q.jpg');

        pattern.appendChild(image);
        this._defs.appendChild(pattern);
        this._container.insertBefore(circle,this._defs);

        this._circle = circle;
    },

And in function

    _updateStyle: function () {

I've added

                if (this.options.imageCircleUrl) {
            this._createCircleImage(this.options.imageCircleUrl);
        }

So i can init my map marker with option imageCircleUrl:true (for the moment. Later it will be the URL)

I can see using chrome that the elements are well created, but :

• positions are bad
• picture is not displayed !?

At this point, any help will be welcome !

Thanks

[sfairgrieve]

I'll take a look at this, but it might be a few hours. From a coding
perspective, it looks like what you've done is right. The cx and cy
positions should be right. In terms of the image not displaying, one issue
I've encountered in the past is that you might need to use setAttributeNS
rather than setAttribute given the xlink namespace on that attribute:

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', );

On Thu, Dec 12, 2013 at 9:12 AM, franck34 [email protected] wrote:

So, in function

var PathFunctions = PathFunctions || {

I've added (for testing with a static image at the moment)

_createCircleImage: function (imageUrl) {

    var patternGuid = L.Util.guid();

            // Not sure it's the good moment to do that
            var coo = this._map.latLngToLayerPoint(this._latlng);

    var circle = this._createElement('circle');
    circle.setAttribute('fill','url(#'+patternGuid+')');
    circle.setAttribute('cx',coo.x); /////////////////////// <- how can i set this value ?
    circle.setAttribute('cy',coo.y); /////////////////////// <- how can i set this value ?
    circle.setAttribute('r',15);

    var pattern = this._createElement('pattern');
    pattern.setAttribute('id',patternGuid);
    pattern.setAttribute('patternUnits','objectBoundingBox');
    pattern.setAttribute('height',32);
    pattern.setAttribute('width',32);
    pattern.setAttribute('x',0);
    pattern.setAttribute('y',0);

    var image = this._createElement('image');
    image.setAttribute('width',32);
    image.setAttribute('height',32);
    image.setAttribute('x',0);
    image.setAttribute('y',0);
    image.setAttribute('xlink:href','https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/s32x32/50162_696470817_71772679_q.jpg');

    pattern.appendChild(image);
    this._defs.appendChild(pattern);
    this._container.insertBefore(circle,this._defs);

    this._circle = circle;
},

I can see using chrome that the elements are well created, but :

• positions are bad
• picture is not displayed !?

At this point, any help will be welcome !

Thanks

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-30424689
.

[franck34]

Now the original function

    getPathString: function () {
        this._path.setAttribute('shape-rendering', 'geometricPrecision');
        return new L.SVGPathBuilder(this._points, this._innerPoints).build(6);
    },

became

    getPathString: function () {
        this._circle.setAttribute('cx',this._point.x);
        this._circle.setAttribute('cy',this._point.y-40);
        this._path.setAttribute('shape-rendering', 'geometricPrecision');
        return new L.SVGPathBuilder(this._points, this._innerPoints).build(6);
    },

and now circle are in the good places

For xmlns, i just tried to update the svg element with that, no like, let me try on

[franck34]

You win :)

        image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', imageUrl);

did the trick !

[franck34]

Goal reached :)

Now time to fork and share. My code fill my need but i don't think i can purpose this improvement "as is"

Thanks @sfairgrieve ;)

Franck

[sfairgrieve]

That's awesome! It seems like your updates to support an image pattern and
the addition of custom images to a marker would be great additions to the
framework. Do you have any reservations with adding that yourself or me
including some of the updates you've made and making them generic so that
they're fully configurable through new Leaflet style options?

On Thu, Dec 12, 2013 at 10:37 AM, franck34 [email protected] wrote:

Goal reached :)

[image: sample]https://f.cloud.github.com/assets/438255/1734170/0e840f82-6343-11e3-8bdc-5607b195c668.png

Now time to fork and share. My code fill my need but i don't think i can
purpose this improvement "as is"

Thanks @sfairgrieve https://github.com/sfairgrieve ;)

Franck

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-30432655
.

[franck34]

@sfairgrieve

Absolutely no reservations, but a big thanks for job made by leaflet team and dvf team too !

Please review my code to be more dvf/leaflet style and i'll be happy !

[franck34]

Cool, thanks for merge.

I'll probably go back in this later, because i wondering if it's possible to play with fontawesome/svg 'seem's yes according to http://stackoverflow.com/questions/18225954/use-fontawesome-icon-in-svg-without-external-files)