Develop Reference

How do you center a layer in a Photoshop script?

My Photoshop Canvas is 900X600.
The function below takes Layer X and makes Layer X copy.
It takes Layer X copy and while maintaining the ratio adjusts the height to 600px. var newdLayer
It takes Layer X and while maintaining the ratio adjusts the width to 900px and applies the Gaussian Blur. var blur.
It then merges Layer X and Layer X copy.
The problem is that if Layer X is not centered in the beginning of the script then it malfunctions.
How to add center layer to Layer X in the beginning of the script?
(function (){
var docRef = activeDocument
var blur = docRef.activeLayer;
var newdLayer = blur.duplicate();
var startRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
// since we resize based on the initial size of the source layer,
// we don't need to get the bounds twice
var bounds = blur.bounds;
var height = bounds[3].value - bounds[1].value;
var width = bounds[2].value - bounds[0].value;
// declare 2 different vars for your sizes (there are better ways to do this, but
// since you say you aren't a JavaScript pro, I figured I'd keep it simple)
var newSize600 = (100 / height) * 600;
var newSize900 = (100 / width) * 900;
// resize your layers
newdLayer.resize(newSize600, newSize600, AnchorPosition.MIDDLECENTER);
blur.resize(newSize900, newSize900, AnchorPosition.MIDDLECENTER);
// apply blur
blur.applyGaussianBlur(5);
// below creates the group, moves the layers to it and merges them. Feel free to just include this part
// at the end of your function if you don't want to use the modified code above.
// create a new layer set
var groupOne = docRef.layerSets.add();
// move the blur layer inside the layer set and name the layer for posterity
blur.move(groupOne, ElementPlacement.INSIDE);
blur.name = "blur";
// move the newdLayer inside and rename
newdLayer.move(groupOne, ElementPlacement.INSIDE);
newdLayer.name = "newdLayer";
// merge the layer set and name the new layer
var mergedGroup = groupOne.merge();
mergedGroup.name = "newdLayer + blur";
app.preferences.rulerUnits = startRulerUnits;
})();

What you need to do is to calculate difference between layer center and document center and then translate the blur layer by that difference before making a copy.
To calculate the layer center you take bound[0].value and bound[1].value (distances from the left top corner of the document to the top left corner of the layer) and add half of the width and half of the height. And then to calculate the deltas you subtract layer center coordinates from document center coordinate.
Here's the code:
(function()
{
var startRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
var docRef = activeDocument;
var blur = docRef.activeLayer;
// since we resize based on the initial size of the source layer,
// we don't need to get the bounds twice
var bounds = blur.bounds;
var height = bounds[3].value - bounds[1].value;
var width = bounds[2].value - bounds[0].value;
/////////////////////////////////////////////////////////////////////////////////////
// Centering the layer
// Getting center coordinates of the document
var docCenterW = docRef.width.as("px") / 2;
var docCenterH = docRef.height.as("px") / 2;
// getting values to translate the layer.
var deltaX = Math.round(docCenterW - (bounds[0].value + width / 2));
var deltaY = Math.round(docCenterH - (bounds[1].value + height / 2));
blur.translate(deltaX, deltaY);
/////////////////////////////////////////////////////////////////////////////////////
var newdLayer = blur.duplicate();
// declare 2 different vars for your sizes (there are better ways to do this, but
// since you say you aren't a JavaScript pro, I figured I'd keep it simple)
var newSize600 = (100 / height) * 600;
var newSize900 = (100 / width) * 900;
// resize your layers
newdLayer.resize(newSize600, newSize600, AnchorPosition.MIDDLECENTER);
blur.resize(newSize900, newSize900, AnchorPosition.MIDDLECENTER);
// apply blur
blur.applyGaussianBlur(5);
// below creates the group, moves the layers to it and merges them. Feel free to just include this part
// at the end of your function if you don't want to use the modified code above.
// create a new layer set
var groupOne = docRef.layerSets.add();
// move the blur layer inside the layer set and name the layer for posterity
blur.move(groupOne, ElementPlacement.INSIDE);
blur.name = "blur";
// move the newdLayer inside and rename
newdLayer.move(groupOne, ElementPlacement.INSIDE);
newdLayer.name = "newdLayer";
// merge the layer set and name the new layer
var mergedGroup = groupOne.merge();
mergedGroup.name = "newdLayer + blur";
app.preferences.rulerUnits = startRulerUnits;
})();

Zoom and position management in MapKit.js

I've created following map using MapKit.js, with hundred of custom annotations, clustering (yellow dots) and callout popup on annotation click.
What I want to do, when clicking on the popup link, is simply to zoom in one step and center view on the clicked annotation (in a responsive context).
In Google Maps, that I'm used to, you simply position map by it's center and zoom level.
In MapKit.js, you use a center/region combo, and honestly I can't understand how this works.
Official doc is unclear to me, and I wasn't able to find really enlightling ressource.
If someone could explain to me how we are supposed to manage zoom level using center / region combo, it would be really appreciated.
Thanks :-)
[EDIT]
This center/region thing still doesn't make sense to me, so I've decided to override MapKit.js with a zoom feature.
Thanks to this post, I've manage to implement the zoom calculation, which seems to be ok.
I need now to implement the set zoom action.
No success yet, this math things are so far now ^^
Any help is highly welcomed :-)
Function:
function MapKitJsZoom(map) {
var LN2 = 0.6931471805599453; // ???
var WH = 256; // World Height
var WW = 256; // World Width
var MAX = 21; // Max zoom level
// GET CURRENT ZOOM.
var latToRad = function (lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
};
var zoom = function (mapPx, worldPx, fraction) {
return (Math.log(mapPx / worldPx / fraction) / LN2);
};
this.get = function () {
var bounds = map.region.toBoundingRegion();
var latFraction = (latToRad(bounds.northLatitude) - latToRad(bounds.southLatitude)) / Math.PI;
var latZoom = zoom(map.element.clientHeight, WH, latFraction);
var lngDiff = bounds.eastLongitude - bounds.westLongitude;
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
var lngZoom = zoom(map.element.clientWidth, WW, lngFraction);
return Math.round(Math.min(latZoom, lngZoom, MAX));
};
// SET CURRENT ZOOM
this.set = function (zoom) {
// TODO
// I need to calculate latitude and longitude deltas
// that correspond to required zoom based on viewport size
// (map.element.clientWidth and map.element.clientHeight)
map.region.span = new mapkit.CoordinateSpan(latitudeDelta, longitudeDelta);
};
}
Usage:
var map = new mapkit.Map("map");
map.zoom = new MapKitJsZoom(map);
map.addEventListener('region-change-end', function () {
console.log(map.zoom.get());
});

There are two methods of accomplishing this:
1) set center then change zoom level
var newCenter = new mapkit.Coordinate(37.792446, -122.399360);
map._impl.zoomLevel--;
map.setCenterAnimated(newCenter, true);
2) set region using center and span (delta in degress)
var newCenter = new mapkit.Coordinate(37.792446, -122.399360);
var span = new mapkit.CoordinateSpan(.01);
var region = new mapkit.CoordinateRegion(newCenter, span);
map.setRegionAnimated(region)

Parametric equation to place a leaflet marker on the circumference of a circle is not precise?

I am working on an application where I have the center of a circle and the radius and I am plotting the circle with the help of Leaflet.
I placed a marker on the north most end of the circumference and made it draggable.
var circle = L.circle(coords, radius).addTo(map);
convertRadiusToLatitude = parseInt(response.radius)/111111;
var coordsOnRadius = [parseFloat(response.lat) + convertRadiusToLatitude, parseFloat(response.long)];
var markerOnRadius = L.marker(coordsOnRadius, {draggable: true}).addTo(map);
Now, this adds the marker to the circumference and now I wanted it to be draggable only on the circumference itself for which I used the parametric equation.
Parametric equation
x = Xc + R * cos(theta)
y = Yc + R * sin(theta)
Code for dragging
markerOnRadius.on('drag', function(e){
bearing = marker.getLatLng().bearingTo(markerOnRadius.getLatLng());
var markerOnRadiusX = parseFloat(response.lat) + ((0.000009 * parseFloat(response.radius)) * Math.cos( toRad(bearing) ));
var markerOnRadiusY = parseFloat(response.long) + ((0.000009 * parseFloat(response.radius)) * Math.sin( toRad(bearing) ));
markerOnRadius.setLatLng([markerOnRadiusX, markerOnRadiusY]);
});
The bearingTo method:
L.LatLng.prototype.bearingTo = function(other) {
var d2r = L.LatLng.DEG_TO_RAD;
var r2d = L.LatLng.RAD_TO_DEG;
var lat1 = this.lat * d2r;
var lat2 = other.lat * d2r;
var dLon = (other.lng-this.lng) * d2r;
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
var brng = Math.atan2(y, x);
brng = parseInt( brng * r2d );
brng = (brng + 360) % 360;
return brng;
};
Issue
When I start dragging the marker, this code is working fine and brings it back to the circumference at the bearing at which the marker is dragged to. But there is one problem, the coords on the circumference are slightly off and in terms of longitude. When the bearing is 0 (north), the coords are perfect, but when it is 90 (east), the longitude is slightly less that it should for the marker to be at the circumference.
Again at 180 (south), coords are perfect, but at 270 (west), the longitude calculated is slightly less and the marker tends towards the radius again.
So basically if you visualize the marker being dragged, it starts perfectly on the north end and starts coming inside the circle slightly increasing with the bearing till it reacher 90 and then starts going towards the circumference again till 180 when it is perfect again.
It forms more like a ellipse if you get the gist of it.
Could anyone tell me why is longitude coming a little off and why the marker moves in an elliptical path. Has it something to do with the world coordinates and window coordinates. Or are my equations slightly off somewhere?

It does look like a projection issue. In your dragging code you are basically doing
lat = a + r cos(baring)
long = b + r sin(baring)
giving a circle in the Lat-Long coordinates. This would work fine if you were at the equator with Mercator projection. You will get more distortion as you move further towards the polls.
Assume you are using the defaults for Leaflet reference doc You have the EPSG3857 Web Mercator coordinates.
If you want to ensure you have a exact circle it will be better to work using screen coordinates. You can get these using methods on the ICRS objects. First get the coordinate system L.CRS.EPSG3857 and use the latLngToPoint and pointToLatLng methods.
var crs = L.CRS.EPSG3857;
var zoom = ...; // how you calculate your zoom factor
markerOnRadius.on('drag', function(e){
var markerLL = marker.getLatLng()
var morLL = markerOnRadius.getLatLng();
var markerP = crs.latLngToPoint(markerLL,zoom);
var morP = crs.latLngToPoint(morLL,zoom);
// get the distance between the two points
var dist = markerP.distanceTo(morP);
// Get the vector from center to point
var A = morP.subtract(markerP);
// scale so its of the desired length
var B = A. multiplyBy( factor / dist);
// Add on the center
var C = markerP.add(B);
// Convert back to LatLong
var D = crs.pointToLatLng(C,zoom);
markerOnRadius.setLatLong(D);
});

Leaflet calculating meters per pixel at zoom level

I am trying to determine a way to calculate the number of meters represented by 1 pixel at a given zoom level and geo centerpoint in Leaflet. Could anyone direct me to the math involved or if there is a way to do this out of the box in leaflet? I am not finding much out there.

You can use the containerPointToLatLng conversion function of L.Map to get the latLngcoordinates for a given pixelcoordinate. If you take one of the first pixel, and one of the next, you can use the distanceTo utility method of L.LatLng to calculate the distance in meters between them. See the following code (assuming map is an instance of L.Map):
var centerLatLng = map.getCenter(); // get map center
var pointC = map.latLngToContainerPoint(centerLatLng); // convert to containerpoint (pixels)
var pointX = [pointC.x + 1, pointC.y]; // add one pixel to x
var pointY = [pointC.x, pointC.y + 1]; // add one pixel to y
// convert containerpoints to latlng's
var latLngC = map.containerPointToLatLng(pointC);
var latLngX = map.containerPointToLatLng(pointX);
var latLngY = map.containerPointToLatLng(pointY);
var distanceX = latLngC.distanceTo(latLngX); // calculate distance between c and x (latitude)
var distanceY = latLngC.distanceTo(latLngY); // calculate distance between c and y (longitude)
That should work, thanks to Jarek Piórkowski for pointing my mistake before the edit.

You can use this to work out the metres per pixel:
metresPerPixel = 40075016.686 * Math.abs(Math.cos(map.getCenter().lat * Math.PI/180)) / Math.pow(2, map.getZoom()+8);

Take a look at openstreetmap.org page on zoom levels. It gives this formula for calculating the meters per pixel:
The distance represented by one pixel (S) is given by
S=C*cos(y)/2^(z+8) where...
C is the (equatorial) circumference of the Earth
z is the zoom level
y is the latitude of where you're interested in the scale.

Correct me if I am wrong, IMHO, the number of meters per pixel = map height in meters / map height in pixels
function metresPerPixel() {
const southEastPoint = map.getBounds().getSouthEast();
const northEastPoint = map.getBounds().getNorthEast();
const mapHeightInMetres = southEastPoint.distanceTo(northEastPoint);
const mapHeightInPixels = map.getSize().y;
return mapHeightInMetres / mapHeightInPixels;
}

mercator projection is not working fine?

I need use mercator projection to point the places by latitude and logitude in my svg application.I have serached a lot and i got these links,
http://en.wikipedia.org/wiki/Mercator_projection
Covert latitude/longitude point to a pixels (x,y) on mercator projection
CODE
//this lat and long is for chicago
var latitude = 41.850033; // (φ)
var longitude = -87.65005229999997; // (λ)
var PI = 3.14;
var mapWidth = 750;
var mapHeight = 380;
// get x value
var x = (mapWidth * (180+longitude) / 360) % mapWidth + (mapWidth / 2);
// convert from degrees to radians
var latRad = latitude * PI / 180;
// get y value
var mercN = Math.log(Math.tan((PI / 4) + (latRad / 2)));
var y = (mapHeight / 2) - (mapWidth * mercN / (2 * PI));
I've used this code in my application, but it doesn't work for me.
Please help to get x and y position from the latitude and longitude.
Any Suggestions should be appreciated.

You forgot the top left and bottom right corner of the map and the factor to multiply the x,y coordinates to give the correct map projection. You can use a fixed map coordinate, i.e. a factor or you can compute the bounding box:Convert lat/lon to pixel coordinate? and then compute the world width and height that fits the map's width and height.