Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to insert own HTML instead of predefined icons #18

Merged
merged 1 commit into from Feb 22, 2016

Conversation

@ccoenen
Copy link
Contributor

commented Feb 21, 2016

Allows you to use HTML inside (well, on top of) the marker. I use this to add SVG icons to your lovely markers!

use like this:

var science = L.ExtraMarkers.icon({
    markerColor: 'white',
    shape: 'square',
    innerHTML: '<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Aperture_Science.svg" width="20px" height="20px" style="margin-top: 8px;">'
});

L.marker([51.941196,4.512291], {icon: science}).addTo(map);

The margin-top is probably not ideal, but i also did not want to introduce huge amounts of CSS changes - which other people might need to workaround in turn.

coryasilva added a commit that referenced this pull request Feb 22, 2016

Merge pull request #18 from ccoenen/master
Ability to insert own HTML instead of predefined icons

@coryasilva coryasilva merged commit 463e67d into coryasilva:master Feb 22, 2016

@ccoenen

This comment has been minimized.

Copy link
Contributor Author

commented Feb 22, 2016

Addition: If you include the full SVG (can also be a xlink:href) and use currentColor as fill or stroke, you now have the ability to customize the fill via CSS!

var science = L.ExtraMarkers.icon({
    markerColor: 'white',
    shape: 'square',
    innerHTML: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="position: relative; top: 8px;" width="20px" height="20px" viewBox="0 0 530.973 530.973" enable-background="new 0 0 530.973 530.973" xml:space="preserve"><path fill="currentColor" d="M320.622,16.038c-48.13-10.56-96.075-6.789-139.409,8.433l205.646,142.285L363.887,29.585  C350.117,23.897,335.676,19.34,320.622,16.038z M381.61,37.721l41.565,244.095l79.798-112.224  C480.031,113.27,437.342,65.91,381.61,37.721z M164.624,30.954C107.809,55.459,60.469,100.197,33.57,158.183l248.56-46.176  L164.624,30.954z M508.526,184.605L367.76,388.57l135.075-25.795c5.425-13.334,9.788-27.293,12.978-41.823l1.161-5.589  C525.838,270.157,522.227,225.371,508.526,184.605z M165.219,149.9L26.793,174.226c-4.543,11.86-8.283,24.22-11.088,37.004  C5.067,259.717,8.992,308.02,24.5,351.609L165.219,149.9z M107.782,257.134L31.555,369.377  c24.248,54.834,67.436,100.631,123.173,127.418L107.782,257.134z M496.049,377.989l-242.225,46.989l111.375,76.992  C421.459,478.19,468.575,434.608,496.049,377.989z M146.782,370.741l23.439,132.869c12.988,5.211,26.556,9.434,40.676,12.53  c47.857,10.5,95.541,6.83,138.681-8.18L146.782,370.741z"/></svg>'
});
var marker = L.marker([51.941196,4.512291], {icon: science});
marker._icon.classList.add('demo-color'); // I'm pretty sure accessing the _icon directly violates all kinds of rules. But it works.
marker.addTo(map);
.demo-color {
    color: cyan;
}

Boom. Cyan SVG.

Sadly, this approach can't work with <img src="mysvg.svg">, CSS won't reach into another document. And a SVG loaded that way counts as a different document.

@coryasilva

This comment has been minimized.

Copy link
Owner

commented Feb 26, 2016

That is pretty awesome; I will try to incorporate that into a purely vector version of leaflet extra markers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.