none
Apply pushpin text shadow? RRS feed

  • Question

  • How can we apply a text shadow to the pushpin text? This is the text that appears overtop of the pushpin.

    We have customized colors of pushpins (red, yellow, green) and the white text is difficult to read over the yellow variant.

    In V7 we solved this with a text-shadow css rule.

    Friday, May 12, 2017 3:59 PM

Answers

  • You have to use SVG filters. The CSS text-shadow property is not well supported in all browsers for SVG's. Alternatively you can add a second text tag and offset it accordingly. 

    [Blog] [twitter] [LinkedIn]

    Saturday, May 13, 2017 5:33 PM
  • CSS class support is not something that V8 doesn't support but is a browser limitation when SVG's are converted to images in the browser and then rendered on an HTML5 canvas. Alternatively you could  use the HTML Pushpin module: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer

    That said, here is a modified version of your code that uses a second text tag to create a drop shadow:

    var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', '#fff', '"/>',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius - 2, '" fill="{color}"/>',
                  '<text fill="#000" text-anchor="middle" x="50%" y="60%" style="font-size:12px; font-weight:bold;font-family:\'Segoe UI\',\'San Francisco\',Helvetica,Arial,Sans-Serif">', clusterSize.toString(), '</text>', '<text fill="#fff" text-anchor="middle" x="47%" y="57%" style="font-size:12px;font-weight:bold;font-family:\'Segoe UI\',\'San Francisco\',Helvetica,Arial,Sans-Serif">', clusterSize.toString(), '</text>',
                  '</svg>'];


    [Blog] [twitter] [LinkedIn]

    Monday, May 15, 2017 4:19 PM

All replies

  • Case in point, the pushpins on the left are the default rendering while the ones on the right are using custom svg text rendering:

    The right was accomplished by using no text for the pushpin and instead rendering text with svg's text node.

    var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', '#fff', '"/>',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius - 2, '" fill="{color}"/>',
                  '<text fill="#fff" text-anchor="middle" x="50%" y="60%" style="font-size:12px; font-weight:bold; text-shadow:0 1px 1px #000; font-family:\'Segoe UI\',\'San Francisco\',Helvetica,Arial,Sans-Serif">', clusterSize.toString(), '</text>',
                  '</svg>'];
    
    cluster.setOptions({
        icon: svg.join(''),
        color: '#f3cd48', 
        anchor: new Microsoft.Maps.Point(radius, radius),
        roundClickableArea: true,
        text: ''
    });

    Although the sample is for a clustered pushpin the same technique works for a regular pushpin.

    Now, my question still stands: is there a way to accomplish this natively? Because the svg hardcoded styles needed on the text node is too heavy handed.

    Friday, May 12, 2017 5:49 PM
  • You have to use SVG filters. The CSS text-shadow property is not well supported in all browsers for SVG's. Alternatively you can add a second text tag and offset it accordingly. 

    [Blog] [twitter] [LinkedIn]

    Saturday, May 13, 2017 5:33 PM

  • Trying to not use custom svg text at all, if that wasn't clear. Because as you can see if I do I need to supply a ton of additional styles to match the typeface of the rest of the map and its components.

    And since they don't support css classes I'm dead in the water there too.

    PLEASE reconsider the lack of css class support, our migration code is getting ridiculous.


    • Edited by Posef Monday, May 15, 2017 3:36 PM
    Monday, May 15, 2017 3:35 PM
  • CSS class support is not something that V8 doesn't support but is a browser limitation when SVG's are converted to images in the browser and then rendered on an HTML5 canvas. Alternatively you could  use the HTML Pushpin module: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer

    That said, here is a modified version of your code that uses a second text tag to create a drop shadow:

    var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', '#fff', '"/>',
                  '<circle cx="', radius, '" cy="', radius, '" r="', radius - 2, '" fill="{color}"/>',
                  '<text fill="#000" text-anchor="middle" x="50%" y="60%" style="font-size:12px; font-weight:bold;font-family:\'Segoe UI\',\'San Francisco\',Helvetica,Arial,Sans-Serif">', clusterSize.toString(), '</text>', '<text fill="#fff" text-anchor="middle" x="47%" y="57%" style="font-size:12px;font-weight:bold;font-family:\'Segoe UI\',\'San Francisco\',Helvetica,Arial,Sans-Serif">', clusterSize.toString(), '</text>',
                  '</svg>'];


    [Blog] [twitter] [LinkedIn]

    Monday, May 15, 2017 4:19 PM