locked
What Happened to CSS for Pushpin Icons (needed to use Sprite sheets)? RRS feed

  • Question

  • I'm working to port my application from Bing 7 to Bing 8, and I cannot figure out how to set the style class for my pushpin icons. My application uses a sprite sheet with 5,472 individual glyphs for the pushpins, requiring the used of the height and width properties on the icon, and a CSS-introduced background-image URL(Sprites.gif) and background-offset x y to select the appropriate sprite glyph for each icon.  So I can't get along without assigning a CSS class to each pushpin icon.

    Bing 7 allowed an icon ".typeName" property to assign each icon a CSS class.  Bing 8 seems to ignore ".typeName".  Is there a replacement for ".typeName", or an alternate method for dealing with selecting individual images from sprite sheets in Bing 8?




    Friday, June 2, 2017 9:55 PM

Answers

  • The CSS style option as well as HTML based pushpins have been deprecated. One of the most common pieces of feedback for V7 was that you couldn't load much more than 1000 pushpins before their were performance issues. The reason for that issue is that pushpins are made up of DOM elements (img, div tags). The more DOM elements in a page, the slower a page becomes. In V8, all rendering is now done using an HTML5 canvas. This allows tens of thousands of shapes to be drawn on the map with good performance. This also allows a number of additionally requested features to be supported, such as changing the color of the base pushpin However, it doesn't support rendering DOM elements. There are many ways to create custom pushpins in V8. Here are a bunch of examples: http://bingmapsv8samples.azurewebsites.net/#Inline%20SVG%20Pushpin%20Template

    All that said, if you really want to use HTML to create your pushpins, V8 introduced a new feature called Custom Overlays which allows you to create custom rendering surfaces. There is a code sample that shows how to use this to create HTML pushpins here: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer


    [Blog] [twitter] [LinkedIn]

    Monday, June 5, 2017 4:14 PM
  • The sample isn't riddled with bugs, it simple works differently from the standard pushpin class. It is meant to be an example. There is no plans to support HTML pushpins natively in V8. It would add a lot of confusion as HTML pushpins wouldn't be able to support half of the new (highly requested) features. Note, we estimate that less than 1% of V7 apps are using HTML based pushpins.

    That said, you can use image sprites in V8. Here is an example that uses and HTMl5 canvas to achieve this: http://bingmapsv8samples.azurewebsites.net/#Image%20Sprite%20Pushpins%20using%20a%20Canvas This sample could be optimized and stream lined a bit but likely would require less than 50 lines of code to create something that converts your existing CSS sprites into pushpins.


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 6, 2017 1:24 AM

All replies

  • The CSS style option as well as HTML based pushpins have been deprecated. One of the most common pieces of feedback for V7 was that you couldn't load much more than 1000 pushpins before their were performance issues. The reason for that issue is that pushpins are made up of DOM elements (img, div tags). The more DOM elements in a page, the slower a page becomes. In V8, all rendering is now done using an HTML5 canvas. This allows tens of thousands of shapes to be drawn on the map with good performance. This also allows a number of additionally requested features to be supported, such as changing the color of the base pushpin However, it doesn't support rendering DOM elements. There are many ways to create custom pushpins in V8. Here are a bunch of examples: http://bingmapsv8samples.azurewebsites.net/#Inline%20SVG%20Pushpin%20Template

    All that said, if you really want to use HTML to create your pushpins, V8 introduced a new feature called Custom Overlays which allows you to create custom rendering surfaces. There is a code sample that shows how to use this to create HTML pushpins here: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer


    [Blog] [twitter] [LinkedIn]

    Monday, June 5, 2017 4:14 PM
  • I will add - for what my opinion is worth (nothing) - please bring back html-based pushpins as an optional built-in class developers can utilize if they choose to accept the performance penalties.

    The sample classes provided for this was a useful starting point to learn but we eventually scraped it and wrote our own from scratch that emulates the old (v7) Pushpin class, minus features we didn't immediately need right now. The sample is riddled with bugs, has it's own performance problems, and pushpins added via the HtmlPushpin class do not respect Events.addHandler among other missing features.

    Yes, it results in 1-to-1 pushpin-to-domelement, however the time it saved in not having to port dozens of sprite-based icons to individual icons was enormous.



    • Edited by Posef Monday, June 5, 2017 8:05 PM
    Monday, June 5, 2017 8:04 PM
  • The sample isn't riddled with bugs, it simple works differently from the standard pushpin class. It is meant to be an example. There is no plans to support HTML pushpins natively in V8. It would add a lot of confusion as HTML pushpins wouldn't be able to support half of the new (highly requested) features. Note, we estimate that less than 1% of V7 apps are using HTML based pushpins.

    That said, you can use image sprites in V8. Here is an example that uses and HTMl5 canvas to achieve this: http://bingmapsv8samples.azurewebsites.net/#Image%20Sprite%20Pushpins%20using%20a%20Canvas This sample could be optimized and stream lined a bit but likely would require less than 50 lines of code to create something that converts your existing CSS sprites into pushpins.


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 6, 2017 1:24 AM