version 7.0

jbdemonte · Mar 28, 2016 · 2baee8f · 2baee8f
1 parent d916c60
commit 2baee8f
Show file tree

Hide file tree

Showing 34 changed files with 2,312 additions and 11 deletions.
diff --git a/dist/examples/bicyclelayer.html b/dist/examples/bicyclelayer.html
@@ -0,0 +1,21 @@
+<html>    
+  <head> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="../gmap3.js"></script>
+  <body>
+<div id="test" class="gmap3"></div>
+<script>
+  $(function () {
+    $('#test')
+      .gmap3({
+        center:[42.3726399, -71.1096528],
+        zoom: 14
+      })
+      .bicyclinglayer()
+    ;
+  });
+</script>
+  </body>
+</html>
diff --git a/dist/examples/circle.html b/dist/examples/circle.html
@@ -0,0 +1,34 @@
+<html>    
+  <head> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="../gmap3.js"></script>
+  <body>
+<div id="test" class="gmap3"></div>
+<script>
+  $(function () {
+    var center = [37.772323, -122.214897];
+    $('#test')
+      .gmap3({
+        center: center,
+        zoom: 13,
+        mapTypeId : google.maps.MapTypeId.ROADMAP
+      })
+      .circle({
+        center: center,
+        radius : 750,
+        fillColor : "#FFAF9F",
+        strokeColor : "#FF512F"
+      })
+      .on('click', function (circle, event) {
+        circle.setOptions({fillColor: "#AAFF55"});
+        setTimeout(function () {
+          circle.setOptions({fillColor: "#FFAF9F"});
+        }, 200);
+      })
+    ;
+  });
+</script>
+  </body>
+</html>
diff --git a/dist/examples/cluster-add.html b/dist/examples/cluster-add.html
@@ -0,0 +1,65 @@
+<html>    
+  <head> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="../gmap3.js"></script>
+  <body>
+<div class=desc">Drag and drop the marker, and then, click to add it into the current clustering</div>
+<button>Insert into clustering</button>
+
+<div id="test" class="gmap3"></div>
+
+
+<script>
+  $(function () {
+    var cluster, marker;
+
+    $('#test')
+      .gmap3({
+        center: [46.578498,2.457275],
+        zoom: 4
+      })
+      .cluster({
+          size: 200,
+          markers: [
+            {position: [49.28952958093682, 6.152559438984804]},
+            {position: [44.28952958093682, 6.152559438984804]},
+            {position: [49.28952958093682, -1.1501188139848408]},
+            {position: [44.28952958093682, -1.1501188139848408]}
+          ],
+          cb: function (markers) {
+            if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
+              return {
+                content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
+                x: -26,
+                y: -26
+              };
+            }
+          }
+      })
+      .then(function (_cluster) {
+        cluster = _cluster;
+      })
+      .marker({
+        position:[50.92104315206032, 2.1936031249999814],
+        draggable: true
+      })
+      .then(function (_marker) {
+          marker = _marker;
+      })
+      .on({
+        click: function () {
+          alert("I was the one !")
+        }
+      })
+    ;
+
+    $('button').click(function () {
+      cluster.add(marker);
+    });
+  });
+</script>
+
+  </body>
+</html>
diff --git a/dist/examples/cluster-filter.html b/dist/examples/cluster-filter.html
@@ -0,0 +1,123 @@
+<html>    
+  <head> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="../gmap3.js"></script>
+  <body>
+<div id="main"><input type="checkbox" name="onOff" id="onOff" checked><label for="onOff">Clustering</label></div>
+<div id="colors"></div>
+<br />
+<div id="test" class="gmap3"></div>
+<script>
+  $(function () {
+
+    var cluster;
+    var colors = "black brown green purple yellow grey orange white".split(" ");
+
+    // create colors checkbox and associate onChange function
+    $.each(colors, function(i, color){
+      $("#colors").append("<input type='checkbox' name='"+color+"' checked><label for='"+color+"'>"+color+"</label>");
+    });
+
+    $('#test')
+      .gmap3({
+        center: [46.578498,2.457275],
+        zoom: 4
+      })
+      .then(function (map) {
+          waitForBounds(map);
+      });
+
+    function waitForBounds(map){
+      var ne, sw, bounds = map.getBounds();
+      if (!bounds) {
+        google.maps.event.addListenerOnce(map, 'idle', function () {
+            waitForBounds(map)
+          }
+        );
+        return;
+      }
+      ne = bounds.getNorthEast();
+      sw = bounds.getSouthWest();
+      randomMarkers(ne.lat(), sw.lng(), sw.lat(), ne.lng());
+    }
+
+    function randomMarkers(lat1, lng1, lat2, lng2) {
+      var i, lat, lng, color,
+          list = [],
+          rlat = lat2 - lat1,
+          rlng = lng2 - lng1;
+      for (i = 0; i < 100; i++) {
+        lat = lat1 + rlat * Math.random();
+        lng = lng1 + rlng * Math.random();
+        color = colors[i % colors.length];
+        list.push({
+          position: [lat, lng],
+          icon: "http://maps.google.com/mapfiles/marker_" + color + ".png",
+          _tag: color
+        });
+      }
+
+      $('#test')
+        .gmap3()
+        .cluster({
+          size: 150,
+          markers: list,
+          cb: function (markers) {
+            if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
+              if (markers.length < 20) {
+                return {
+                  content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
+                  x: -26,
+                  y: -26
+                };
+              }
+              if (markers.length < 50) {
+                return {
+                  content: "<div class='cluster cluster-2'>" + markers.length + "</div>",
+                  x: -26,
+                  y: -26
+                };
+              }
+              return {
+                content: "<div class='cluster cluster-3'>" + markers.length + "</div>",
+                x: -33,
+                y: -33
+              };
+            }
+          }
+        })
+        .then(function (_cluster) {
+            cluster = _cluster;
+        })
+      ;
+    }
+
+    $("#onOff").change(function () {
+      if ($(this).is(":checked")){
+        cluster.enable();
+      } else {
+        cluster.disable();
+      }
+    });
+
+    $("#colors input[type=checkbox]").change(function () {
+      // first : create an object where keys are colors and values is true (only for checked objects)
+      var checkedColors = {};
+      $("#colors input[type=checkbox]:checked").each(function(i, chk){
+        checkedColors[$(chk).attr("name")] = true;
+      });
+
+      // set a filter function using the closure data "checkedColors"
+      cluster.filter(function(marker){
+        return marker._tag in checkedColors;
+      });
+    });
+
+
+  });
+</script>
+
+  </body>
+</html>
diff --git a/dist/examples/cluster-remove.html b/dist/examples/cluster-remove.html
@@ -0,0 +1,59 @@
+<html>    
+  <head> 
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="style.css" />
+    <script type="text/javascript" src="../gmap3.js"></script>
+  <body>
+<div class=desc">Zom, then click a marker to remove it from the cluster</div>
+<div id="test" class="gmap3"></div>
+
+
+<script>
+  $(function () {
+    var cluster, marker;
+
+    $('#test')
+      .gmap3({
+        center: [46.578498,2.457275],
+        zoom: 4
+      })
+      .cluster({
+          size: 200,
+          markers: [
+            {position: [49.28952958093682, 6.152559438984804]},
+            {position: [44.28952958093682, 6.152559438984804]},
+            {position: [49.28952958093682, -1.1501188139848408]},
+            {position: [44.28952958093682, -1.1501188139848408]}
+          ],
+          cb: function (markers) {
+            if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
+              return {
+                content: "<div class='cluster cluster-1'>" + markers.length + "</div>",
+                x: -26,
+                y: -26
+              };
+            }
+          }
+      })
+      .then(function (_cluster) {
+        cluster = _cluster;
+      })
+      .on({
+        click: function (marker, clusterOverlay, cluster, event) {
+          if (marker) {
+            cluster.remove(marker);
+            marker.setMap(null);
+          }
+        }
+      })
+    ;
+
+    $('button').click(function () {
+      cluster.add(marker);
+    });
+  });
+</script>
+
+  </body>
+</html>