|
@@ -2,15 +2,12 @@
|
|
* Creates map, draws paths, binds events.
|
|
* Creates map, draws paths, binds events.
|
|
* @constructor
|
|
* @constructor
|
|
* @param {Object} params Parameters to initialize map with.
|
|
* @param {Object} params Parameters to initialize map with.
|
|
- * @param {String} params.map Name of the map in the format <code>territory_proj_lang</code> where <code>territory</code> is a unique code or name of the territory which the map represents (ISO 3166 standard is used where possible), <code>proj</code> is a name of projection used to generate representation of the map on the plane (projections are named according to the conventions of proj4 utility) and <code>lang</code> is a code of the language, used for the names of regions.
|
|
|
|
|
|
+ * @param {String} params.map Name of the map in the format <code>territory_proj_lang</code> where <code>territory</code> is a unique code or name of the territory which the map represents (ISO 3166 alpha 2 standard is used where possible), <code>proj</code> is a name of projection used to generate representation of the map on the plane (projections are named according to the conventions of proj4 utility) and <code>lang</code> is a code of the language, used for the names of regions.
|
|
* @param {String} params.backgroundColor Background color of the map in CSS format.
|
|
* @param {String} params.backgroundColor Background color of the map in CSS format.
|
|
* @param {Boolean} params.zoomOnScroll When set to true map could be zoomed using mouse scroll. Default value is <code>true</code>.
|
|
* @param {Boolean} params.zoomOnScroll When set to true map could be zoomed using mouse scroll. Default value is <code>true</code>.
|
|
- * @param {Boolean} params.zoomOnScrollSpeed Mouse scroll speed. Number from 1 to 10. Default value is <code>3</code>.
|
|
|
|
- * @param {Boolean} params.panOnDrag When set to true, the map pans when being dragged. Default value is <code>true</code>.
|
|
|
|
* @param {Number} params.zoomMax Indicates the maximum zoom ratio which could be reached zooming the map. Default value is <code>8</code>.
|
|
* @param {Number} params.zoomMax Indicates the maximum zoom ratio which could be reached zooming the map. Default value is <code>8</code>.
|
|
* @param {Number} params.zoomMin Indicates the minimum zoom ratio which could be reached zooming the map. Default value is <code>1</code>.
|
|
* @param {Number} params.zoomMin Indicates the minimum zoom ratio which could be reached zooming the map. Default value is <code>1</code>.
|
|
* @param {Number} params.zoomStep Indicates the multiplier used to zoom map with +/- buttons. Default value is <code>1.6</code>.
|
|
* @param {Number} params.zoomStep Indicates the multiplier used to zoom map with +/- buttons. Default value is <code>1.6</code>.
|
|
- * @param {Boolean} params.zoomAnimate Indicates whether or not to animate changing of map zoom with zoom buttons.
|
|
|
|
* @param {Boolean} params.regionsSelectable When set to true regions of the map could be selected. Default value is <code>false</code>.
|
|
* @param {Boolean} params.regionsSelectable When set to true regions of the map could be selected. Default value is <code>false</code>.
|
|
* @param {Boolean} params.regionsSelectableOne Allow only one region to be selected at the moment. Default value is <code>false</code>.
|
|
* @param {Boolean} params.regionsSelectableOne Allow only one region to be selected at the moment. Default value is <code>false</code>.
|
|
* @param {Boolean} params.markersSelectable When set to true markers on the map could be selected. Default value is <code>false</code>.
|
|
* @param {Boolean} params.markersSelectable When set to true markers on the map could be selected. Default value is <code>false</code>.
|
|
@@ -25,27 +22,13 @@
|
|
"stroke-opacity": 1
|
|
"stroke-opacity": 1
|
|
},
|
|
},
|
|
hover: {
|
|
hover: {
|
|
- "fill-opacity": 0.8,
|
|
|
|
- cursor: 'pointer'
|
|
|
|
|
|
+ "fill-opacity": 0.8
|
|
},
|
|
},
|
|
selected: {
|
|
selected: {
|
|
fill: 'yellow'
|
|
fill: 'yellow'
|
|
},
|
|
},
|
|
selectedHover: {
|
|
selectedHover: {
|
|
}
|
|
}
|
|
-}</pre>
|
|
|
|
-* @param {Object} params.regionLabelStyle Set the styles for the regions' labels. Each region or marker has four states: <code>initial</code> (default state), <code>hover</code> (when the mouse cursor is over the region or marker), <code>selected</code> (when region or marker is selected), <code>selectedHover</code> (when the mouse cursor is over the region or marker and it's selected simultaneously). Styles could be set for each of this states. Default value for that parameter is:
|
|
|
|
-<pre>{
|
|
|
|
- initial: {
|
|
|
|
- 'font-family': 'Verdana',
|
|
|
|
- 'font-size': '12',
|
|
|
|
- 'font-weight': 'bold',
|
|
|
|
- cursor: 'default',
|
|
|
|
- fill: 'black'
|
|
|
|
- },
|
|
|
|
- hover: {
|
|
|
|
- cursor: 'pointer'
|
|
|
|
- }
|
|
|
|
}</pre>
|
|
}</pre>
|
|
* @param {Object} params.markerStyle Set the styles for the map's markers. Any parameter suitable for <code>regionStyle</code> could be used as well as numeric parameter <code>r</code> to set the marker's radius. Default value for that parameter is:
|
|
* @param {Object} params.markerStyle Set the styles for the map's markers. Any parameter suitable for <code>regionStyle</code> could be used as well as numeric parameter <code>r</code> to set the marker's radius. Default value for that parameter is:
|
|
<pre>{
|
|
<pre>{
|
|
@@ -59,8 +42,7 @@
|
|
},
|
|
},
|
|
hover: {
|
|
hover: {
|
|
stroke: 'black',
|
|
stroke: 'black',
|
|
- "stroke-width": 2,
|
|
|
|
- cursor: 'pointer'
|
|
|
|
|
|
+ "stroke-width": 2
|
|
},
|
|
},
|
|
selected: {
|
|
selected: {
|
|
fill: 'blue'
|
|
fill: 'blue'
|
|
@@ -68,63 +50,51 @@
|
|
selectedHover: {
|
|
selectedHover: {
|
|
}
|
|
}
|
|
}</pre>
|
|
}</pre>
|
|
- * @param {Object} params.markerLabelStyle Set the styles for the markers' labels. Default value for that parameter is:
|
|
|
|
|
|
+ * @param {Object|Array} params.markers Set of markers to add to the map during initialization. In case of array is provided, codes of markers will be set as string representations of array indexes. Each marker is represented by <code>latLng</code> (array of two numeric values), <code>name</code> (string which will be show on marker's label) and any marker styles.
|
|
|
|
+ * @param {Object} params.series Object with two keys: <code>markers</code> and <code>regions</code>. Each of which is an array of series configs to be applied to the respective map elements. See <a href="jvm.DataSeries.html">DataSeries</a> description for a list of parameters available.
|
|
|
|
+ * @param {Object|String} params.focusOn This parameter sets the initial position and scale of the map viewport. It could be expressed as a string representing region which should be in focus or an object representing coordinates and scale to set. For example to focus on the center of the map at the double scale you can provide the following value:
|
|
<pre>{
|
|
<pre>{
|
|
- initial: {
|
|
|
|
- 'font-family': 'Verdana',
|
|
|
|
- 'font-size': '12',
|
|
|
|
- 'font-weight': 'bold',
|
|
|
|
- cursor: 'default',
|
|
|
|
- fill: 'black'
|
|
|
|
- },
|
|
|
|
- hover: {
|
|
|
|
- cursor: 'pointer'
|
|
|
|
- }
|
|
|
|
|
|
+ x: 0.5,
|
|
|
|
+ y: 0.5,
|
|
|
|
+ scale: 2
|
|
}</pre>
|
|
}</pre>
|
|
- * @param {Object|Array} params.markers Set of markers to add to the map during initialization. In case of array is provided, codes of markers will be set as string representations of array indexes. Each marker is represented by <code>latLng</code> (array of two numeric values), <code>name</code> (string which will be show on marker's tip) and any marker styles.
|
|
|
|
- * @param {Object} params.series Object with two keys: <code>markers</code> and <code>regions</code>. Each of which is an array of series configs to be applied to the respective map elements. See <a href="jvm.DataSeries.html">DataSeries</a> description for a list of parameters available.
|
|
|
|
- * @param {Object|String} params.focusOn This parameter sets the initial position and scale of the map viewport. See <code>setFocus</code> docuemntation for possible parameters.
|
|
|
|
- * @param {Object} params.labels Defines parameters for rendering static labels. Object could contain two keys: <code>regions</code> and <code>markers</code>. Each key value defines configuration object with the following possible options:
|
|
|
|
-<ul>
|
|
|
|
- <li><code>render {Function}</code> - defines method for converting region code or marker index to actual label value.</li>
|
|
|
|
- <li><code>offsets {Object|Function}</code> - provides method or object which could be used to define label offset by region code or marker index.</li>
|
|
|
|
-</ul>
|
|
|
|
-<b>Plase note: static labels feature is not supported in Internet Explorer 8 and below.</b>
|
|
|
|
* @param {Array|Object|String} params.selectedRegions Set initially selected regions.
|
|
* @param {Array|Object|String} params.selectedRegions Set initially selected regions.
|
|
* @param {Array|Object|String} params.selectedMarkers Set initially selected markers.
|
|
* @param {Array|Object|String} params.selectedMarkers Set initially selected markers.
|
|
- * @param {Function} params.onRegionTipShow <code>(Event e, Object tip, String code)</code> Will be called right before the region tip is going to be shown.
|
|
|
|
|
|
+ * @param {Function} params.onRegionLabelShow <code>(Event e, Object label, String code)</code> Will be called right before the region label is going to be shown.
|
|
* @param {Function} params.onRegionOver <code>(Event e, String code)</code> Will be called on region mouse over event.
|
|
* @param {Function} params.onRegionOver <code>(Event e, String code)</code> Will be called on region mouse over event.
|
|
* @param {Function} params.onRegionOut <code>(Event e, String code)</code> Will be called on region mouse out event.
|
|
* @param {Function} params.onRegionOut <code>(Event e, String code)</code> Will be called on region mouse out event.
|
|
* @param {Function} params.onRegionClick <code>(Event e, String code)</code> Will be called on region click event.
|
|
* @param {Function} params.onRegionClick <code>(Event e, String code)</code> Will be called on region click event.
|
|
* @param {Function} params.onRegionSelected <code>(Event e, String code, Boolean isSelected, Array selectedRegions)</code> Will be called when region is (de)selected. <code>isSelected</code> parameter of the callback indicates whether region is selected or not. <code>selectedRegions</code> contains codes of all currently selected regions.
|
|
* @param {Function} params.onRegionSelected <code>(Event e, String code, Boolean isSelected, Array selectedRegions)</code> Will be called when region is (de)selected. <code>isSelected</code> parameter of the callback indicates whether region is selected or not. <code>selectedRegions</code> contains codes of all currently selected regions.
|
|
- * @param {Function} params.onMarkerTipShow <code>(Event e, Object tip, String code)</code> Will be called right before the marker tip is going to be shown.
|
|
|
|
|
|
+ * @param {Function} params.onMarkerLabelShow <code>(Event e, Object label, String code)</code> Will be called right before the marker label is going to be shown.
|
|
* @param {Function} params.onMarkerOver <code>(Event e, String code)</code> Will be called on marker mouse over event.
|
|
* @param {Function} params.onMarkerOver <code>(Event e, String code)</code> Will be called on marker mouse over event.
|
|
* @param {Function} params.onMarkerOut <code>(Event e, String code)</code> Will be called on marker mouse out event.
|
|
* @param {Function} params.onMarkerOut <code>(Event e, String code)</code> Will be called on marker mouse out event.
|
|
* @param {Function} params.onMarkerClick <code>(Event e, String code)</code> Will be called on marker click event.
|
|
* @param {Function} params.onMarkerClick <code>(Event e, String code)</code> Will be called on marker click event.
|
|
* @param {Function} params.onMarkerSelected <code>(Event e, String code, Boolean isSelected, Array selectedMarkers)</code> Will be called when marker is (de)selected. <code>isSelected</code> parameter of the callback indicates whether marker is selected or not. <code>selectedMarkers</code> contains codes of all currently selected markers.
|
|
* @param {Function} params.onMarkerSelected <code>(Event e, String code, Boolean isSelected, Array selectedMarkers)</code> Will be called when marker is (de)selected. <code>isSelected</code> parameter of the callback indicates whether marker is selected or not. <code>selectedMarkers</code> contains codes of all currently selected markers.
|
|
* @param {Function} params.onViewportChange <code>(Event e, Number scale)</code> Triggered when the map's viewport is changed (map was panned or zoomed).
|
|
* @param {Function} params.onViewportChange <code>(Event e, Number scale)</code> Triggered when the map's viewport is changed (map was panned or zoomed).
|
|
*/
|
|
*/
|
|
-jvm.Map = function(params) {
|
|
|
|
|
|
+jvm.WorldMap = function(params) {
|
|
var map = this,
|
|
var map = this,
|
|
e;
|
|
e;
|
|
|
|
|
|
- this.params = jvm.$.extend(true, {}, jvm.Map.defaultParams, params);
|
|
|
|
|
|
+ this.params = jvm.$.extend(true, {}, jvm.WorldMap.defaultParams, params);
|
|
|
|
|
|
- if (!jvm.Map.maps[this.params.map]) {
|
|
|
|
|
|
+ if (!jvm.WorldMap.maps[this.params.map]) {
|
|
throw new Error('Attempt to use map which was not loaded: '+this.params.map);
|
|
throw new Error('Attempt to use map which was not loaded: '+this.params.map);
|
|
}
|
|
}
|
|
|
|
|
|
- this.mapData = jvm.Map.maps[this.params.map];
|
|
|
|
|
|
+ this.mapData = jvm.WorldMap.maps[this.params.map];
|
|
this.markers = {};
|
|
this.markers = {};
|
|
this.regions = {};
|
|
this.regions = {};
|
|
this.regionsColors = {};
|
|
this.regionsColors = {};
|
|
this.regionsData = {};
|
|
this.regionsData = {};
|
|
|
|
|
|
- this.container = jvm.$('<div>').addClass('jvectormap-container');
|
|
|
|
- if (this.params.container) {
|
|
|
|
- this.params.container.append( this.container );
|
|
|
|
- }
|
|
|
|
|
|
+ this.container = jvm.$('<div>').css({width: '100%', height: '100%'}).addClass('jvectormap-container');
|
|
|
|
+ this.params.container.append( this.container );
|
|
this.container.data('mapObject', this);
|
|
this.container.data('mapObject', this);
|
|
|
|
+ this.container.css({
|
|
|
|
+ position: 'relative',
|
|
|
|
+ overflow: 'hidden'
|
|
|
|
+ });
|
|
|
|
|
|
this.defaultWidth = this.mapData.width;
|
|
this.defaultWidth = this.mapData.width;
|
|
this.defaultHeight = this.mapData.height;
|
|
this.defaultHeight = this.mapData.height;
|
|
@@ -132,44 +102,41 @@ jvm.Map = function(params) {
|
|
this.setBackgroundColor(this.params.backgroundColor);
|
|
this.setBackgroundColor(this.params.backgroundColor);
|
|
|
|
|
|
this.onResize = function(){
|
|
this.onResize = function(){
|
|
- map.updateSize();
|
|
|
|
|
|
+ map.setSize();
|
|
}
|
|
}
|
|
jvm.$(window).resize(this.onResize);
|
|
jvm.$(window).resize(this.onResize);
|
|
|
|
|
|
- for (e in jvm.Map.apiEvents) {
|
|
|
|
|
|
+ for (e in jvm.WorldMap.apiEvents) {
|
|
if (this.params[e]) {
|
|
if (this.params[e]) {
|
|
- this.container.bind(jvm.Map.apiEvents[e]+'.jvectormap', this.params[e]);
|
|
|
|
|
|
+ this.container.bind(jvm.WorldMap.apiEvents[e]+'.jvectormap', this.params[e]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
this.canvas = new jvm.VectorCanvas(this.container[0], this.width, this.height);
|
|
this.canvas = new jvm.VectorCanvas(this.container[0], this.width, this.height);
|
|
|
|
|
|
- if (this.params.bindTouchEvents) {
|
|
|
|
- if (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) {
|
|
|
|
|
|
+ if ( ('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch) ) {
|
|
|
|
+ if (this.params.bindTouchEvents) {
|
|
this.bindContainerTouchEvents();
|
|
this.bindContainerTouchEvents();
|
|
- } else if (window.MSGesture) {
|
|
|
|
- this.bindContainerPointerEvents();
|
|
|
|
}
|
|
}
|
|
|
|
+ } else {
|
|
|
|
+ this.bindContainerEvents();
|
|
}
|
|
}
|
|
- this.bindContainerEvents();
|
|
|
|
this.bindElementEvents();
|
|
this.bindElementEvents();
|
|
- this.createTip();
|
|
|
|
|
|
+ this.createLabel();
|
|
if (this.params.zoomButtons) {
|
|
if (this.params.zoomButtons) {
|
|
this.bindZoomButtons();
|
|
this.bindZoomButtons();
|
|
}
|
|
}
|
|
-
|
|
|
|
this.createRegions();
|
|
this.createRegions();
|
|
this.createMarkers(this.params.markers || {});
|
|
this.createMarkers(this.params.markers || {});
|
|
|
|
|
|
- this.updateSize();
|
|
|
|
|
|
+ this.setSize();
|
|
|
|
|
|
if (this.params.focusOn) {
|
|
if (this.params.focusOn) {
|
|
- if (typeof this.params.focusOn === 'string') {
|
|
|
|
- this.params.focusOn = {region: this.params.focusOn};
|
|
|
|
- } else if (jvm.$.isArray(this.params.focusOn)) {
|
|
|
|
- this.params.focusOn = {regions: this.params.focusOn};
|
|
|
|
|
|
+ if (typeof this.params.focusOn === 'object') {
|
|
|
|
+ this.setFocus.call(this, this.params.focusOn.scale, this.params.focusOn.x, this.params.focusOn.y);
|
|
|
|
+ } else {
|
|
|
|
+ this.setFocus.call(this, this.params.focusOn);
|
|
}
|
|
}
|
|
- this.setFocus(this.params.focusOn);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
if (this.params.selectedRegions) {
|
|
if (this.params.selectedRegions) {
|
|
@@ -179,17 +146,12 @@ jvm.Map = function(params) {
|
|
this.setSelectedMarkers(this.params.selectedMarkers);
|
|
this.setSelectedMarkers(this.params.selectedMarkers);
|
|
}
|
|
}
|
|
|
|
|
|
- this.legendCntHorizontal = jvm.$('<div/>').addClass('jvectormap-legend-cnt jvectormap-legend-cnt-h');
|
|
|
|
- this.legendCntVertical = jvm.$('<div/>').addClass('jvectormap-legend-cnt jvectormap-legend-cnt-v');
|
|
|
|
- this.container.append(this.legendCntHorizontal);
|
|
|
|
- this.container.append(this.legendCntVertical);
|
|
|
|
-
|
|
|
|
if (this.params.series) {
|
|
if (this.params.series) {
|
|
this.createSeries();
|
|
this.createSeries();
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
-jvm.Map.prototype = {
|
|
|
|
|
|
+jvm.WorldMap.prototype = {
|
|
transX: 0,
|
|
transX: 0,
|
|
transY: 0,
|
|
transY: 0,
|
|
scale: 1,
|
|
scale: 1,
|
|
@@ -225,7 +187,7 @@ jvm.Map.prototype = {
|
|
/**
|
|
/**
|
|
* Synchronize the size of the map with the size of the container. Suitable in situations where the size of the container is changed programmatically or container is shown after it became visible.
|
|
* Synchronize the size of the map with the size of the container. Suitable in situations where the size of the container is changed programmatically or container is shown after it became visible.
|
|
*/
|
|
*/
|
|
- updateSize: function(){
|
|
|
|
|
|
+ setSize: function(){
|
|
this.width = this.container.width();
|
|
this.width = this.container.width();
|
|
this.height = this.container.height();
|
|
this.height = this.container.height();
|
|
this.resize();
|
|
this.resize();
|
|
@@ -290,8 +252,6 @@ jvm.Map.prototype = {
|
|
this.repositionMarkers();
|
|
this.repositionMarkers();
|
|
}
|
|
}
|
|
|
|
|
|
- this.repositionLabels();
|
|
|
|
-
|
|
|
|
this.container.trigger('viewportChange', [this.scale/this.baseScale, this.transX, this.transY]);
|
|
this.container.trigger('viewportChange', [this.scale/this.baseScale, this.transX, this.transY]);
|
|
},
|
|
},
|
|
|
|
|
|
@@ -301,39 +261,36 @@ jvm.Map.prototype = {
|
|
oldPageY,
|
|
oldPageY,
|
|
map = this;
|
|
map = this;
|
|
|
|
|
|
- if (this.params.panOnDrag) {
|
|
|
|
- this.container.mousemove(function(e){
|
|
|
|
- if (mouseDown) {
|
|
|
|
- map.transX -= (oldPageX - e.pageX) / map.scale;
|
|
|
|
- map.transY -= (oldPageY - e.pageY) / map.scale;
|
|
|
|
|
|
+ this.container.mousemove(function(e){
|
|
|
|
+ if (mouseDown) {
|
|
|
|
+ map.transX -= (oldPageX - e.pageX) / map.scale;
|
|
|
|
+ map.transY -= (oldPageY - e.pageY) / map.scale;
|
|
|
|
|
|
- map.applyTransform();
|
|
|
|
|
|
+ map.applyTransform();
|
|
|
|
|
|
- oldPageX = e.pageX;
|
|
|
|
- oldPageY = e.pageY;
|
|
|
|
- }
|
|
|
|
- return false;
|
|
|
|
- }).mousedown(function(e){
|
|
|
|
- mouseDown = true;
|
|
|
|
oldPageX = e.pageX;
|
|
oldPageX = e.pageX;
|
|
oldPageY = e.pageY;
|
|
oldPageY = e.pageY;
|
|
- return false;
|
|
|
|
- });
|
|
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ }).mousedown(function(e){
|
|
|
|
+ mouseDown = true;
|
|
|
|
+ oldPageX = e.pageX;
|
|
|
|
+ oldPageY = e.pageY;
|
|
|
|
+ return false;
|
|
|
|
+ });
|
|
|
|
|
|
- this.onContainerMouseUp = function(){
|
|
|
|
- mouseDown = false;
|
|
|
|
- };
|
|
|
|
- jvm.$('body').mouseup(this.onContainerMouseUp);
|
|
|
|
- }
|
|
|
|
|
|
+ jvm.$('body').mouseup(function(){
|
|
|
|
+ mouseDown = false;
|
|
|
|
+ });
|
|
|
|
|
|
if (this.params.zoomOnScroll) {
|
|
if (this.params.zoomOnScroll) {
|
|
this.container.mousewheel(function(event, delta, deltaX, deltaY) {
|
|
this.container.mousewheel(function(event, delta, deltaX, deltaY) {
|
|
var offset = jvm.$(map.container).offset(),
|
|
var offset = jvm.$(map.container).offset(),
|
|
centerX = event.pageX - offset.left,
|
|
centerX = event.pageX - offset.left,
|
|
centerY = event.pageY - offset.top,
|
|
centerY = event.pageY - offset.top,
|
|
- zoomStep = Math.pow(1 + map.params.zoomOnScrollSpeed / 1000, event.deltaFactor * event.deltaY);
|
|
|
|
|
|
+ zoomStep = Math.pow(1.3, deltaY);
|
|
|
|
|
|
- map.tip.hide();
|
|
|
|
|
|
+ map.label.hide();
|
|
|
|
|
|
map.setScale(map.scale * zoomStep, centerX, centerY);
|
|
map.setScale(map.scale * zoomStep, centerX, centerY);
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
@@ -368,7 +325,7 @@ jvm.Map.prototype = {
|
|
map.transX -= (touchX - touches[0].pageX) / map.scale;
|
|
map.transX -= (touchX - touches[0].pageX) / map.scale;
|
|
map.transY -= (touchY - touches[0].pageY) / map.scale;
|
|
map.transY -= (touchY - touches[0].pageY) / map.scale;
|
|
map.applyTransform();
|
|
map.applyTransform();
|
|
- map.tip.hide();
|
|
|
|
|
|
+ map.label.hide();
|
|
if (transXOld != map.transX || transYOld != map.transY) {
|
|
if (transXOld != map.transX || transYOld != map.transY) {
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
@@ -386,7 +343,7 @@ jvm.Map.prototype = {
|
|
centerTouchX,
|
|
centerTouchX,
|
|
centerTouchY
|
|
centerTouchY
|
|
)
|
|
)
|
|
- map.tip.hide();
|
|
|
|
|
|
+ map.label.hide();
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
} else {
|
|
} else {
|
|
offset = jvm.$(map.container).offset();
|
|
offset = jvm.$(map.container).offset();
|
|
@@ -417,67 +374,24 @@ jvm.Map.prototype = {
|
|
jvm.$(this.container).bind('touchmove', handleTouchEvent);
|
|
jvm.$(this.container).bind('touchmove', handleTouchEvent);
|
|
},
|
|
},
|
|
|
|
|
|
- bindContainerPointerEvents: function(){
|
|
|
|
- var map = this,
|
|
|
|
- gesture = new MSGesture(),
|
|
|
|
- element = this.container[0],
|
|
|
|
- handlePointerDownEvent = function(e){
|
|
|
|
- gesture.addPointer(e.pointerId);
|
|
|
|
- },
|
|
|
|
- handleGestureEvent = function(e){
|
|
|
|
- var offset,
|
|
|
|
- scale,
|
|
|
|
- transXOld,
|
|
|
|
- transYOld;
|
|
|
|
-
|
|
|
|
- if (e.translationX != 0 || e.translationY != 0) {
|
|
|
|
- transXOld = map.transX;
|
|
|
|
- transYOld = map.transY;
|
|
|
|
- map.transX += e.translationX / map.scale;
|
|
|
|
- map.transY += e.translationY / map.scale;
|
|
|
|
- map.applyTransform();
|
|
|
|
- map.tip.hide();
|
|
|
|
- if (transXOld != map.transX || transYOld != map.transY) {
|
|
|
|
- e.preventDefault();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- if (e.scale != 1) {
|
|
|
|
- map.setScale(
|
|
|
|
- map.scale * e.scale,
|
|
|
|
- e.offsetX,
|
|
|
|
- e.offsetY
|
|
|
|
- )
|
|
|
|
- map.tip.hide();
|
|
|
|
- e.preventDefault();
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- gesture.target = element;
|
|
|
|
- element.addEventListener("MSGestureChange", handleGestureEvent, false);
|
|
|
|
- element.addEventListener("pointerdown", handlePointerDownEvent, false);
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
bindElementEvents: function(){
|
|
bindElementEvents: function(){
|
|
var map = this,
|
|
var map = this,
|
|
- pageX,
|
|
|
|
- pageY,
|
|
|
|
mouseMoved;
|
|
mouseMoved;
|
|
|
|
|
|
- this.container.mousemove(function(e){
|
|
|
|
- if (Math.abs(pageX - e.pageX) + Math.abs(pageY - e.pageY) > 2) {
|
|
|
|
- mouseMoved = true;
|
|
|
|
- }
|
|
|
|
|
|
+ this.container.mousemove(function(){
|
|
|
|
+ mouseMoved = true;
|
|
});
|
|
});
|
|
|
|
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
SVG handling, use with caution. */
|
|
SVG handling, use with caution. */
|
|
this.container.delegate("[class~='jvectormap-element']", 'mouseover mouseout', function(e){
|
|
this.container.delegate("[class~='jvectormap-element']", 'mouseover mouseout', function(e){
|
|
- var baseVal = jvm.$(this).attr('class').baseVal || jvm.$(this).attr('class'),
|
|
|
|
|
|
+ var path = this,
|
|
|
|
+ baseVal = jvm.$(this).attr('class').baseVal ? jvm.$(this).attr('class').baseVal : jvm.$(this).attr('class'),
|
|
type = baseVal.indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
|
|
type = baseVal.indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
|
|
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
|
|
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
|
|
element = type == 'region' ? map.regions[code].element : map.markers[code].element,
|
|
element = type == 'region' ? map.regions[code].element : map.markers[code].element,
|
|
- tipText = type == 'region' ? map.mapData.paths[code].name : (map.markers[code].config.name || ''),
|
|
|
|
- tipShowEvent = jvm.$.Event(type+'TipShow.jvectormap'),
|
|
|
|
|
|
+ labelText = type == 'region' ? map.mapData.paths[code].name : (map.markers[code].config.name || ''),
|
|
|
|
+ labelShowEvent = jvm.$.Event(type+'LabelShow.jvectormap'),
|
|
overEvent = jvm.$.Event(type+'Over.jvectormap');
|
|
overEvent = jvm.$.Event(type+'Over.jvectormap');
|
|
|
|
|
|
if (e.type == 'mouseover') {
|
|
if (e.type == 'mouseover') {
|
|
@@ -486,16 +400,16 @@ jvm.Map.prototype = {
|
|
element.setHovered(true);
|
|
element.setHovered(true);
|
|
}
|
|
}
|
|
|
|
|
|
- map.tip.text(tipText);
|
|
|
|
- map.container.trigger(tipShowEvent, [map.tip, code]);
|
|
|
|
- if (!tipShowEvent.isDefaultPrevented()) {
|
|
|
|
- map.tip.show();
|
|
|
|
- map.tipWidth = map.tip.width();
|
|
|
|
- map.tipHeight = map.tip.height();
|
|
|
|
|
|
+ map.label.text(labelText);
|
|
|
|
+ map.container.trigger(labelShowEvent, [map.label, code]);
|
|
|
|
+ if (!labelShowEvent.isDefaultPrevented()) {
|
|
|
|
+ map.label.show();
|
|
|
|
+ map.labelWidth = map.label.width();
|
|
|
|
+ map.labelHeight = map.label.height();
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
element.setHovered(false);
|
|
element.setHovered(false);
|
|
- map.tip.hide();
|
|
|
|
|
|
+ map.label.hide();
|
|
map.container.trigger(type+'Out.jvectormap', [code]);
|
|
map.container.trigger(type+'Out.jvectormap', [code]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
@@ -503,15 +417,14 @@ jvm.Map.prototype = {
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
SVG handling, use with caution. */
|
|
SVG handling, use with caution. */
|
|
this.container.delegate("[class~='jvectormap-element']", 'mousedown', function(e){
|
|
this.container.delegate("[class~='jvectormap-element']", 'mousedown', function(e){
|
|
- pageX = e.pageX;
|
|
|
|
- pageY = e.pageY;
|
|
|
|
mouseMoved = false;
|
|
mouseMoved = false;
|
|
});
|
|
});
|
|
|
|
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
/* Can not use common class selectors here because of the bug in jQuery
|
|
SVG handling, use with caution. */
|
|
SVG handling, use with caution. */
|
|
- this.container.delegate("[class~='jvectormap-element']", 'mouseup', function(){
|
|
|
|
- var baseVal = jvm.$(this).attr('class').baseVal ? jvm.$(this).attr('class').baseVal : jvm.$(this).attr('class'),
|
|
|
|
|
|
+ this.container.delegate("[class~='jvectormap-element']", 'mouseup', function(e){
|
|
|
|
+ var path = this,
|
|
|
|
+ baseVal = jvm.$(this).attr('class').baseVal ? jvm.$(this).attr('class').baseVal : jvm.$(this).attr('class'),
|
|
type = baseVal.indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
|
|
type = baseVal.indexOf('jvectormap-region') === -1 ? 'marker' : 'region',
|
|
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
|
|
code = type == 'region' ? jvm.$(this).attr('data-code') : jvm.$(this).attr('data-index'),
|
|
clickEvent = jvm.$.Event(type+'Click.jvectormap'),
|
|
clickEvent = jvm.$.Event(type+'Click.jvectormap'),
|
|
@@ -538,21 +451,21 @@ jvm.Map.prototype = {
|
|
jvm.$('<div/>').addClass('jvectormap-zoomout').html('−').appendTo(this.container);
|
|
jvm.$('<div/>').addClass('jvectormap-zoomout').html('−').appendTo(this.container);
|
|
|
|
|
|
this.container.find('.jvectormap-zoomin').click(function(){
|
|
this.container.find('.jvectormap-zoomin').click(function(){
|
|
- map.setScale(map.scale * map.params.zoomStep, map.width / 2, map.height / 2, false, map.params.zoomAnimate);
|
|
|
|
|
|
+ map.setScale(map.scale * map.params.zoomStep, map.width / 2, map.height / 2);
|
|
});
|
|
});
|
|
this.container.find('.jvectormap-zoomout').click(function(){
|
|
this.container.find('.jvectormap-zoomout').click(function(){
|
|
- map.setScale(map.scale / map.params.zoomStep, map.width / 2, map.height / 2, false, map.params.zoomAnimate);
|
|
|
|
|
|
+ map.setScale(map.scale / map.params.zoomStep, map.width / 2, map.height / 2);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
|
|
- createTip: function(){
|
|
|
|
|
|
+ createLabel: function(){
|
|
var map = this;
|
|
var map = this;
|
|
|
|
|
|
- this.tip = jvm.$('<div/>').addClass('jvectormap-tip').appendTo(jvm.$('body'));
|
|
|
|
|
|
+ this.label = jvm.$('<div/>').addClass('jvectormap-label').appendTo(jvm.$('body'));
|
|
|
|
|
|
this.container.mousemove(function(e){
|
|
this.container.mousemove(function(e){
|
|
- var left = e.pageX-15-map.tipWidth,
|
|
|
|
- top = e.pageY-15-map.tipHeight;
|
|
|
|
|
|
+ var left = e.pageX-15-map.labelWidth,
|
|
|
|
+ top = e.pageY-15-map.labelHeight;
|
|
|
|
|
|
if (left < 5) {
|
|
if (left < 5) {
|
|
left = e.pageX + 15;
|
|
left = e.pageX + 15;
|
|
@@ -561,28 +474,18 @@ jvm.Map.prototype = {
|
|
top = e.pageY + 15;
|
|
top = e.pageY + 15;
|
|
}
|
|
}
|
|
|
|
|
|
- map.tip.css({
|
|
|
|
- left: left,
|
|
|
|
- top: top
|
|
|
|
- });
|
|
|
|
|
|
+ if (map.label.is(':visible')) {
|
|
|
|
+ map.label.css({
|
|
|
|
+ left: left,
|
|
|
|
+ top: top
|
|
|
|
+ })
|
|
|
|
+ }
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
|
|
- setScale: function(scale, anchorX, anchorY, isCentered, animate) {
|
|
|
|
- var viewportChangeEvent = jvm.$.Event('zoom.jvectormap'),
|
|
|
|
- interval,
|
|
|
|
- that = this,
|
|
|
|
- i = 0,
|
|
|
|
- count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale))),
|
|
|
|
- scaleStart,
|
|
|
|
- scaleDiff,
|
|
|
|
- transXStart,
|
|
|
|
- transXDiff,
|
|
|
|
- transYStart,
|
|
|
|
- transYDiff,
|
|
|
|
- transX,
|
|
|
|
- transY,
|
|
|
|
- deferred = new jvm.$.Deferred();
|
|
|
|
|
|
+ setScale: function(scale, anchorX, anchorY, isCentered) {
|
|
|
|
+ var zoomStep,
|
|
|
|
+ viewportChangeEvent = jvm.$.Event('zoom.jvectormap');
|
|
|
|
|
|
if (scale > this.params.zoomMax * this.baseScale) {
|
|
if (scale > this.params.zoomMax * this.baseScale) {
|
|
scale = this.params.zoomMax * this.baseScale;
|
|
scale = this.params.zoomMax * this.baseScale;
|
|
@@ -593,77 +496,41 @@ jvm.Map.prototype = {
|
|
if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
|
|
if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
|
|
zoomStep = scale / this.scale;
|
|
zoomStep = scale / this.scale;
|
|
if (isCentered) {
|
|
if (isCentered) {
|
|
- transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2;
|
|
|
|
- transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2;
|
|
|
|
|
|
+ this.transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2;
|
|
|
|
+ this.transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2;
|
|
} else {
|
|
} else {
|
|
- transX = this.transX - (zoomStep - 1) / scale * anchorX;
|
|
|
|
- transY = this.transY - (zoomStep - 1) / scale * anchorY;
|
|
|
|
|
|
+ this.transX -= (zoomStep - 1) / scale * anchorX;
|
|
|
|
+ this.transY -= (zoomStep - 1) / scale * anchorY;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- if (animate && count > 0) {
|
|
|
|
- scaleStart = this.scale;
|
|
|
|
- scaleDiff = (scale - scaleStart) / count;
|
|
|
|
- transXStart = this.transX * this.scale;
|
|
|
|
- transYStart = this.transY * this.scale;
|
|
|
|
- transXDiff = (transX * scale - transXStart) / count;
|
|
|
|
- transYDiff = (transY * scale - transYStart) / count;
|
|
|
|
- interval = setInterval(function(){
|
|
|
|
- i += 1;
|
|
|
|
- that.scale = scaleStart + scaleDiff * i;
|
|
|
|
- that.transX = (transXStart + transXDiff * i) / that.scale;
|
|
|
|
- that.transY = (transYStart + transYDiff * i) / that.scale;
|
|
|
|
- that.applyTransform();
|
|
|
|
- if (i == count) {
|
|
|
|
- clearInterval(interval);
|
|
|
|
- that.container.trigger(viewportChangeEvent, [scale/that.baseScale]);
|
|
|
|
- deferred.resolve();
|
|
|
|
- }
|
|
|
|
- }, 10);
|
|
|
|
- } else {
|
|
|
|
- this.transX = transX;
|
|
|
|
- this.transY = transY;
|
|
|
|
- this.scale = scale;
|
|
|
|
- this.applyTransform();
|
|
|
|
- this.container.trigger(viewportChangeEvent, [scale/this.baseScale]);
|
|
|
|
- deferred.resolve();
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return deferred;
|
|
|
|
|
|
+ this.scale = scale;
|
|
|
|
+ this.applyTransform();
|
|
|
|
+ this.container.trigger(viewportChangeEvent, [scale/this.baseScale]);
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
/**
|
|
* Set the map's viewport to the specific point and set zoom of the map to the specific level. Point and zoom level could be defined in two ways: using the code of some region to focus on or a central point and zoom level as numbers.
|
|
* Set the map's viewport to the specific point and set zoom of the map to the specific level. Point and zoom level could be defined in two ways: using the code of some region to focus on or a central point and zoom level as numbers.
|
|
- * @param This method takes a configuration object as the single argument. The options passed to it are the following:
|
|
|
|
- * @param {Array} params.regions Array of region codes to zoom to.
|
|
|
|
- * @param {String} params.region Region code to zoom to.
|
|
|
|
- * @param {Number} params.scale Map scale to set.
|
|
|
|
- * @param {Number} params.lat Latitude to set viewport to.
|
|
|
|
- * @param {Number} params.lng Longitude to set viewport to.
|
|
|
|
- * @param {Number} params.x Number from 0 to 1 specifying the horizontal coordinate of the central point of the viewport.
|
|
|
|
- * @param {Number} params.y Number from 0 to 1 specifying the vertical coordinate of the central point of the viewport.
|
|
|
|
- * @param {Boolean} params.animate Indicates whether or not to animate the scale change and transition.
|
|
|
|
|
|
+ * @param {Number|String|Array} scale|regionCode|regionCodes If the first parameter of this method is a string or array of strings and there are regions with the these codes, the viewport will be set to show all these regions. Otherwise if the first parameter is a number, the viewport will be set to show the map with provided scale.
|
|
|
|
+ * @param {Number} centerX Number from 0 to 1 specifying the horizontal coordinate of the central point of the viewport.
|
|
|
|
+ * @param {Number} centerY Number from 0 to 1 specifying the vertical coordinate of the central point of the viewport.
|
|
*/
|
|
*/
|
|
- setFocus: function(config){
|
|
|
|
|
|
+ setFocus: function(scale, centerX, centerY){
|
|
var bbox,
|
|
var bbox,
|
|
itemBbox,
|
|
itemBbox,
|
|
newBbox,
|
|
newBbox,
|
|
codes,
|
|
codes,
|
|
- i,
|
|
|
|
- point;
|
|
|
|
-
|
|
|
|
- config = config || {};
|
|
|
|
-
|
|
|
|
- if (config.region) {
|
|
|
|
- codes = [config.region];
|
|
|
|
- } else if (config.regions) {
|
|
|
|
- codes = config.regions;
|
|
|
|
- }
|
|
|
|
|
|
+ i;
|
|
|
|
|
|
- if (codes) {
|
|
|
|
|
|
+ if (jvm.$.isArray(scale) || this.regions[scale]) {
|
|
|
|
+ if (jvm.$.isArray(scale)) {
|
|
|
|
+ codes = scale;
|
|
|
|
+ } else {
|
|
|
|
+ codes = [scale]
|
|
|
|
+ }
|
|
for (i = 0; i < codes.length; i++) {
|
|
for (i = 0; i < codes.length; i++) {
|
|
if (this.regions[codes[i]]) {
|
|
if (this.regions[codes[i]]) {
|
|
- itemBbox = this.regions[codes[i]].element.shape.getBBox();
|
|
|
|
|
|
+ itemBbox = this.regions[codes[i]].element.getBBox();
|
|
if (itemBbox) {
|
|
if (itemBbox) {
|
|
if (typeof bbox == 'undefined') {
|
|
if (typeof bbox == 'undefined') {
|
|
bbox = itemBbox;
|
|
bbox = itemBbox;
|
|
@@ -679,23 +546,15 @@ jvm.Map.prototype = {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return this.setScale(
|
|
|
|
|
|
+ this.setScale(
|
|
Math.min(this.width / bbox.width, this.height / bbox.height),
|
|
Math.min(this.width / bbox.width, this.height / bbox.height),
|
|
- (bbox.x + bbox.width / 2),
|
|
- (bbox.x + bbox.width / 2),
|
|
- (bbox.y + bbox.height / 2),
|
|
- (bbox.y + bbox.height / 2),
|
|
- true,
|
|
|
|
- config.animate
|
|
|
|
|
|
+ true
|
|
);
|
|
);
|
|
} else {
|
|
} else {
|
|
- if (config.lat && config.lng) {
|
|
|
|
- point = this.latLngToPoint(config.lat, config.lng);
|
|
|
|
- config.x = this.transX - point.x / this.scale;
|
|
|
|
- config.y = this.transY - point.y / this.scale;
|
|
|
|
- } else if (config.x && config.y) {
|
|
|
|
- config.x *= -this.defaultWidth;
|
|
|
|
- config.y *= -this.defaultHeight;
|
|
|
|
- }
|
|
|
|
- return this.setScale(config.scale * this.baseScale, config.x, config.y, true, config.animate);
|
|
|
|
|
|
+ scale = scale * this.baseScale;
|
|
|
|
+ this.setScale(scale, - centerX * this.defaultWidth, - centerY * this.defaultHeight, true);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
@@ -788,8 +647,8 @@ jvm.Map.prototype = {
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
/**
|
|
- * Return the instance of Map. Useful when instantiated as a jQuery plug-in.
|
|
|
|
- * @returns {Map}
|
|
|
|
|
|
+ * Return the instance of WorldMap. Useful when instantiated as a jQuery plug-in.
|
|
|
|
+ * @returns {WorldMap}
|
|
*/
|
|
*/
|
|
getMapObject: function(){
|
|
getMapObject: function(){
|
|
return this;
|
|
return this;
|
|
@@ -808,23 +667,15 @@ jvm.Map.prototype = {
|
|
region,
|
|
region,
|
|
map = this;
|
|
map = this;
|
|
|
|
|
|
- this.regionLabelsGroup = this.regionLabelsGroup || this.canvas.addGroup();
|
|
|
|
-
|
|
|
|
for (key in this.mapData.paths) {
|
|
for (key in this.mapData.paths) {
|
|
- region = new jvm.Region({
|
|
|
|
- map: this,
|
|
|
|
- path: this.mapData.paths[key].path,
|
|
|
|
- code: key,
|
|
|
|
- style: jvm.$.extend(true, {}, this.params.regionStyle),
|
|
|
|
- labelStyle: jvm.$.extend(true, {}, this.params.regionLabelStyle),
|
|
|
|
- canvas: this.canvas,
|
|
|
|
- labelsGroup: this.regionLabelsGroup,
|
|
|
|
- label: this.canvas.mode != 'vml' ? (this.params.labels && this.params.labels.regions) : null
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- jvm.$(region.shape).bind('selected', function(e, isSelected){
|
|
|
|
- map.container.trigger('regionSelected.jvectormap', [jvm.$(this.node).attr('data-code'), isSelected, map.getSelectedRegions()]);
|
|
|
|
|
|
+ region = this.canvas.addPath({
|
|
|
|
+ d: this.mapData.paths[key].path,
|
|
|
|
+ "data-code": key
|
|
|
|
+ }, jvm.$.extend(true, {}, this.params.regionStyle));
|
|
|
|
+ jvm.$(region.node).bind('selected', function(e, isSelected){
|
|
|
|
+ map.container.trigger('regionSelected.jvectormap', [jvm.$(this).attr('data-code'), isSelected, map.getSelectedRegions()]);
|
|
});
|
|
});
|
|
|
|
+ region.addClass('jvectormap-region jvectormap-element');
|
|
this.regions[key] = {
|
|
this.regions[key] = {
|
|
element: region,
|
|
element: region,
|
|
config: this.mapData.paths[key]
|
|
config: this.mapData.paths[key]
|
|
@@ -841,7 +692,6 @@ jvm.Map.prototype = {
|
|
map = this;
|
|
map = this;
|
|
|
|
|
|
this.markersGroup = this.markersGroup || this.canvas.addGroup();
|
|
this.markersGroup = this.markersGroup || this.canvas.addGroup();
|
|
- this.markerLabelsGroup = this.markerLabelsGroup || this.canvas.addGroup();
|
|
|
|
|
|
|
|
if (jvm.$.isArray(markers)) {
|
|
if (jvm.$.isArray(markers)) {
|
|
markersArray = markers.slice();
|
|
markersArray = markers.slice();
|
|
@@ -856,21 +706,14 @@ jvm.Map.prototype = {
|
|
point = this.getMarkerPosition( markerConfig );
|
|
point = this.getMarkerPosition( markerConfig );
|
|
|
|
|
|
if (point !== false) {
|
|
if (point !== false) {
|
|
- marker = new jvm.Marker({
|
|
|
|
- map: this,
|
|
|
|
- style: jvm.$.extend(true, {}, this.params.markerStyle, {initial: markerConfig.style || {}}),
|
|
|
|
- labelStyle: jvm.$.extend(true, {}, this.params.markerLabelStyle),
|
|
|
|
- index: i,
|
|
|
|
|
|
+ marker = this.canvas.addCircle({
|
|
|
|
+ "data-index": i,
|
|
cx: point.x,
|
|
cx: point.x,
|
|
- cy: point.y,
|
|
|
|
- group: this.markersGroup,
|
|
|
|
- canvas: this.canvas,
|
|
|
|
- labelsGroup: this.markerLabelsGroup,
|
|
|
|
- label: this.canvas.mode != 'vml' ? (this.params.labels && this.params.labels.markers) : null
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- jvm.$(marker.shape).bind('selected', function(e, isSelected){
|
|
|
|
- map.container.trigger('markerSelected.jvectormap', [jvm.$(this.node).attr('data-index'), isSelected, map.getSelectedMarkers()]);
|
|
|
|
|
|
+ cy: point.y
|
|
|
|
+ }, jvm.$.extend(true, {}, this.params.markerStyle, {initial: markerConfig.style || {}}), this.markersGroup);
|
|
|
|
+ marker.addClass('jvectormap-marker jvectormap-element');
|
|
|
|
+ jvm.$(marker.node).bind('selected', function(e, isSelected){
|
|
|
|
+ map.container.trigger('markerSelected.jvectormap', [jvm.$(this).attr('data-index'), isSelected, map.getSelectedMarkers()]);
|
|
});
|
|
});
|
|
if (this.markers[i]) {
|
|
if (this.markers[i]) {
|
|
this.removeMarkers([i]);
|
|
this.removeMarkers([i]);
|
|
@@ -892,20 +735,8 @@ jvm.Map.prototype = {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
- repositionLabels: function() {
|
|
|
|
- var key;
|
|
|
|
-
|
|
|
|
- for (key in this.regions) {
|
|
|
|
- this.regions[key].element.updateLabelPosition();
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- for (key in this.markers) {
|
|
|
|
- this.markers[key].element.updateLabelPosition();
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
getMarkerPosition: function(markerConfig) {
|
|
getMarkerPosition: function(markerConfig) {
|
|
- if (jvm.Map.maps[this.params.map].projection) {
|
|
|
|
|
|
+ if (jvm.WorldMap.maps[this.params.map].projection) {
|
|
return this.latLngToPoint.apply(this, markerConfig.latLng || [0, 0]);
|
|
return this.latLngToPoint.apply(this, markerConfig.latLng || [0, 0]);
|
|
} else {
|
|
} else {
|
|
return {
|
|
return {
|
|
@@ -932,9 +763,7 @@ jvm.Map.prototype = {
|
|
|
|
|
|
for (i = 0; i < seriesData.length; i++) {
|
|
for (i = 0; i < seriesData.length; i++) {
|
|
values = {};
|
|
values = {};
|
|
- if (typeof seriesData[i] !== 'undefined') {
|
|
|
|
- values[key] = seriesData[i];
|
|
|
|
- }
|
|
|
|
|
|
+ values[key] = seriesData[i];
|
|
data.push(values);
|
|
data.push(values);
|
|
}
|
|
}
|
|
this.addMarkers(markers, data);
|
|
this.addMarkers(markers, data);
|
|
@@ -989,10 +818,13 @@ jvm.Map.prototype = {
|
|
*/
|
|
*/
|
|
latLngToPoint: function(lat, lng) {
|
|
latLngToPoint: function(lat, lng) {
|
|
var point,
|
|
var point,
|
|
- proj = jvm.Map.maps[this.params.map].projection,
|
|
|
|
|
|
+ proj = jvm.WorldMap.maps[this.params.map].projection,
|
|
centralMeridian = proj.centralMeridian,
|
|
centralMeridian = proj.centralMeridian,
|
|
|
|
+ width = this.width - this.baseTransX * 2 * this.baseScale,
|
|
|
|
+ height = this.height - this.baseTransY * 2 * this.baseScale,
|
|
inset,
|
|
inset,
|
|
- bbox;
|
|
|
|
|
|
+ bbox,
|
|
|
|
+ scaleFactor = this.scale / this.baseScale;
|
|
|
|
|
|
if (lng < (-180 + centralMeridian)) {
|
|
if (lng < (-180 + centralMeridian)) {
|
|
lng += 360;
|
|
lng += 360;
|
|
@@ -1022,9 +854,9 @@ jvm.Map.prototype = {
|
|
* @param {Number} y Y-axis of point on map in pixels.
|
|
* @param {Number} y Y-axis of point on map in pixels.
|
|
*/
|
|
*/
|
|
pointToLatLng: function(x, y) {
|
|
pointToLatLng: function(x, y) {
|
|
- var proj = jvm.Map.maps[this.params.map].projection,
|
|
|
|
|
|
+ var proj = jvm.WorldMap.maps[this.params.map].projection,
|
|
centralMeridian = proj.centralMeridian,
|
|
centralMeridian = proj.centralMeridian,
|
|
- insets = jvm.Map.maps[this.params.map].insets,
|
|
|
|
|
|
+ insets = jvm.WorldMap.maps[this.params.map].insets,
|
|
i,
|
|
i,
|
|
inset,
|
|
inset,
|
|
bbox,
|
|
bbox,
|
|
@@ -1050,7 +882,7 @@ jvm.Map.prototype = {
|
|
},
|
|
},
|
|
|
|
|
|
getInsetForPoint: function(x, y){
|
|
getInsetForPoint: function(x, y){
|
|
- var insets = jvm.Map.maps[this.params.map].insets,
|
|
|
|
|
|
+ var insets = jvm.WorldMap.maps[this.params.map].insets,
|
|
i,
|
|
i,
|
|
bbox;
|
|
bbox;
|
|
|
|
|
|
@@ -1075,8 +907,7 @@ jvm.Map.prototype = {
|
|
for (i = 0; i < this.params.series[key].length; i++) {
|
|
for (i = 0; i < this.params.series[key].length; i++) {
|
|
this.series[key][i] = new jvm.DataSeries(
|
|
this.series[key][i] = new jvm.DataSeries(
|
|
this.params.series[key][i],
|
|
this.params.series[key][i],
|
|
- this[key],
|
|
|
|
- this
|
|
|
|
|
|
+ this[key]
|
|
);
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -1086,25 +917,21 @@ jvm.Map.prototype = {
|
|
* Gracefully remove the map and and all its accessories, unbind event handlers.
|
|
* Gracefully remove the map and and all its accessories, unbind event handlers.
|
|
*/
|
|
*/
|
|
remove: function(){
|
|
remove: function(){
|
|
- this.tip.remove();
|
|
|
|
|
|
+ this.label.remove();
|
|
this.container.remove();
|
|
this.container.remove();
|
|
jvm.$(window).unbind('resize', this.onResize);
|
|
jvm.$(window).unbind('resize', this.onResize);
|
|
- jvm.$('body').unbind('mouseup', this.onContainerMouseUp);
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
-jvm.Map.maps = {};
|
|
|
|
-jvm.Map.defaultParams = {
|
|
|
|
|
|
+jvm.WorldMap.maps = {};
|
|
|
|
+jvm.WorldMap.defaultParams = {
|
|
map: 'world_mill_en',
|
|
map: 'world_mill_en',
|
|
backgroundColor: '#505050',
|
|
backgroundColor: '#505050',
|
|
zoomButtons: true,
|
|
zoomButtons: true,
|
|
zoomOnScroll: true,
|
|
zoomOnScroll: true,
|
|
- zoomOnScrollSpeed: 3,
|
|
|
|
- panOnDrag: true,
|
|
|
|
zoomMax: 8,
|
|
zoomMax: 8,
|
|
zoomMin: 1,
|
|
zoomMin: 1,
|
|
zoomStep: 1.6,
|
|
zoomStep: 1.6,
|
|
- zoomAnimate: true,
|
|
|
|
regionsSelectable: false,
|
|
regionsSelectable: false,
|
|
markersSelectable: false,
|
|
markersSelectable: false,
|
|
bindTouchEvents: true,
|
|
bindTouchEvents: true,
|
|
@@ -1117,8 +944,7 @@ jvm.Map.defaultParams = {
|
|
"stroke-opacity": 1
|
|
"stroke-opacity": 1
|
|
},
|
|
},
|
|
hover: {
|
|
hover: {
|
|
- "fill-opacity": 0.8,
|
|
|
|
- cursor: 'pointer'
|
|
|
|
|
|
+ "fill-opacity": 0.8
|
|
},
|
|
},
|
|
selected: {
|
|
selected: {
|
|
fill: 'yellow'
|
|
fill: 'yellow'
|
|
@@ -1126,18 +952,6 @@ jvm.Map.defaultParams = {
|
|
selectedHover: {
|
|
selectedHover: {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- regionLabelStyle: {
|
|
|
|
- initial: {
|
|
|
|
- 'font-family': 'Verdana',
|
|
|
|
- 'font-size': '12',
|
|
|
|
- 'font-weight': 'bold',
|
|
|
|
- cursor: 'default',
|
|
|
|
- fill: 'black'
|
|
|
|
- },
|
|
|
|
- hover: {
|
|
|
|
- cursor: 'pointer'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
markerStyle: {
|
|
markerStyle: {
|
|
initial: {
|
|
initial: {
|
|
fill: 'grey',
|
|
fill: 'grey',
|
|
@@ -1149,38 +963,25 @@ jvm.Map.defaultParams = {
|
|
},
|
|
},
|
|
hover: {
|
|
hover: {
|
|
stroke: 'black',
|
|
stroke: 'black',
|
|
- "stroke-width": 2,
|
|
|
|
- cursor: 'pointer'
|
|
|
|
|
|
+ "stroke-width": 2
|
|
},
|
|
},
|
|
selected: {
|
|
selected: {
|
|
fill: 'blue'
|
|
fill: 'blue'
|
|
},
|
|
},
|
|
selectedHover: {
|
|
selectedHover: {
|
|
}
|
|
}
|
|
- },
|
|
|
|
- markerLabelStyle: {
|
|
|
|
- initial: {
|
|
|
|
- 'font-family': 'Verdana',
|
|
|
|
- 'font-size': '12',
|
|
|
|
- 'font-weight': 'bold',
|
|
|
|
- cursor: 'default',
|
|
|
|
- fill: 'black'
|
|
|
|
- },
|
|
|
|
- hover: {
|
|
|
|
- cursor: 'pointer'
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
};
|
|
};
|
|
-jvm.Map.apiEvents = {
|
|
|
|
- onRegionTipShow: 'regionTipShow',
|
|
|
|
|
|
+jvm.WorldMap.apiEvents = {
|
|
|
|
+ onRegionLabelShow: 'regionLabelShow',
|
|
onRegionOver: 'regionOver',
|
|
onRegionOver: 'regionOver',
|
|
onRegionOut: 'regionOut',
|
|
onRegionOut: 'regionOut',
|
|
onRegionClick: 'regionClick',
|
|
onRegionClick: 'regionClick',
|
|
onRegionSelected: 'regionSelected',
|
|
onRegionSelected: 'regionSelected',
|
|
- onMarkerTipShow: 'markerTipShow',
|
|
|
|
|
|
+ onMarkerLabelShow: 'markerLabelShow',
|
|
onMarkerOver: 'markerOver',
|
|
onMarkerOver: 'markerOver',
|
|
onMarkerOut: 'markerOut',
|
|
onMarkerOut: 'markerOut',
|
|
onMarkerClick: 'markerClick',
|
|
onMarkerClick: 'markerClick',
|
|
onMarkerSelected: 'markerSelected',
|
|
onMarkerSelected: 'markerSelected',
|
|
onViewportChange: 'viewportChange'
|
|
onViewportChange: 'viewportChange'
|
|
-};
|
|
|
|
|
|
+};
|