I have a database with spatial data such as areas and points. Some of the areas in my db are coming from OpenStreetMaps, representing some regions. (Which are kinda small at earth's scale, but wide enough to be problematic)

I'm using PostGIS extension to keep them in my db, as GEOMETRY objects (with 4236' id). They're coming with their latitude / longitude values, so they're finally just a succession of points, geolocated. So, my current objective is to project these objects on a map (such as GoogleMap), there come the problems...

Google Map Overlay

I use a custom "overlay" object. Creating my overlay with the svg's envelope (got from ST_Envelope PostGis function). Then, in this "bounding rect", I will draw my svg.

This bounding rectangle is pasted as a div on the map, with the google functions "fromLatLngToDivPixel(bounds)". The div comes then exactly where it has to be drawn.

Drawing the SVG

The bounding rect is the "svg container" on my map. So, inside of it, I come and paste my svg shape. First, I build a "svg object" with attributes that will make it "fit" the div and make the contents (path) visible, such a the viewbox.

For a geo-object coming from 50° North and 2° East and smaller than 1° both sides, then my viewbox looks like : "viewBox='2.00 -50.00 1.00 1.00'".

After that, I have to consider that the container (div) is not at the same scale as the svg' object, so, my current "solution" which is not working is to "scale" my svg to fit all space in the container div : "preserveAspectRatio='none'" AND "style='width:100%;height:100%;'".

At this point, I was about to say "Hell Yeah! I did it!" but...


The svg' points are placed "as if they were directly placed on a lat/lon system" but what I'm actually doing is draw it as a svg on a "2d linear system". Meaning that the distance between 2° east and 3° east is the same as the distance between 3° east and 4° east WHEREVER I'M LOCATED NORTH OR SOUTH! This assumption, which is completely false, brings me to that kind of diplay problem :

Boundary display problem image

At some place of the svg, the boundary I'm drawing perfectly fits the map's boundary. BUT at other places, a small shift is clearly visible on the map, due to this "scale" problem.

Note that, at the very bottom of the map, my boundary is correctly placed! but the more you go north, the more it's shifted...

Concrete example on jsFiddle : http://jsfiddle.net/jLw2umt6/

How to solve?

Couldn't find a decent solution yet, already thought about these :

  • Change from svg to "image" such as png and so on with help of a function like the "fromLatLngToDivPixel" used to place the bounding rectangle...

  • Divide the shape into many many smaller shapes, placed into several smaller bounding rect's (overlays), but performance issues... :/

  • Find a function somewhere, somehow, it's probably already available somewhere, that will, instead of returning the svg as it is now, will return "projected points" based on the svg lng/lat location...

  • Find another way (maybe directly from postgis object or from another tool) to project a shape, area on google map?

  • Find a way to make earth cubic, or completely flat instead of spherical as it is now.

  • I'm now in the same boat as you. Did you ever come up with a solution? – Bobe Jan 24 '18 at 10:00
  • Hi Bobe Jan, Well, i did not find a real solution to my problem. I use smaller items and plot my boundaries parts one by one, one next to another, so each one is correctly positionned on the map and the shift is no more visible. If you ever find a decent solution to this, please let me know :) – Julo0sS Jan 29 '18 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.