emptymap.js - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "emptymap.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A module that helps in navigation of map like pan, zoom and rotation but does nothing itself.",
@@ -5,0 +5,0 @@ "main": "emptymap.js",

README.md

 # emptymap.js
-A module that helps in navigation of map like pan, zoom and rotation but does nothing itself.
+A module that helps with navigation of a map, like pan, zoom and rotation, but does nothing itself.
 
-emptymap.js takes advantage of CSS/SVG transform property. If you render your geojson data (spatial data) on HTML page in form of SVG then this module can easily help in pan, zoom and rotate the SVG map. On SVG drag, pinch and rotate this module calculate the transformation matrix value to be applied to SVG to take effect of the events. The module also calculate the transformation matrix for div that contains map tiles as img tag.  
+emptymap.js takes advantage of CSS/SVG transform property. If you render your geojson data (spatial data) on a HTML page in form of SVG then this module can easily help with panning, zooming and rotating the SVG map. On SVG drag, pinch and rotate this module calculates the transformation matrix needed for the events to take effect. The module also calculates the transformation matrix for a `<div>` that contains map tiles as img tag.  
 
@@ -12,15 +12,14 @@ ## installation
 ## usage & API
-To initiate the instance we need to pass the map SVG/div size and projection extent. In case of spherical (web) mercator projection no need to pass the extent as this is default projection.
+To initiate the instance we need to pass the map SVG/DIV size and projection extent. In case of spherical (web) mercator projection there no need to pass the extent as this is the default projection.
 ```javascript 
-var EmptyMap = require('emptymap.js');
-  size = {width: 714, height: 400},
+var EmptyMap = require('emptymap.js'),
+  size = { width: 714, height: 400 },
   view = {
-    "center":[-9655821.34064295,4238014.557249293],
-    "zoom":4,
-    "rotation":-15
+    center: [-9655821.34064295, 4238014.557249293],
+    zoom: 4,
+    rotation: -15
   }, 
-  em;
-em = new EmptyMap(size); 
-//set the initial view
-em.setView(veiw, function(err,state) {
+  em = new EmptyMap(size);
+
+function updateMap (err, state) {
   // state has the transformation matrices
@@ -31,11 +30,19 @@ if(err) {
   }
+
   //get SVG map layer (where id='svgmap')
-  var svgLayer = document.getElemetnById('svgmap');
-  svgLayer.setAttribute('transform', 'matrix('+state.matrix.join(', ')+')');
+  var svgLayer = document.getElementById('svgmap'),
+    matrix = state.matrix.join(', ');
+  svgLayer.setAttribute('transform', 'matrix(' + matrix + ')');
+
   //get map tile layer (where id='tilemap')
-  var tileLayer = document.getElementById('tilemap');
-  tileLayer.style.transform = 'matrix('+ state.tileMatrix.join(',') + ')';
-  // and of course you need to load the tiles for this view
-});
+  var tileLayer = document.getElementById('tilemap'),
+    tileMatrix = state.tileMatrix.join(',');
+  tileLayer.style.transform = 'matrix(' + tileMatrix + ')';
+  
+  // TODO: of course you need to load the tiles for this view
+}
 
+//set the initial view
+em.setView(view, updateMap);
+
 // now lets pinch and rotate the map
@@ -48,28 +55,17 @@ em.scaleRotate(
   },
-  function(err,state) {
-    if(err) {
-      console.log(err);
-      return;
-    }
-    //get SVG map layer (where id='svgmap')
-    var svgLayer = document.getElemetnById('svgmap');
-    svgLayer.setAttribute('transform', 'matrix('+state.matrix.join(', ')+')');
-    //get map tile layer (where id='tilemap')
-    var tileLayer = document.getElementById('tilemap');
-    tileLayer.style.transform = 'matrix('+ state.tileMatrix.join(',') + ')';
-    // and again you need to load the tiles for the changed view
-  }
+  updateMap
 );
 ```
+
 #### API
 
-#####constructor(viewportSize [,options])
+**constructor(viewportSize [,options])**
 
-Creates emptymap.js instance with maps div's `viewportSize` and other `otpions`
+Creates emptymap.js instance with map div's `viewportSize` and other `options`
 
-`viewportSize` is object with maps div width and height in pixel
+`viewportSize` is the object with map div's width and height in pixel
 ```
 { 
-  width: number
-  height: number
+  width: Number
+  height: Number
 }
@@ -84,9 +80,9 @@ ```
 
-`projExtent` projection extent default spherical mercator extent
+`projExtent` projection extent, default spherical mercator extent
 ```
   projExt: { 
-    left: number 
-    right: number
-    bottom: number
-    top: number
+    left: Number,
+    right: Number,
+    bottom: Number,
+    top: Number
   }
@@ -99,7 +95,6 @@ ```
 view: {
-  cneter: [x,y], // default [0,0]
-  zoom: integer, // default is 0
-  resolution: numbe, // zoom takes precedence over resolution 
-                     // if both are present
-  rotation: number, // in degree default is 0
+  center: [x, y], // default [0, 0]
+  zoom: Integer, // default is 0
+  resolution: Number, // zoom takes precedence over resolution if both are present
+  rotation: Number // in degree default is 0
 }
@@ -112,4 +107,4 @@ ```
   matrix: array of 6 transformation coefficients for svg map
-  tileMatrix: array of 6 transformation coefficient for tile map
-  map: reference the map itself
+  tileMatrix: array of 6 transformation coefficients for tile map
+  map: reference of the map itself
 }
@@ -120,14 +115,20 @@ ```
 ```javascript
-callback: function(error , state) {
-  if(error) {
-    consol.log(error);
+function (err, state) {
+  // state has the transformation matrices
+  if(err) {
+    console.log(err);
     return;
   }
-  // map state can be set as
+
   //get SVG map layer (where id='svgmap')
-  var svgLayer = document.getElemetnById('svgmap');
-  svgLayer.setAttribute('transform', 'matrix('+state.matrix.join(', ')+')');
+  var svgLayer = document.getElementById('svgmap'),
+    matrix = state.matrix.join(', ');
+  svgLayer.setAttribute('transform', 'matrix(' + matrix + ')');
+
   //get map tile layer (where id='tilemap')
-  var tileLayer = document.getElementById('tilemap');
-  tileLayer.style.transform = 'matrix('+ state.tileMatrix.join(',') + ')';
+  var tileLayer = document.getElementById('tilemap'),
+    tileMatrix = state.tileMatrix.join(',');
+  tileLayer.style.transform = 'matrix(' + tileMatrix + ')';
+  
+  // load tiles for new zoom level
 }
@@ -138,14 +139,15 @@ ```
 
-Sets a view to the map whereas parameters are:
-* view: as explained above
-* callback: callback function as explained in constructor 
-* scope: `this` for callback function
+Sets a view to the map with parameters:
+* view: As explained above.
+* callback: Callback function as explained in constructor.
+* scope: `this` for callback function.
 
 **.move(delta [, callback, scope])**
 
-Pans the map by given viewport's delta pixel values for x and y direction. `parameters` are:
-* delta: {deltaX: number, deltaY: number}
-  * deltaX: viewport pixels in x direction
-  * deltaY: viewport pixels in y direction
-* callback: callback function as explained in constructor 
+Pans the map by given viewport's delta pixel values for x and y direction. Parameters are:
+* delta:
+  * `{deltaX: Number, deltaY: Number}`
+  * deltaX: Viewport pixels in x direction.
+  * deltaY: Viewport pixels in y direction.
+* callback: Callback function as explained in constructor.
 * scope: `this` for callback function
@@ -155,14 +157,14 @@
 
-Scale and rotate the map, `params` are:
+Scale and rotate the map. Parameters are:
 * center: [x, y] center position for scale/rotation on viewport in pixels. Default value is center of viewport.
-* factor: float scale factor to zoom in/out the map. Default is 1.
-* rotation: float in degrees, clockwise positive. This is delta rotation to be applied to the map. Default value is 0 degree.
-* callback: callback function as explained in constructor 
-* scope: `this` for callback function
+* factor: Float scale factor to zoom in/out the map. Default is 1.
+* rotation: Float in degrees, clockwise positive. This is the delta rotation to be applied to the map. Default value is 0 degrees.
+* callback: Callback function as explained in constructor. 
+* scope: `this` for callback function.
 
 **.resetTileMatrix([callback, scope])**
 
-Reset tile map matrix so that only rotation transformation is applied, as scale and pan would be null for tile map. This function can be called after every transition/event pan, pinch (scale) and rotatation. During transition/event tileMatrix can be applied to tile layer. Generally callback of this function should also check if tiles need to be loaded for current map state.
-* callback: callback function as explained in constructor 
-* scope: `this` for callback function
+Reset tile map matrix so that only the rotation transformation is applied, as scale and pan would be null for tile map. This function can be called after every transition/event pan, pinch (scale) and rotatation. During transition/event the tile matrix can be applied to the tile layer. Generally the callback of this function should also check if tiles are needed to be loaded for current map state.
+* callback: Callback function as explained in constructor. 
+* scope: `this` for callback function.
 
@@ -179,3 +181,3 @@ **.getCenter**
 
-Returns current rotation of the map in degree (clockwise positive)
+Returns current rotation of the map in degree (clockwise positive).
 
@@ -188,3 +190,3 @@ **.getZoom**
 
-When map state is at fractional zoom it returns the nearest non-fractional zoom value. 
+When map state is at fractional zoom it returns the closest non-fractional zoom value.
 
@@ -196,6 +198,6 @@ **.getView**
 {
-  cetner: array of [x,y]
-  resolution: float
-  zoom: float
-  rotation: float in degrees (clockwise positive)
+  center: Array of [x, y],
+  resolution: Float,
+  zoom: Float,
+  rotation: Float in degrees (clockwise positive)
 }
@@ -228,17 +230,18 @@ ```
 ``` 
-**.toLongLat([x,y])**
+**.toLongLat([x, y])**
 
-Converts viewport pixel coordinates to maps projected coordinates ([x,y]).
+Converts viewport pixel coordinates to maps projected coordinates ([x, y]).
 
-**.toViewport([x,y])**
+**.toViewport([x, y])**
 
-Converts maps projected coordinates to viewport pixel coordinates ([x,y]).
+Converts maps projected coordinates to viewport pixel coordinates ([x, y]).
 
-**Note:** To set center, resolution/zoom and rotation use setView as:
+**Note:** To set center, resolution/zoom and rotation use setView as followed:
 ````javascript
 var view = em.getView();
 view.rotation = 25;
-em.setView(view,function(error, state) {
-  if(error) {
-    console.log(errro);
+
+em.setView(view, function (err, state) {
+  if (err) {
+    console.log(err);
     return;
@@ -245,0 +248,0 @@ }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

257

increased by1.18%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

61736

decreased by-0.43%

No dependency changes