mapMarker with picture inside #11

franck34 · 2013-12-12T09:54:42Z

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

The text was updated successfully, but these errors were encountered:

franck34 · 2013-12-12T10:16:35Z

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 · 2013-12-12T13:15:50Z

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 · 2013-12-12T14:12:57Z

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 · 2013-12-12T14:45:12Z

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 notifications@github.com 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 · 2013-12-12T14:55:19Z

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 · 2013-12-12T15:11:59Z

You win :)

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

did the trick !

franck34 · 2013-12-12T15:37:48Z

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 · 2013-12-12T15:57:36Z

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 notifications@github.com 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 · 2013-12-12T16:01:27Z

@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 · 2013-12-13T16:56:02Z

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)

franck34 mentioned this issue Dec 12, 2013

mapMarker with picture inside implementation (need reviewing before merge) #12

Merged

franck34 closed this as completed Dec 13, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mapMarker with picture inside #11

mapMarker with picture inside #11

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

sfairgrieve commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

sfairgrieve commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 13, 2013

mapMarker with picture inside #11

mapMarker with picture inside #11

Comments

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

sfairgrieve commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 12, 2013

sfairgrieve commented Dec 12, 2013

franck34 commented Dec 12, 2013

franck34 commented Dec 13, 2013