Permalink
Browse files

Append clustering examples

  • Loading branch information...
1 parent 7171544 commit 9a48933f9af4dfabca14c3fa47173da6e527b942 @jbdemonte committed Mar 15, 2016
View
@@ -14,11 +14,20 @@ gulp.task("clean", function () {
});
/**
+ * Copy example assets
+ */
+gulp.task("assets", function () {
+ // process each example but the template
+ return gulp.src(["src/examples/**/*.png", "src/examples/**/*.css"])
+ .pipe(gulp.dest("dist/examples/"));
+});
+
+/**
* Build example files using the template file
*/
-gulp.task("examples", function () {
+gulp.task("examples", ["assets"], function () {
// process each example but the template
- return gulp.src(["src/examples/*.html", "!src/examples/_template.html"])
+ return gulp.src(["src/examples/**/*.html", "!src/examples/_template.html"])
.pipe(foreach(function(stream, file){
return gulp.src("src/examples/_template.html") // use template file
.pipe(replace("[body]", file.contents.toString())) // replace template tag by example content
@@ -50,4 +59,16 @@ gulp.task("main", function () {
*/
gulp.task("default", function (done) {
runSequence("clean", "main", "uglify", "examples", done);
+});
+
+
+/**
+ * Watch files modifications and rebuild
+ **/
+gulp.task("watch", function() {
+ gulp.start("default");
+
+ gulp.watch("src/**/*", function() {
+ gulp.start("default");
+ });
});
@@ -2,15 +2,8 @@
<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>
- <style>
- .gmap3{
- margin: 20px auto;
- border: 1px dashed #C0C0C0;
- width: 1000px;
- height: 500px;
- }
- </style>
<body>
[body]
</body>
@@ -0,0 +1,55 @@
+<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>
@@ -0,0 +1,113 @@
+<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>
@@ -0,0 +1,49 @@
+<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) {
+ if (marker instanceof google.maps.Marker) { // ignore cluster
+ cluster.remove(marker);
+ marker.setMap(null);
+ }
+ }
+ })
+ ;
+
+ $('button').click(function () {
+ cluster.add(marker);
+ });
+ });
+</script>
@@ -0,0 +1,87 @@
+<div id="test" class="gmap3"></div>
+<script>
+ $(function () {
+ $('#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,
+ list = [],
+ rlat = lat2 - lat1,
+ rlng = lng2 - lng1;
+ for (i = 0; i < 1000; i++) {
+ lat = lat1 + rlat * Math.random();
+ lng = lng1 + rlng * Math.random();
+ list.push({position: [lat, lng]});
+ }
+
+ $('#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
+ };
+ }
+ }
+ })
+ .on({ // events trigged by clusters
+ mouseover: function(target, event){
+ if (target.overlay) {
+ target.overlay.$.find(">*").css('border', '1px solid #FF0000');
+ }
+ },
+ mouseout: function(target, event){
+ if (target.overlay) {
+ target.overlay.$.find(">*").css('border', '0px');
+ }
+ },
+ click: function(target, event){
+ if (target.overlay) {
+ target.overlay.getMap().fitBounds(target.overlay.getBounds());
+ }
+ }
+ })
+ ;
+ }
+ });
+</script>
Oops, something went wrong.

0 comments on commit 9a48933

Please sign in to comment.