We Keep Coding

Translate a geojson polygon to different coordinates

I'm trying to move a geoJSON polygon (the outline of a city's administrative borders) from it's original location to another arbitrary one, maintaining its shape while respecting the Mercator projection. Much like how this site does it: https://thetruesize.com/
I've experimented with moving images around the map and those do respect the mercator projection when moved north, but this isn't ideal as the geoJSON would have to be converted to an image on the fly...
Is there an easy way to do this in mapbox without modifying the entire geoJSON to new coordinates?
Thanks!

transformTranslate from Turf.js can help you to translate GeoJSON features or geometries.
I sometimes had some problems when moving polygons across the globe with transformTranslate, so I wrote some function (repl.it) that behaves a bit differently.

Google map overlay for south pole

I was trying to create custom overlay for south pole on google map. However, it was not possible to create accurate overlay. I am working on a project where i need to plot many marks on south pole. We will be getting series of longitude and latitude of south pole and we need to plot that into a map. As google does not have a map for south pole, we need to create a overlay or tiles on google. I have tried both of them however, not successful. Please let me know any idea. I can send you some example that i have done. I have followed this example below. However, can't get what we need because of destortion as well south pole right at the bottom of the map where it is completely grayed out on google map.
https://developers.google.com/maps/documentation/javascript/examples/maptype-image
https://maps.google.co.uk/maps?q=google+map&oe=utf-8&client=firefox-a&ie=UTF-8&ei=5UBVUrm1OITI0QXJ6IGwBw&ved=0CAoQ_AUoAg

The map projection from Google doesn't work for the poles. In my opinion you need a transverse mercator projection. It uses the great circle.

D3 + Leaflet with Albers USA Projection

I'd like to use D3 + Leaflet with the Albers USA projection.
I used Mike Bostock's D3 + Leaflet demonstration as a starting point (found here: http://bost.ocks.org/mike/leaflet/). I'm not sure how to properly use the Albers USA projection. I've encountered a couple problems while trying to figure out how to do this:
I'm not sure how to make Leaflet use the Albers USA projection. I think I might be able to do it using the Proj4Leaflet plugin, but I've been unable to find the parameters that I need to pass to it when creating the CRS that specify Albers USA. I've found some potential configuration strings on spatialreference.org, but I don't know what to specify for origin or resolutions and haven't found anything out there that explains it.
D3's Albers USA projection is returning null for some points in the collection and for the bounds. I'm using the us-states.json file that Mike Bostock used. I found the explanation for that here: https://github.com/mbostock/d3/issues/1287. "[...]it will now return null for points outside the composite projection’s clip extent, since such points would not be displayed when using the projection stream". I'm not sure how to proceed from here. Should I be using a different data set?
If anyone has any advice on how to proceed, I'd greatly appreciate it!

You may have two separate questions, so here are brief answers to both -
1.) Your source data doesn't need to be in Albers-US (which isn't strictly speaking a projection anyway - AK and HI aren't in Mexico) in order to bring it into Leaflet. Here's the US States dataset as GeoJSON, in geographic coordinates: https://gist.github.com/wboykinm/6979292
2.) Whatever the projection of the source data, Leaflet only renders in the Google Mercator projection (The projection you see in the example you started from). If you absolutely must have Albers US, it shouldn't really be a pan-able/zoomable map for reasons of context distortion. Just use Mike's D3 example for a static map: http://bl.ocks.org/mbostock/6320825
If you're determined to make a slippy map for Leaflet using Albers US, who am I to stop you? But that process would require a.) moving of feature geometry in a GIS program, and b.) fooling Tilemill into using the wrong projection as it creates tiles for you to use in Leaflet. Not a recommended course of action.
I would also be remiss if I didn't mention that you can always make your D3 graphic zoomable with d3.behavior.zoom()

how to rotate map orientation with google maps api v3

Very short question - as i can't find an answer in the google maps api V3 documentation
I'm looking for a control which allows me to control/modify an api map's orientation so that north isn't at the top.
Is this possible? If so, how?
Thanks

You can do that with 45 degree imaginery but it only works for specific locations.

OpenLayers is a free, lightweight and very complete javascript mapping API. Just take a look at their example page, it looks awesome (rotation example: https://openlayers.org/en/latest/examples/rotation.html).
OpenLayers can be made to show Google Maps tiles too, which can then be rotated https://gis.stackexchange.com/a/277606/114599

As a workaround, you can rotate its wrapper div instead, using CSS transform: rotate()
*you need to disableDefaultUI, because every element inside will be rotated as well

Currently, Google-Maps-API doesn't have an option to rotate the map (I'm hoping this feature will be soon).
The only way you can rotate a map is if:
mapTypeId is satellite or hybrid
Map zoom set to high value (around 18 or more)
Map tilt is enabled by setting tilt: 45. This parameter will change the map display from a 2D map view into a 3D-like view by tilting the map in 45 degrees.
heading parameter is set to the rotation you would like to have (0, 90, 180 and 270 degrees). This will only work if tilt is enabled.
The visible area on the map is a place that supports map tilt operation (these locations have 4 different satellite images for 4 directions (North, South, East, and West). Not all places on the map have these 4 images therefore not all places on the map can be rotated.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 45.518, lng: -122.672 }, // try to put different location and rotation may not work
zoom: 18, // use a smaller zoom level and rotation may not work
mapTypeId: 'satellite', // use TERRAIN or ROADMAP and rotation will not work
heading: 90,
tilt: 45
});
}
for more info see: https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation

Google Maps doesn't do that. It will always have to face North unfortunately.
I do seem to remember that OpenStreetMaps does spin around, I'm looking for something to confirm that suspicion. Will get back to you in a few.

In the Beta version of Google Map Javascript API, both tilt and heading (as for orientation) are supported, if you use the new vector map format.
first create a new MapId
Use v=beta in your API script tag
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>
include the heading and tilt properties when initializing the map, also with the MapId
remember to enable Use hardware acceleration when available in settings if using Chrome
full instructions can be found here.

Google Maps (the public web version) can indeed do this just like Google Earth can, at any location. Just by using CTRL+Click. But the API version doesn't support that functionality.
See screenshot: https://ibb.co/VBn6Cjv

map geo coordinates (lat, lng) to map (x, y)

I have the geo-coordinates (latidute & longitude) of some cities and would like to get the x,y coordinates so can plot them into a map.
The map is a standart one, just like http://www.wordtravels.com/images/map/Spain/Fuerteventura_map.jpg for example.
I tried several formular I found, but none seems to really work :(. Simple javascript code or ruby would be best :)

There are many ways to approach this problem with varying degrees of precision. However, they all boil down to performing a projection that corresponds with that of your map.
If you know that your map is of the Mercator projection variety, then the lat/long coordinates can simply be treated as X/Y, scaled and translated appropriately. That is, you would find a simple ax+b and cy+d that do the job.
If your map is not Mercator-projection (as it probably isn't if it tries to get the scale consistent, as this one appears to do) then your best bet is to assume it's an "earth-tangent" projection. (This works out OK for small landmasses.) In that case, you need to first project the Lat/Long into a three-dimensional coordinate system.
z=sin(lat)
x=cos(lat)*sin(long)
y=cos(lat)*cos(long)
Positive z points to the north pole. Positive y points to 0, 0, and positive x points to lat 0 long 90 (east) and positive lat/long are north and east. Of course you must convert to radians first.
All of this assumes a spherical Earth, which isn't exactly true but it's close enough unless you're firing long-range mortar rounds.
Anyway, once you have your XYZ, then you'll need to rotate and scale for the map. To rotate around the Z axis, just subtract the base longitude before you project into three dimensions. Do this to center your map on zero-longitude for easiest math.
Once you've done this, you'll only need to rotate the globe forward until your original map is face-front. Do this with a 2-d rotation in the y-z axis. Use http://en.wikipedia.org/wiki/Coordinate_rotations_and_reflections to figure that part out.
Finally, your x,z coordinates are going to line up pretty well with your map's x,y coordinates, for an appropriate scale/translate as described earlier.

in addition to the above answers, there is the open source proj4js library which performs transforms between various map projections. it is used internally by OpenLayers for this kind of thing, and supports a number of popular projections and coordinate systems.

perhaps this will help, i've done a implementation for the US using just javascript.
demo/code: http://the55.net/_11/sketch/us_map

Use the Google Maps API, you can overlay your jpg on the map and position it correctly.
Here is an example
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-hideshow.html
and here is the api page about overlays
http://code.google.com/apis/maps/documentation/javascript/overlays.html

You won't find it easy unless you're working on a very small scale (and close to the Equator). Wikipedia's Geographic coordinate system is a good start...
The easier path could be to make use of something like web mapping and stick with your latitudes and longitudes.