Search code examples
javascriptgoogle-mapsgoogle-maps-api-3map-projections

Negate Mercator Projection


I use Google Maps to use an image as a map via Image Map Types. This map is from a computer game and therefore fictitious. But it contains streets and buildings. I created the possibility to border these buildings by adding circles which serve as path points for a polygon. To edit the polygon the path points remain visible as draggable circles.

The problem is that these circles get bigger and bigger to the north or south, even though they have the same radius.

I know that this is because Google Maps assumes that it is a sphere and therefore uses the Mercator Projection to calculate the radius of the circles.

I have already tried to solve this problem by creating a projection of my own. But this does not work as desired.

I have tried the following projection:

fromLatLngToPoint: function (latLng, opt_point) {
    let point               = opt_point || new google.maps.Point(0, 0),
        TILE_SIZE           = 256,
        origin              = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2),
        pixelsPerLonDegree_ = TILE_SIZE / 360,
        pixelsPerLatDegree_ = TILE_SIZE / 180

    point.x = origin.x + latLng.lng() * pixelsPerLonDegree_
    point.y = origin.y + latLng.lat() * pixelsPerLatDegree_

    return point
},

fromPointToLatLng: function (point) {
    let TILE_SIZE           = 256,
        origin              = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2),
        pixelsPerLonDegree_ = TILE_SIZE / 360,
        pixelsPerLatDegree_ = TILE_SIZE / 180,
        lng                 = (point.x - origin.x) / pixelsPerLonDegree_,
        lat                 = (point.y - origin.y) / pixelsPerLatDegree_

    return new google.maps.LatLng(lat, lng)
},

With this projection a circle in the middle of the map (0,0) is shown as an egg and gets wider the further the circle gets to the north or south.

I simply cannot figure out why the circle changes its shape.


Solution

  • There is currently no workaround to negate Mercator Projection as this what the Maps JavaScript API uses according to this documentation. There is already a feature request filed in Google's Public Issue Tracker to not use Mercator Projection.

    You can check it here: https://issuetracker.google.com/111576221

    To express your interest, please star the issue to get updates and leave comments for additional information.