feat(examples): New example of layer+markers with markerclustering usage

tombatossals · Jan 11, 2014 · d0230d0 · d0230d0
1 parent b279b2e
commit d0230d0
Showing 1 changed file with 118 additions and 0 deletions.
diff --git a/examples/markers-clustering-example.html b/examples/markers-clustering-example.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+<head>
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/leaflet-dist/leaflet.js"></script>
+    <script src="../bower_components/leaflet.markerclusterer/dist/leaflet.markercluster.js"></script>
+    <script src="../dist/angular-leaflet-directive.min.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
+    <link rel="stylesheet" href="../bower_components/leaflet.markerclusterer/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="../bower_components/leaflet.markerclusterer/dist/MarkerCluster.Default.css" />
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("DemoController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                center: {
+                    lat: 24.0391667,
+                    lng: 121.525,
+                    zoom: 6
+                },
+                markers: {
+                    taipei: {
+                        layer: "northTaiwan",
+                        lat: 25.0391667,
+                        lng: 121.525,
+                    },
+                    yangmei: {
+                        layer: "northTaiwan",
+                        lat: 24.9166667,
+                        lng: 121.1333333
+                    },
+                    hsinchu: {
+                        layer: "northTaiwan",
+                        lat: 24.8047222,
+                        lng: 120.9713889
+                    },
+                    miaoli: {
+                        layer: "northTaiwan",
+                        lat: 24.5588889,
+                        lng: 120.8219444
+                    },
+                    tainan: {
+                        layer: "southTaiwan",
+                        lat: 22.9933333,
+                        lng: 120.2036111
+                    },
+                    puzi: {
+                        layer: "southTaiwan",
+                        lat: 23.4611,
+                        lng: 120.242
+                    },
+                    kaohsiung: {
+                        layer: "southTaiwan",
+                        lat: 22.6252777778,
+                        lng: 120.3088888889
+                    },
+                    taitun: {
+                        layer: "southTaiwan",
+                        lat: 22.75,
+                        lng: 121.15
+                    }
+                },
+                layers: {
+                    baselayers: {
+                        cloudmade: {
+                            name: 'Cloudmade Taiwan map',
+                            type: 'xyz',
+                            url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',
+                            layerParams: {
+                                key: '007b9471b4c74da4a6ec7ff43552b16f',
+                                styleId: 7
+                            }
+                        }
+                    },
+                    overlays: {
+                        northTaiwan: {
+                            name: "North cities",
+                            type: "markercluster",
+                            visible: true
+                        },
+                        southTaiwan: {
+                            name: "South cities",
+                            type: "markercluster",
+                            visible: true
+                        }
+                    }
+                }
+            });
+        }]);
+    </script>
+    <style>
+        .angular-leaflet-map {
+            width: 100%;
+            height: 320px;
+        }
+        .left {
+            float: left;
+            width: 58%;
+            padding-right: 1em;
+        }
+        .right {
+            float: right;
+            width: 40%;
+        }
+    </style>
+</head>
+<body ng-controller="DemoController">
+    <leaflet center="center" markers="markers" layers="layers"></leaflet>
+    <h1>Marker clustering example</h1>
+    <div class="left">
+        <p>You can create a marker-clustering group on the map, defining <strong>layers</strong> like this.</p>
+        <pre ng-bind="layers | json"></pre>
+    </div>
+    <div class="right">
+        <p>And your <strong>markers</strong> definition this way:</p>
+        <pre ng-bind="markers | json"></pre>
+    </div>
+</body>
+</html>