none
Migrating from Bing Maps V7 to V8 SVG is not displayed RRS feed

  • Question

  • Hello            

    I have a V7 map that displayes a number of pushpins with custom SVG icon. However in V8 the same SVG is not displayed but only the standard icon is displayed. Any suggestions to why that is?

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?'
                async defer></script>
        <script type='text/javascript'>
            function GetMap() {
    
                var map = new Microsoft.Maps.Map('#myMap', {
                    credentials: 'bing map key'
                });
    
                // this svg does not work
                var svgTemplate = "<svg xmlns='http://www.w3.org/2000/svg' height='32' width='32' style='margin-top:20px;'><defs><pattern id='diagonalHatch' patternUnits='userSpaceOnUse' x='0' y='0' width='105' height='105'><g style='fill:none; stroke:rgb(0,0,0); stroke-width:1'><path d='M0 90 l15,15'/><path d='M0 75 l30,30'/><path d='M0 60 l45,45'/><path d='M0 45 l60,60'/><path d='M0 30 l75,75'/><path d='M0 15 l90,90'/><path d='M0 0 l105,105'/><path d='M15 0 l90,90'/><path d='M30 0 l75,75'/><path d='M45 0 l60,60'/><path d='M60 0 l45,45'/><path d='M75 0 l30,30'/><path d='M90 0 l15,15'/></g></pattern></defs><circle cx='16' cy='16' r='15' stroke='black' stroke-width='1' fill='rgb(255,255,255)'/><circle cx='16' cy='16' r='15' stroke='black' stroke-width='1' fill-opacity='0.0' fill='url(#diagonalHatch)'/><text font-family='Verdana' font-size='9' x='10' y='15' style='fill:rgb(0,0,0);'>0</text><text font-family='Verdana' font-size='9' x='7' y='25' style='fill:rgb(0,0,0);'>2SF</text><image x='22' y='0' width='13' height='13' xlink:href='hi_mapicon_none.png'/></svg>";
    
                // this svg work
                //var svgTemplate = "<svg xmlns='http://www.w3.org/2000/svg' height='32' width='32'><polygon points= '0,16 16,32 32,16 16,0' stroke= 'black' stroke-width='1' fill= 'yellow' /></svg >";
                           
                var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
                    icon: svgTemplate,
                    anchor: new Microsoft.Maps.Point(25, 25)
                });
    
                //Add the pushpin to the map.
                map.entities.push(pin);
            }
        </script>
    </head>
    <body onload="GetMap();">
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>
    

    Wednesday, June 28, 2017 7:39 AM

Answers

  • Ok, I've put together some SVG templates that are very close to the images you provided. I've set them up such that you can set the color and text value via the pushpin options. One caveat is that SVG text does not support word-wrap, as such the XL/L text is hard coded into the SVG's. I'm assuming that there is a small number of values for the top text value so you could simply create multiple templates with these hardcoded values. I've added these templates to a SVG pushpin gallery I put together here: 

    http://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Gallery

    Simply select the pushpin you want and it will provide the code to create a pushpin below the map. You can set the text and color values via textboxes to see how it looks.

    Update:

    I've been updating the above tool and am planning to modify the pushpins I created for you to align with the templating I've been doing, but it is limited to a single line of text. Here is the code for the original svg's that I put together:

    //Circle XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><circle cx="16" cy="16" r="14" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Triangle XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="16,0 32,32 0,32 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="18" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="28" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Diamond XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="0,16 16,32 32,16 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Hexagon XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="9,0 22,0 32,16 22,32 9,32 0,16 9,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Circle L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><circle cx="16" cy="16" r="14" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Triangle L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="16,0 32,32 0,32 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="18" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="28" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Diamond L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="0,16 16,32 32,16 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Hexagon L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="9,0 22,0 32,16 22,32 9,32 0,16 9,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    


    [Blog] [twitter] [LinkedIn]


    Friday, June 30, 2017 7:12 PM

All replies

  • The SVG image tag won't work unless your image is a data:uri as it won't load fast enough to be rendered on an HTML5 canvas. Additionally your SVG appears to contain data that is offset, as such it gets cut off (once the image tag is removed). 

    If you can provide a screenshot of the pushpin you are trying to create using SVG, I'd be happen to assist in creating a suitable SVG.


    [Blog] [twitter] [LinkedIn]

    Wednesday, June 28, 2017 6:18 PM
  • Thank you for your reply. The
    below screenshot shows 3 of our current pushpins. We kind of like this style
    but we are considering using image icons if the SVG approached is going to give
    to much trouble.

    Friday, June 30, 2017 7:20 AM
  • Those actually look like they would be fairly easy to do with SVG's without an image tag. I'll try and put something together today.


    [Blog] [twitter] [LinkedIn]

    Friday, June 30, 2017 4:52 PM
  • Ok, I've put together some SVG templates that are very close to the images you provided. I've set them up such that you can set the color and text value via the pushpin options. One caveat is that SVG text does not support word-wrap, as such the XL/L text is hard coded into the SVG's. I'm assuming that there is a small number of values for the top text value so you could simply create multiple templates with these hardcoded values. I've added these templates to a SVG pushpin gallery I put together here: 

    http://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Gallery

    Simply select the pushpin you want and it will provide the code to create a pushpin below the map. You can set the text and color values via textboxes to see how it looks.

    Update:

    I've been updating the above tool and am planning to modify the pushpins I created for you to align with the templating I've been doing, but it is limited to a single line of text. Here is the code for the original svg's that I put together:

    //Circle XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><circle cx="16" cy="16" r="14" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Triangle XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="16,0 32,32 0,32 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="18" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="28" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Diamond XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="0,16 16,32 32,16 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Hexagon XL
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="9,0 22,0 32,16 22,32 9,32 0,16 9,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">XL</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Circle L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><circle cx="16" cy="16" r="14" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Triangle L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="16,0 32,32 0,32 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="18" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="28" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    //Diamond L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="0,16 16,32 32,16 16,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    
    
    
    //Hexagon L
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
    	icon: '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="34"><polygon points="9,0 22,0 32,16 22,32 9,32 0,16 9,0" style="stroke:black;stroke-width:1;fill:{color}"/><text x="15" y="15" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">L</text><text x="15" y="25" width="20" style="font-size:10px;font-family:arial;" text-anchor="middle">{text}</text><image x="20" y="2" height="10" width="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QYeEgkeGiVGvwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAByElEQVRIx8XWvWsUYRAG8N9t1BgtomCjosL5UYgcFoIQ9B8Q/QcsIvhVWAgBwUKx0iamEhsR0wSbKEQEy9jZHKidH2ghKASUQDBynJ7n2UzgZbkzl8utGViGffadffad95mZLVm57cZjbO8htoQMz3qIdRZ1tFZzZT0Q/4ngVVlmjWxdmw85gG2xs/RsmnhZFPFxTKLcYf0pDPSbuIw74d+jgY3YiaFYsy8RVl+IB3EDFTzFOH5jL64GLtLd6ueOL+AM3uAKPgT+FQtFiCvDYdyMFF5PSJcykRVFfA3DuI2Z3PNaTt19LacT+BlndzFJfxM7QlyFEG8K0stRr0vWitIZKrKBlLDlf3auNWuZeeIfuIVdoeijMcK6FVgdUziIDeGnAu9IvIBzUVLlGH+LOIkHyZF0shomMIrNOB9+NPBau4BGUkoTydys4zT2RH1fikazGKpvJt2sivUYy83escCrcd9EbSDS28D9UPHDnPiG8Qi/Iu2vosTm4mM+4i2m8Q13sTV5x348wfcg/YR7+d2PtPlbqOJQl2d8BPO5+PnA/ymuz3idw17gS5fEc5jNYbOBL6vyY3ge6ZuMCbUSq0Rq34WvtFv0Fz2agcRWraWhAAAAAElFTkSuQmCC"/></svg>',
    	anchor: new Microsoft.Maps.Point(18, 17),
    	color: 'orange',
    	text: 'FRI'
    });
    


    [Blog] [twitter] [LinkedIn]


    Friday, June 30, 2017 7:12 PM
  • Thank you very much. I'll have our maps updated over the summer.
    Monday, July 3, 2017 9:53 AM