feat(examples): Little improvement on decorations-simple-example.html

tombatossals · Sep 4, 2014 · 4573100 · 4573100
1 parent 25f27f0
commit 4573100
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/examples/decorations-simple-example.html b/examples/decorations-simple-example.html
@@ -25,10 +25,33 @@
                     }
                 }
             });
+
+            $scope.changePattern = function(type) {
+                if (type === 'dot') {
+                    $scope.decorations.markers.patterns = [ {offset: 0, repeat: 10, symbol: L.Symbol.dash({pixelSize: 0})} ];
+                } else if (type === 'slash') {
+                    $scope.decorations.markers.patterns = [ {offset: 12, repeat: 25, symbol: L.Symbol.dash({pixelSize: 10, pathOptions: {color: '#f00', weight: 2}})} ];
+                } else if (type === 'slashdot') {
+                    $scope.decorations.markers.patterns = [
+                        { offset: 12, repeat: 25, symbol: L.Symbol.dash({pixelSize: 10, pathOptions: {color: '#f00', weight: 2}}) },
+                        { offset: 0, repeat: 25, symbol: L.Symbol.dash({pixelSize: 0}) }
+                    ];
+                } else if (type === 'arrow') {
+                    $scope.decorations.markers.patterns = [
+                        {offset: 12, repeat: 25, symbol: L.Symbol.dash({pixelSize: 18, pathOptions: {color: '#f00', weight: 4}})},
+                        {offset: '10%', repeat: 25, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}
+                    ]
+                }
+            };
         };
+
     </script>
   </head>
   <body ng-controller="DemoController">
+    <button ng-click="changePattern('slash')">Slash pattern</button>
+    <button ng-click="changePattern('dot')">Dot pattern</button>
+    <button ng-click="changePattern('slashdot')">Slashdot pattern</button>
+    <button ng-click="changePattern('arrow')">Arrow pattern</button>
     <leaflet center="london" decorations="decorations" height="480px" width="640px"></leaflet>
   </body>
 </html>