Revisions to Leaflet changing Marker color

fixed wrong values for text centering

Source Link

edited Aug 11, 2019 at 21:34

3.4k
1
36
40

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%;'+ (size * 3) +'px; \
    text-align: center; \
    line-height: '+ (size * 2.53) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    
    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 
    
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
    let myCustomColour = color + 'd0';

    let size = 10,    // size of the marker
        border = 2;   // border thickness

    let markerHtmlStyles = `
        background-color: ${myCustomColour};
        width: ${size * 3}px;
        height: ${size * 3}px;
        display: block;
        left: ${size * -1.5}px;
        top: ${size * -1.5}px;
        position: relative;
        border-radius: ${size * 3}px ${size * 3}px 0;
        transform: rotate(45deg);
        border: ${border}px solid #FFFFFF;
        `;

    let captionStyles = `
        transform: rotate(-45deg);
        display:block;
        width: 100%;${size * 3}px;
        text-align: center;
        line-height: ${size * 2.53}px;
        `;

    let icon = L.divIcon({
        className: 'color-pin-' + myCustomColour.replace('#', ''),
        iconAnchor: [border, size*2 + border*2],
        labelAnchor: [-(size/2), 0],
        popupAnchor: [0, -(size*3 + border)],

        html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
    });

    return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    
    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 
    
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
    let myCustomColour = color + 'd0';

    let size = 10,    // size of the marker
        border = 2;   // border thickness

    let markerHtmlStyles = `
        background-color: ${myCustomColour};
        width: ${size * 3}px;
        height: ${size * 3}px;
        display: block;
        left: ${size * -1.5}px;
        top: ${size * -1.5}px;
        position: relative;
        border-radius: ${size * 3}px ${size * 3}px 0;
        transform: rotate(45deg);
        border: ${border}px solid #FFFFFF;
        `;

    let captionStyles = `
        transform: rotate(-45deg);
        display:block;
        width: 100%;
        text-align: center;
        line-height: ${size * 2.5}px;
        `;

    let icon = L.divIcon({
        className: 'color-pin-' + myCustomColour.replace('#', ''),
        iconAnchor: [border, size*2 + border*2],
        labelAnchor: [-(size/2), 0],
        popupAnchor: [0, -(size*3 + border)],

        html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
    });

    return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: '+ (size * 3) +'px; \
    text-align: center; \
    line-height: '+ (size * 3) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    
    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 
    
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
    let myCustomColour = color + 'd0';

    let size = 10,    // size of the marker
        border = 2;   // border thickness

    let markerHtmlStyles = `
        background-color: ${myCustomColour};
        width: ${size * 3}px;
        height: ${size * 3}px;
        display: block;
        left: ${size * -1.5}px;
        top: ${size * -1.5}px;
        position: relative;
        border-radius: ${size * 3}px ${size * 3}px 0;
        transform: rotate(45deg);
        border: ${border}px solid #FFFFFF;
        `;

    let captionStyles = `
        transform: rotate(-45deg);
        display:block;
        width: ${size * 3}px;
        text-align: center;
        line-height: ${size * 3}px;
        `;

    let icon = L.divIcon({
        className: 'color-pin-' + myCustomColour.replace('#', ''),
        iconAnchor: [border, size*2 + border*2],
        labelAnchor: [-(size/2), 0],
        popupAnchor: [0, -(size*3 + border)],

        html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
    });

    return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

fixed the positioning of the marker (it was off to b and r), added an ES6 version

Source Link

edited Aug 8, 2019 at 21:36

BananaAcid

3.4k
1
36
40

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    
    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 
    
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

and the ES6 version (like @tutts) .. I am using it with vue-leaflet

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
    let myCustomColour = color + 'd0';

    let size = 10,    // size of the marker
        border = 2;   // border thickness

    let markerHtmlStyles = `
        background-color: ${myCustomColour};
        width: ${size * 3}px;
        height: ${size * 3}px;
        display: block;
        left: ${size * -1.5}px;
        top: ${size * -1.5}px;
        position: relative;
        border-radius: ${size * 3}px ${size * 3}px 0;
        transform: rotate(45deg);
        border: ${border}px solid #FFFFFF;
        `;

    let captionStyles = `
        transform: rotate(-45deg);
        display:block;
        width: 100%;
        text-align: center;
        line-height: ${size * 2.5}px;
        `;

    let icon = L.divIcon({
        className: 'color-pin-' + myCustomColour.replace('#', ''),
        iconAnchor: [border, size*2 + border*2],
        labelAnchor: [-(size/2), 0],
        popupAnchor: [0, -(size*3 + border)],

        html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
    });

    return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    iconAnchor: [border, size*2 + border*2],
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    
    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 
    
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

and the ES6 version (like @tutts) .. I am using it with vue-leaflet

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
    let myCustomColour = color + 'd0';

    let size = 10,    // size of the marker
        border = 2;   // border thickness

    let markerHtmlStyles = `
        background-color: ${myCustomColour};
        width: ${size * 3}px;
        height: ${size * 3}px;
        display: block;
        left: ${size * -1.5}px;
        top: ${size * -1.5}px;
        position: relative;
        border-radius: ${size * 3}px ${size * 3}px 0;
        transform: rotate(45deg);
        border: ${border}px solid #FFFFFF;
        `;

    let captionStyles = `
        transform: rotate(-45deg);
        display:block;
        width: 100%;
        text-align: center;
        line-height: ${size * 2.5}px;
        `;

    let icon = L.divIcon({
        className: 'color-pin-' + myCustomColour.replace('#', ''),
        iconAnchor: [border, size*2 + border*2],
        labelAnchor: [-(size/2), 0],
        popupAnchor: [0, -(size*3 + border)],

        html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
    });

    return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

fixed the positioning of the marker (it was off to b and r)

Source Link

edited Aug 8, 2019 at 21:27

BananaAcid

3.4k
1
36
40

adding to @tutts excelent answer, I modified it to this:

... includes a caption - where you can use FontAwesome icons or alike ...

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    iconAnchor: [0[border, size*2 + border/2]border*2],
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

adding to @tutts excelent answer, I modified it to this:

... includes a caption - where you can use FontAwesome icons or alike ...

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    iconAnchor: [0, size*2 + border/2],
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

adding to @tutts excelent answer, I modified it to this:

... includes a caption - where you can use FontAwesome icons or alike ...

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: 100%; \
    text-align: center; \
    line-height: '+ (size * 2.5) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),
    iconAnchor: [border, size*2 + border*2],
    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

fixed a ;

Source Link

edited Aug 8, 2019 at 21:01

BananaAcid

3.4k
1
36
40

Loading

Source Link

created Aug 8, 2019 at 20:46

BananaAcid

3.4k
1
36
40

Loading

Collectives™ on Stack Overflow

Return to Answer