none
Custom Pushpins via css sprites RRS feed

  • Question

  • Our v7 application creates custom pushpins using css sprites, including rotation via css transforms. This was supported via the typeName option to the Pushpin constructor (I believe).

    How do we accomplish this in v8 of the sdk?

    We've been told v7 will be end-of-lifed soon and are trying to migrate now.

    Tuesday, May 9, 2017 6:34 PM

Answers

  • Older versions of the Bing Maps web API used DOM elements to render pushpins, often consisting of several elements such as links, divs and images. This severely limited the number of pushpins that could be added to a map as the more DOM elements on the page, the slower it becomes. Bing Maps V8 moved to HTML5 canvas for rendering. The HTML5 canvas doesn't support rendering traditional DOM elements, but can render a much larger data sets much faster without performance issues. As such, CSS and HTML based pushpins are not supported by the built-in pushpin class in Bing Maps V8. However, Bing Maps V8 has a lot of new features such as Custom Overlays which allow you to create your own custom rendering surfaces. A code sample has been provided which shows how to use a custom overlay to add support for custom HTML based pushpins. Using this approach you can continue to use CSS sprites for your pushpins. You can find the code sample here: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer 

    [Blog] [twitter] [LinkedIn]

    Tuesday, May 9, 2017 7:06 PM
  • Correct, The HtmlPushpinLayer has to be used and only HtmlPushpins can be added to it. This has to be done as this data set is rendered completely differently from all other data in V8.

    [Blog] [twitter] [LinkedIn]

    Wednesday, May 10, 2017 3:38 PM

All replies

  • Older versions of the Bing Maps web API used DOM elements to render pushpins, often consisting of several elements such as links, divs and images. This severely limited the number of pushpins that could be added to a map as the more DOM elements on the page, the slower it becomes. Bing Maps V8 moved to HTML5 canvas for rendering. The HTML5 canvas doesn't support rendering traditional DOM elements, but can render a much larger data sets much faster without performance issues. As such, CSS and HTML based pushpins are not supported by the built-in pushpin class in Bing Maps V8. However, Bing Maps V8 has a lot of new features such as Custom Overlays which allow you to create your own custom rendering surfaces. A code sample has been provided which shows how to use a custom overlay to add support for custom HTML based pushpins. Using this approach you can continue to use CSS sprites for your pushpins. You can find the code sample here: http://bingmapsv8samples.azurewebsites.net/#Html%20Pushpin%20Layer 

    [Blog] [twitter] [LinkedIn]

    Tuesday, May 9, 2017 7:06 PM
  • Thank you for pointing me to the samples Richard!

    After investigating the solution, am I right in understanding that in order to use the provided HtmlPushpin class I *must* also use the HtmlPushpinLayer, which invalidates rendering any other type of entity onto that layer?

    If our application renders both pushpins and related entities on the same layer (eg polylines between pins, polygons around a set of pushpins), am I correct that we will have to now separate these layers?

    Wednesday, May 10, 2017 3:12 PM
  • Correct, The HtmlPushpinLayer has to be used and only HtmlPushpins can be added to it. This has to be done as this data set is rendered completely differently from all other data in V8.

    [Blog] [twitter] [LinkedIn]

    Wednesday, May 10, 2017 3:38 PM