1

I have a Django model which contains the coordinates for a polygon:

geometria = models.PolygonField(srid=4326, null=True, geography=True)

I manually took the lat-long coordinates for a polygon from the Google maps web interface and entered them into the database. I believe the gps coordinates Google maps provide are 4326.

I plotted these coordinates on google maps using @react-google-maps/api and it matches what I expected. (See below image)

Next I tried to replicate the polygon shape using Postgis, and create an SVG of it, but this is where I had problems. As you can see below the green polygon has the same basic shape, but has been stretched horizontally when compared to the output from google maps.

I believe the problem is that the svg is using the 4326 projection, instead of 3857 which is used by google maps? I have tried to transform the data in postgis, but nothing I do seems to make any difference. Note that when I create the svg without the ST_Transform, it is the same shape as below. Any ideas how I can solve this?

Comparison

I am using the following SQL in Django to pull the data from the database:

cursor.execute("SELECT ST_AsSVG(ST_AsEWKT(ST_Transform(ST_AsEWKT(geometria),3857))) FROM public.locations_locationdata WHERE id= %s", [self.id])

Where geometria is the database field which contains the polygon.

I use the following python to build the svg file:

svg_string = []
svg_string.append('<svg viewBox="')
svg_string.append(calculated_view_box)
svg_string.append('" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" transform="scale(1 -1) rotate(90)" transform-origin="256 256">')
svg_string.append('<path fill="green" stroke="blue" stroke-width="1" d="')
svg_string.append(reconstruct_path_string)
svg_string.append('"/></svg>')



<svg viewBox="5735636.0 75092.0 419.0 619.0" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" transform="scale(1 -1) rotate(90)" transform-origin="256 256"><path fill="green" stroke="blue" stroke-width="1" d="M 5736044.89547394 75658.7303669334 L 5735771.38348506 75102.09404005 5735654.72065871 75164.2146256582 5735646.59433588 75700.4781146285 5735842.07136171 75663.4061145318 Z"/></svg>

Any ideas how I can fix the svg so that it matches the google maps shapes?

Jim Jones
  • 18,404
  • 3
  • 35
  • 44
Stephen
  • 53
  • 1
  • 6
  • 1
    I believe the distortion is rather related to the surface you're projecting the image than the area itself. Have you checked the area of both polygons to see if there is any change? – Jim Jones Dec 03 '21 at 13:41
  • GeoDjango (get_ha_by_wgs84_polygon(self.geometria))= 14.320 Hectares. St_Area = 14.3304 Hectares. Online Path to Area Converter = 14.4289 Hectares. Google Earth Polygon = 8.4 Hectares. – Stephen Dec 06 '21 at 13:23
  • 1
    You mean the google earh polygon is about 40% smaller than the one in PostGIS? :O A small difference due to the different surface and projection is expected, but nothing like this. – Jim Jones Dec 06 '21 at 13:41
  • It looks like the get_ha_by_wgs84_polygon function I am using is not what I need to get the correct area, and I have a projection problem – Stephen Dec 06 '21 at 13:47
  • Yes @JimJones the google earth polygon is 40% smaller than from PostGIS, and seems to be due to a one dimensional horizonal distortion. Any ideas where I could have made a mistake? – Stephen Dec 06 '21 at 13:49
  • 1
    oh I see, that explains a lot. I know virtually nothing about google maps API, but when these kind of errors occur it is quite often due to a wrong CRS or wrong transformation. Outside of PostgreSQL I cannot help you much. I will upvote the question, so that it gets more attention. – Jim Jones Dec 06 '21 at 13:58
  • Thanks for your help. I am reading up on CRS in the hopes that something jumps out at me. The google maps api just takes the lat and lng coordinates for each coordinate on the polygon. and plots them for you on the map for you. 1) Save coordinates to database, 2) Read coordinates from database 3) Plot on google maps. It should be fool proof. – Stephen Dec 06 '21 at 14:29
  • @JimJones I just fixed the issue. I had incorrectly transposed the latitude / longitude data when putting it in the postgis. Swap them and all fixed. See below my answer. – Stephen Dec 06 '21 at 17:41

1 Answers1

0

The problem was that I incorrectly transposed the lat and lng values when creating the GEOSGeometry object. I later fixed the transposition when passing the the lat and lng back to Google maps, which hid the problem.

See below:

#polygon = GEOSGeometry('POLYGON ((51.527768 -0.679638,51.525311 -0.674638,51.524263 -0.675196,51.524190 -0.680013,51.525946 -0.679680,51.527768 -0.679638))', srid=4326)
polygon = GEOSGeometry('POLYGON ((-0.679638 51.527768, -0.674638 51.525311, -0.675196 51.524263, -0.680013 51.524190, -0.679680 51.525946, -0.679638 51.527768))', srid=4326)

Coordinates should be (longitude latitude) pairs

Stephen
  • 53
  • 1
  • 6