diff --git a/assets/app.js b/assets/app.js index 11b3e11..884ef40 100644 --- a/assets/app.js +++ b/assets/app.js @@ -50,6 +50,34 @@ $(function () { ] }); + $('.js-marker-group').smallworld({ + geojson: data, + center: [45, -50], + markers: [ + { + values: [ + [37.757719928168605, -122.43760000000003], + [51.528868434293145, -0.10159864999991441] + ], + markerColor: 'blue', + markerSize: 3 + }, + { + values: [ + [40.705960705452846, -73.9780035] + ] + // use default color and size + }, + { + values: [ + [-27.757719928168605, 122.43760000000003] + ], + markerColor: 'red' + } + ], + markerColor: 'black' + }); + }); -}); \ No newline at end of file +}); diff --git a/dist/smallworld.js b/dist/smallworld.js index cd9a5e1..9a69991 100644 --- a/dist/smallworld.js +++ b/dist/smallworld.js @@ -285,16 +285,40 @@ }, addMarker: function (point, options) { - + + // check if 'point' is a group of markers + if (!(point instanceof Array) && typeof(point) !== "number") { + options = options || {}; + // make a deep copy + var groupOptions = {}; + groupOptions = JSON.parse(JSON.stringify(options)); + if (point.markerColor !== undefined) { + groupOptions.markerColor = point.markerColor; + } + if (point.markerSize !== undefined) { + groupOptions.markerSize = point.markerSize; + } + for (var i = 0; i < point.values.length; i++) { + this.pAddMarker(point.values[i], groupOptions); + } + } else { + this.pAddMarker(point, options); + } + + }, + + pAddMarker: function (point, options) { options = options || {}; var center = this.coordinateToPoint(point[0], point[1]); - + + var markerSize = options.markerSize || this.options.markerSize; + var markerColor = options.markerColor || this.options.markerColor; + this.context.beginPath(); - this.context.arc(center.x, center.y, this.options.markerSize, 0, 2 * Math.PI, false); - this.context.fillStyle = this.options.markerColor; + this.context.arc(center.x, center.y, markerSize, 0, 2 * Math.PI, false); + this.context.fillStyle = markerColor; this.context.fill(); - } }; diff --git a/dist/smallworld.min.js b/dist/smallworld.min.js index 64ea32c..ec13b8b 100644 --- a/dist/smallworld.min.js +++ b/dist/smallworld.min.js @@ -2,4 +2,4 @@ // @version v0.1.0 // @link https://github.com/mikefowler/smallworld.js // @license MIT -!function(t,i){"use strict";"function"==typeof define&&define.amd?define(["exports"],function(e){t.Smallworld=i(t,e)}):"undefined"!=typeof exports?i(t,exports):t.Smallworld=i(t)}(this,function(t){"use strict";function i(t){for(var i=1;i=s;s++)this.context.drawImage(this.tile.el,t-this.tile.width*s,i);for(s=1;o>=s;s++)this.context.drawImage(this.tile.el,t+this.tile.width*s,i);if(this.context.drawImage(this.tile.el,t,i),this.options.marker)this.tile.addMarker(this.options.marker===!0?this.options.center:this.options.marker);else if(this.options.markers)for(var n=0;ni.x?e.xMax:i.x,e.yMin=e.yMini.y?e.yMax:i.y}return e},draw:function(){this.context.fillStyle=this.options.landColor;for(var t=0;to?o:s;return{x:(e.x-this.bounds.xMin)*n,y:(this.bounds.yMax-e.y)*n}},projectCoordinate:function(t,i){var e=o.Projection.mercator(t,i);return e.x=e.x*this.scale,e.y=e.y*this.scale,e},addMarker:function(t,i){i=i||{};var e=this.coordinateToPoint(t[0],t[1]);this.context.beginPath(),this.context.arc(e.x,e.y,this.options.markerSize,0,2*Math.PI,!1),this.context.fillStyle=this.options.markerColor,this.context.fill()}},o.Projection={RADIUS:6378137,MAX:85.0511287798,RADIANS:Math.PI/180,mercator:function(t,i){var e={};return e.x=this.RADIUS*i*this.RADIANS,e.y=Math.max(Math.min(this.MAX,t),-this.MAX)*this.RADIANS,e.y=this.RADIUS*Math.log(Math.tan(Math.PI/4+e.y/2)),e}},o}); \ No newline at end of file +!function(t,i){"use strict";"function"==typeof define&&define.amd?define(["exports"],function(e){t.Smallworld=i(t,e)}):"undefined"!=typeof exports?i(t,exports):t.Smallworld=i(t)}(this,function(t){"use strict";function i(t){for(var i=1;i=s;s++)this.context.drawImage(this.tile.el,t-this.tile.width*s,i);for(s=1;o>=s;s++)this.context.drawImage(this.tile.el,t+this.tile.width*s,i);if(this.context.drawImage(this.tile.el,t,i),this.options.marker)this.tile.addMarker(this.options.marker===!0?this.options.center:this.options.marker);else if(this.options.markers)for(var n=0;ni.x?e.xMax:i.x,e.yMin=e.yMini.y?e.yMax:i.y}return e},draw:function(){this.context.fillStyle=this.options.landColor;for(var t=0;to?o:s;return{x:(e.x-this.bounds.xMin)*n,y:(this.bounds.yMax-e.y)*n}},projectCoordinate:function(t,i){var e=o.Projection.mercator(t,i);return e.x=e.x*this.scale,e.y=e.y*this.scale,e},addMarker:function(t,i){if(t instanceof Array||"number"==typeof t)this.pAddMarker(t,i);else{i=i||{};var e={};e=JSON.parse(JSON.stringify(i)),void 0!==t.markerColor&&(e.markerColor=t.markerColor),void 0!==t.markerSize&&(e.markerSize=t.markerSize);for(var o=0;oMarkers +
+
+
+
+ +
+
$('.map').smallworld({
+	center: [45, -50],
+	markers: [
+		{
+			values: [
+	  			[37.757719928168605, -122.43760000000003],
+				[51.528868434293145, -0.10159864999991441]
+	  		],
+	  		markerColor: 'blue',
+	  		markerSize: 3
+	  	},
+	  	{
+	  		values: [
+	  			[40.705960705452846, -73.9780035]
+	  		]
+	  		// use default color and size
+	  	},
+	  	{
+	  		values: [
+	  			[-27.757719928168605, 122.43760000000003]
+	  		],
+	  		markerColor: 'red'
+	  	}
+	],
+	markerColor: 'black'
+});
+
+
+

Using without jQuery/Zepto

diff --git a/src/smallworld.js b/src/smallworld.js index cd9a5e1..9a69991 100644 --- a/src/smallworld.js +++ b/src/smallworld.js @@ -285,16 +285,40 @@ }, addMarker: function (point, options) { - + + // check if 'point' is a group of markers + if (!(point instanceof Array) && typeof(point) !== "number") { + options = options || {}; + // make a deep copy + var groupOptions = {}; + groupOptions = JSON.parse(JSON.stringify(options)); + if (point.markerColor !== undefined) { + groupOptions.markerColor = point.markerColor; + } + if (point.markerSize !== undefined) { + groupOptions.markerSize = point.markerSize; + } + for (var i = 0; i < point.values.length; i++) { + this.pAddMarker(point.values[i], groupOptions); + } + } else { + this.pAddMarker(point, options); + } + + }, + + pAddMarker: function (point, options) { options = options || {}; var center = this.coordinateToPoint(point[0], point[1]); - + + var markerSize = options.markerSize || this.options.markerSize; + var markerColor = options.markerColor || this.options.markerColor; + this.context.beginPath(); - this.context.arc(center.x, center.y, this.options.markerSize, 0, 2 * Math.PI, false); - this.context.fillStyle = this.options.markerColor; + this.context.arc(center.x, center.y, markerSize, 0, 2 * Math.PI, false); + this.context.fillStyle = markerColor; this.context.fill(); - } };