Permalink
Browse files

Append clustering examples

  • Loading branch information...
jbdemonte committed Mar 15, 2016
1 parent 7171544 commit 9a48933f9af4dfabca14c3fa47173da6e527b942
View
@@ -13,12 +13,21 @@ gulp.task("clean", function () {
return gulp.src("dist", {read: false}).pipe(clean());
});
/**
* 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.