Samples

Overview

On this page, you will find various plunker samples illustrating the use of Angular Maps. Some samples contain both a Google and Bing implementation. Compare the code to see that the implementations are the same, the only difference being the injected map loader, which is exactly the objective of x-maps.

Experimental - StackBlitz Sample

https://stackblitz.com/edit/angular4-nha6fc - We'll be looking to move all the samples off Plunker to Stackblitz as we release the 6.0 version....

Basic Map Samples

• Simple map with marker - Bing | Google
• Basic map with multiple data-bound markers - Bing | Google

Polygons and Polylines

• Map with complex polygon shape - Bing | Google
• Editable polygons - Bing | Google

Custom Marker Samples

• Bing Map with Canvas Marker (easily create any custom marker shapes)
• Bing Map with Rotated Image Marker
• Bing Map with Scaled Image Marker
• Bing Map with Rounded Image Marker
• Bing Map with Font Based Marker (use any icon font)

Large Data

• Map using MarkerLayer for large amounts of markers, 20,000 unclustered - Bing | Google
• Map using MarkerLayer for large amounts of markers, 50,000 clustered with actions to dynamically un-cluster, show/hide and reduce grid size - Bing | Google

Advanced Samples

• Layered map with multiple databound markers - Bing | Google
• Map with multiple data-bound markers in a cluster layer with dynamic size markers - Bing | Google
• Bing Map with spider cluster. Wicked. Special shoutout to @rbrundritt.