Permalink
Browse files

website update

  • Loading branch information...
1 parent 6e37dc3 commit 337875b5f3b7d69c72ae176c44c53c50387e3019 @gka gka committed Dec 18, 2012
Showing with 143 additions and 65 deletions.
  1. +16 −3 docs/kartograph.js/index.md
  2. +2 −2 index.html
  3. +122 −58 js/kartograph.js
  4. +3 −2 js/kartograph.min.js
@@ -46,9 +46,6 @@ Now you want to load your SVG using ``loadMap(map_url, callback)``.
});
-**Note:** Due to cross-domain access restrictions, you probably need to store your SVG files on the same domain as your map.
-
-
In case that your callback function lives outside the scope of your map the map instance is passed to the callback function as the first argument.
@@ -60,6 +57,14 @@ In case that your callback function lives outside the scope of your map the map
**Note:** If you call ``loadMap`` again, any existing map content will be removed.
+### Deferred syntax
+
+Kartograph now supports the [Deferred object syntax](http://api.jquery.com/category/deferred-object/), too.
+
+ var mymap = Kartograph.map('#map');
+ mymap.loadMap('mymap.svg').done(function() {
+ // do something with your map
+ });
### Advanced options
@@ -75,6 +80,14 @@ The following options are available:
* **valign**: Vertical alignment of the map inside the map container. Possible values are ``top``, ``center``, ``bottom``. Default is ``center``.
* **zoom**: Zoom level. 1 = no zoom
+### Passing SVG as string
+
+In some situations you might not want to load SVGs. As of 0.4.1 you can pass SVG directly as string via ``setMap()``. You don't need to pass a callback function here.
+
+ mymap.setSVG(svgString);
+
+This allows you to handle map loading yourself, for instance in situations where you need to load maps from other servers (cross-origin).
+
## Displaying Map Layers
Each Kartograph SVG map contains one or more layers (stored in SVG groups). Kartograph.js allows you to add these layers to your interactive map. The most simple way to add a layer is to call ``map.addLayer()`` with the layer name as first argument.
View
@@ -48,8 +48,8 @@ <h2 style="margin-top:0">Kartograph.js</h2>
<p>A JavaScript library for creating interactive maps based on Kartograph.py SVG maps.</p>
<ul>
- <li>Data vis friendly</li>
- <li>Runs 100% stand-alone. No tile-server needed.</li>
+ <li>Easy to use: create an interactve map within minutes.</li>
+ <li>Runs 100% stand-alone. No server needed.</li>
<li>Gracefully degrades to Internet Explorer 7+</li>
<li>Built on top of <a href="http://raphaeljs.com/">Raphaël</a> and <a href="http://jquery.com/">jQuery</a>
<li>Licensed under <a href="http://www.gnu.org/licenses/lgpl-3.0">LGPL</a></li>
View
@@ -40,7 +40,7 @@
(function() {
- var Aitoff, Azimuthal, BBox, Balthasart, Behrmann, BlurFilter, Bubble, CEA, CantersModifiedSinusoidalI, Circle, CohenSutherland, Conic, Cylindrical, EckertIV, EquidistantAzimuthal, Equirectangular, Filter, GallPeters, GlowFilter, GoodeHomolosine, Hatano, HoboDyer, HtmlLabel, Icon, Kartograph, LAEA, LCC, LabeledBubble, LatLon, Line, LinearScale, LogScale, LonLat, Loximuthal, MapLayer, MapLayerPath, Mercator, Mollweide, NaturalEarth, Nicolosi, Orthographic, PanAndZoomControl, Path, PieChart, Proj, PseudoConic, PseudoCylindrical, QuantileScale, REbraces, REcomment_string, REfull, REmunged, Robinson, Satellite, Scale, Sinusoidal, SqrtScale, StackedBarChart, Stereographic, SvgLabel, Symbol, SymbolGroup, View, WagnerIV, WagnerV, Winkel3, drawPieChart, filter, kartograph, log, map_layer_path_uid, munge, munged, parsedeclarations, resolve, restore, root, uid, warn, __point_in_polygon, __proj, __type, __verbose__, _base, _base1, _ref, _ref1, _ref2, _ref3, _ref4, _ref5,
+ var $, Aitoff, Azimuthal, BBox, Balthasart, Behrmann, BlurFilter, Bubble, CEA, CantersModifiedSinusoidalI, Circle, CohenSutherland, Conic, Cylindrical, EckertIV, EquidistantAzimuthal, Equirectangular, Filter, GallPeters, GlowFilter, GoodeHomolosine, Hatano, HoboDyer, HtmlLabel, Icon, Kartograph, LAEA, LCC, LabeledBubble, LatLon, Line, LinearScale, LogScale, LonLat, Loximuthal, MapLayer, MapLayerPath, Mercator, Mollweide, NaturalEarth, Nicolosi, Orthographic, PanAndZoomControl, Path, PieChart, Proj, PseudoConic, PseudoCylindrical, QuantileScale, REbraces, REcomment_string, REfull, REmunged, Robinson, Satellite, Scale, Sinusoidal, SqrtScale, StackedBarChart, Stereographic, SvgLabel, Symbol, SymbolGroup, View, WagnerIV, WagnerV, Winkel3, drawPieChart, filter, kartograph, log, map_layer_path_uid, munge, munged, parsedeclarations, resolve, restore, root, uid, warn, __point_in_polygon, __proj, __type, __verbose__, _base, _base1, _ref, _ref1, _ref2, _ref3, _ref4, _ref5,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
@@ -50,7 +50,9 @@
kartograph = root.$K = window.Kartograph = (_ref = root.Kartograph) != null ? _ref : root.Kartograph = {};
- kartograph.version = "0.4.0";
+ kartograph.version = "0.4.1";
+
+ $ = root.jQuery;
__verbose__ = false && (typeof console !== "undefined" && console !== null);
@@ -442,14 +444,16 @@
};
Kartograph.prototype.loadMap = function(mapurl, callback, opts) {
- var me, _base2, _ref4;
+ var def, me, _base2, _ref4;
me = this;
+ def = $.Deferred();
me.clear();
me.opts = opts != null ? opts : {};
if ((_ref4 = (_base2 = me.opts).zoom) == null) {
_base2.zoom = 1;
}
me.mapLoadCallback = callback;
+ me._loadMapDeferred = def;
me._lastMapUrl = mapurl;
if (me.cacheMaps && (kartograph.__mapCache[mapurl] != null)) {
me._mapLoaded(kartograph.__mapCache[mapurl]);
@@ -464,6 +468,18 @@
}
});
}
+ return def.promise();
+ };
+
+ Kartograph.prototype.setMap = function(svg, opts) {
+ var me, _base2, _ref4;
+ me = this;
+ me.opts = opts != null ? opts : {};
+ if ((_ref4 = (_base2 = me.opts).zoom) == null) {
+ _base2.zoom = 1;
+ }
+ me._lastMapUrl = 'string';
+ me._mapLoaded(svg);
};
Kartograph.prototype._mapLoaded = function(xml) {
@@ -479,6 +495,7 @@
xml = $(xml);
} catch (err) {
warn('something went horribly wrong while parsing svg');
+ me._loadMapDeferred.reject('could not parse svg');
return;
}
me.svgSrc = xml;
@@ -500,7 +517,12 @@
zoom = (_ref8 = me.opts.zoom) != null ? _ref8 : 1;
me.viewBC = new kartograph.View(me.viewAB.asBBox(), vp.width * zoom, vp.height * zoom, padding, halign, valign);
me.proj = kartograph.Proj.fromXML($('proj', $view)[0]);
- return me.mapLoadCallback(me);
+ if (me.mapLoadCallback != null) {
+ me.mapLoadCallback(me);
+ }
+ if (me._loadMapDeferred != null) {
+ me._loadMapDeferred.resolve(me);
+ }
};
Kartograph.prototype.addLayer = function(id, opts) {
@@ -4339,11 +4361,10 @@
this.kMeans = __bind(this.kMeans, this);
- var SymbolType, d, dly, i, id, l, layer, maxdly, nid, node, optional, p, required, s, sortBy, sortDir, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _len5, _len6, _m, _n, _o, _ref10, _ref11, _ref6, _ref7, _ref8, _ref9,
- _this = this;
+ var SymbolType, d, dly, i, id, l, layer, maxdly, nid, node, optional, p, required, s, sortBy, sortDir, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _len5, _len6, _m, _n, _o, _ref10, _ref11, _ref6, _ref7, _ref8, _ref9;
me = this;
required = ['data', 'location', 'type', 'map'];
- optional = ['filter', 'tooltip', 'click', 'delay', 'sortBy', 'clustering', 'aggregate', 'clusteringOpts'];
+ optional = ['filter', 'tooltip', 'click', 'delay', 'sortBy', 'clustering', 'aggregate', 'clusteringOpts', 'mouseenter', 'mouseleave'];
for (_i = 0, _len = required.length; _i < _len; _i++) {
p = required[_i];
if (opts[p] != null) {
@@ -4442,21 +4463,45 @@
me.initTooltips();
}
}
- if (__type(me.click) === "function") {
- _ref10 = me.symbols;
- for (_n = 0, _len5 = _ref10.length; _n < _len5; _n++) {
- s = _ref10[_n];
- _ref11 = s.nodes();
- for (_o = 0, _len6 = _ref11.length; _o < _len6; _o++) {
- node = _ref11[_o];
- node.symbol = s;
- $(node).click(function(e) {
- e.stopPropagation();
- return me.click(e.target.symbol.data);
- });
- }
+ _ref10 = me.symbols;
+ for (_n = 0, _len5 = _ref10.length; _n < _len5; _n++) {
+ s = _ref10[_n];
+ _ref11 = s.nodes();
+ for (_o = 0, _len6 = _ref11.length; _o < _len6; _o++) {
+ node = _ref11[_o];
+ node.symbol = s;
}
}
+ $.each(['click', 'mouseenter', 'mouseleave'], function(i, evt) {
+ var _len7, _p, _ref12, _results;
+ if (__type(me[evt]) === "function") {
+ _ref12 = me.symbols;
+ _results = [];
+ for (_p = 0, _len7 = _ref12.length; _p < _len7; _p++) {
+ s = _ref12[_p];
+ _results.push((function() {
+ var _len8, _q, _ref13, _results1,
+ _this = this;
+ _ref13 = s.nodes();
+ _results1 = [];
+ for (_q = 0, _len8 = _ref13.length; _q < _len8; _q++) {
+ node = _ref13[_q];
+ _results1.push($(node)[evt](function(e) {
+ var tgt;
+ tgt = e.target;
+ while (!tgt.symbol) {
+ tgt = $(tgt).parent().get(0);
+ }
+ e.stopPropagation();
+ return me[evt](tgt.symbol.data, tgt.symbol);
+ }));
+ }
+ return _results1;
+ }).call(this));
+ }
+ return _results;
+ }
+ });
me.map.addSymbolGroup(me);
}
@@ -5002,13 +5047,14 @@ function kdtree() {
this.overlaps = __bind(this.overlaps, this);
- var me, _ref6, _ref7, _ref8;
+ var me, _ref6, _ref7;
me = this;
Bubble.__super__.constructor.call(this, opts);
me.radius = (_ref6 = opts.radius) != null ? _ref6 : 4;
- me.style = (_ref7 = opts.style) != null ? _ref7 : '';
+ me.style = opts.style;
+ me.attrs = opts.attrs;
me.title = opts.title;
- me["class"] = (_ref8 = opts["class"]) != null ? _ref8 : 'bubble';
+ me["class"] = (_ref7 = opts["class"]) != null ? _ref7 : 'bubble';
}
Bubble.prototype.overlaps = function(bubble) {
@@ -5045,8 +5091,15 @@ function kdtree() {
cy: me.y,
r: me.radius
});
- path.node.setAttribute('style', me.style);
- path.node.setAttribute('class', me["class"]);
+ if (me.attrs != null) {
+ path.attr(me.attrs);
+ }
+ if (me.style != null) {
+ path.node.setAttribute('style', me.style);
+ }
+ if (me["class"] != null) {
+ path.node.setAttribute('class', me["class"]);
+ }
if (me.title != null) {
path.attr('title', me.title);
}
@@ -5070,7 +5123,7 @@ function kdtree() {
})(Symbol);
- Bubble.props = ['radius', 'style', 'class', 'title'];
+ Bubble.props = ['radius', 'style', 'class', 'title', 'attrs'];
Bubble.layers = [];
@@ -5344,20 +5397,23 @@ function kdtree() {
this.render = __bind(this.render, this);
- var me;
+ var me, _ref6, _ref7;
me = this;
LabeledBubble.__super__.constructor.call(this, opts);
- me.labelattrs = opts.labelattrs;
+ me.labelattrs = (_ref6 = opts.labelattrs) != null ? _ref6 : {};
me.buffer = opts.buffer;
+ me.center = (_ref7 = opts.center) != null ? _ref7 : true;
}
LabeledBubble.prototype.render = function(layers) {
var me;
me = this;
- if (me.buffer) {
- me.bufferlabel = me.layers.mapcanvas.text(me.x, me.y, me.title);
+ if ((me.title != null) && String(me.title).trim() !== '') {
+ if (me.buffer) {
+ me.bufferlabel = me.layers.mapcanvas.text(me.x, me.y, me.title);
+ }
+ me.label = me.layers.mapcanvas.text(me.x, me.y, me.title);
}
- me.label = me.layers.mapcanvas.text(me.x, me.y, me.title);
LabeledBubble.__super__.render.call(this, layers);
return me;
};
@@ -5366,33 +5422,35 @@ function kdtree() {
var attrs, me, vp, x, y;
me = this;
LabeledBubble.__super__.update.apply(this, arguments);
- vp = me.map.viewport;
- attrs = me.labelattrs;
- if (attrs == null) {
- attrs = {};
- }
- x = me.x;
- y = me.y;
- if (x > vp.width * 0.5) {
- attrs['text-anchor'] = 'end';
- x -= me.radius + 5;
- } else if (x < vp.width * 0.5) {
- attrs['text-anchor'] = 'start';
- x += me.radius + 5;
- }
- attrs['x'] = x;
- attrs['y'] = y;
- if (me.buffer) {
- me.bufferlabel.attr(attrs);
- me.bufferlabel.attr({
- stroke: '#fff',
- fill: '#fff',
- 'stroke-linejoin': 'round',
- 'stroke-linecap': 'round',
- 'stroke-width': 6
- });
+ if (me.label != null) {
+ vp = me.map.viewport;
+ attrs = $.extend({}, me.labelattrs);
+ x = me.x;
+ y = me.y;
+ if (me.center) {
+ y -= 0;
+ } else if (x > vp.width * 0.5) {
+ attrs['text-anchor'] = 'end';
+ x -= me.radius + 5;
+ } else if (x < vp.width * 0.5) {
+ attrs['text-anchor'] = 'start';
+ x += me.radius + 5;
+ }
+ attrs['x'] = x;
+ attrs['y'] = y;
+ if (me.buffer) {
+ me.bufferlabel.attr(attrs);
+ me.bufferlabel.attr({
+ stroke: '#fff',
+ fill: '#fff',
+ 'stroke-linejoin': 'round',
+ 'stroke-linecap': 'round',
+ 'stroke-width': 6
+ });
+ }
+ me.label.attr(attrs);
+ me.label.toFront();
}
- me.label.attr(attrs);
return me;
};
@@ -5406,14 +5464,20 @@ function kdtree() {
var me, nodes;
me = this;
nodes = LabeledBubble.__super__.nodes.apply(this, arguments);
+ if (me.label) {
+ nodes.push(me.label.node);
+ }
+ if (me.bufferlabel) {
+ nodes.push(me.bufferlabel.node);
+ }
return nodes;
};
return LabeledBubble;
})(Bubble);
- LabeledBubble.props = ['radius', 'style', 'class', 'title', 'labelattrs', 'buffer'];
+ LabeledBubble.props = ['radius', 'style', 'class', 'title', 'labelattrs', 'buffer', 'center', 'attrs'];
LabeledBubble.layers = [];
View

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 337875b

Please sign in to comment.