0

Based on this post Convert lat/lon to pixel coordinate?, that works fine with a real Mercator projection.

I'm facing a problem with an svg map from openstreet map, wich use the "Google Mercator projection with simplification on grid(1000)".

I try to plot some cities on my map of France, all points are here but not exactly where they should be see picture

enter image description here

As you can see the cities are not well placed (you can compare on google maps if necessary)

Any idea on how to adapt the code provided in the response to the post in ref, to take in account the differences between these 2 different Mercator projections ?

Thanks in advance

EDIT :

coordinates used for the cities :

var cities = {
    0:{
        cname: 'Paris',
        lat: 48.856614,
        lng: 2.3522219000000177
    },
    1:{
        cname: 'Lyon',
        lat: 45.764043,
        lng: 4.835658999999964
    },
    2:{
        cname: 'Bordeaux',
        lat: 44.837789,
        lng: -0.5791799999999512
    },
    3:{
        cname: 'Bastia',
        lat: 42.697283,
        lng: 9.450880999999981
    },
    4:{
        cname: 'Calais',
        lat: 50.95129000000001,
        lng: 1.8586860000000343
    },
    5:{
        cname: 'Menton',
        lat: 43.774481,
        lng: 7.497540000000072
    },
    6:{
        cname: 'Brest',
        lat: 48.390394,
        lng: -4.4860760000000255
    }
}; //EO cities

The svg was created in Inkscape based on pdf from openmapstreet, the code is a bit long to put it her, I copy paste iti in this fiddle (that does not work because I did not attached Raphel) http://jsfiddle.net/dqsH3/4/.

You can see the original pdf here openstreetmap.fr/f/France-regions-01-01-2013-1000.pdf‎

Community
  • 1
  • 1
phron
  • 1,795
  • 17
  • 23
  • 1
    Can you provide a link to that SVG file, or instructions on how to recreate it? Also include the actual coordinates you used to deaw the cities. Otherwise, we won't have anything to work with. – MvG Nov 30 '13 at 16:47
  • see my edit at the end of post – phron Nov 30 '13 at 17:14
  • The fiddle doesn't work. When I click run nothing happens. Is this normal? – Micromega Nov 30 '13 at 17:49
  • yes it is RapahelJS is not attached – phron Nov 30 '13 at 17:56
  • Why is RaphaelJS not attached? How can we look the error? – Micromega Nov 30 '13 at 18:17
  • Cause I don't know how to attach it. And the problem is not in the way raphael render the map, but in the mercator formulae conversion, cause Google Maps use its own modified version of Mercator projection – phron Nov 30 '13 at 18:53
  • http://jsfiddle.net/dqsH3/ seems like a somewhat working example. – MvG Dec 01 '13 at 11:31
  • This one is a working example http://jsfiddle.net/dqsH3/4/ (I update in my post too) – phron Dec 01 '13 at 11:51
  • Take a shapefile of the areas you drew in. I [already mentioned possible sources](http://stackoverflow.com/questions/18838915/convert-lat-lon-to-pixel-coordinate/18900346?noredirect=1#comment28176798_18900346). Then use these lat/lon coordinates to create SVG polygons, applying *the same transformation* that you use for your cities. This should give you a much better idea of what might be going wrong. My guess is the registration of the maps relative to one another. – MvG Dec 01 '13 at 21:54
  • @Mvg Thanks, as I said in my comment to Phpdna (at the end of this page) I have some contraint on this project, one of these is I cannot use SVG polygons but only SVG paths and I have to use RaphaelJS. My guess at this time, is that the original map I use is not correct. I will try with another map.... – phron Dec 02 '13 at 07:40

1 Answers1

0

The simplification is it uses the wgs 84 datum and the map cannot show the poles. You can try a free shapefile from France. Source:http://en.wikipedia.org/wiki/Google_Maps. I get this map with the Maxmind database and your points.enter image description here

Micromega
  • 12,486
  • 7
  • 35
  • 72
  • In this particular case, I have some constraints :I cannot use shape files and Tiles system as GoogleMaps does, and have to use both RaphaelJS and SVG, alternatives like GoogleMaps API or 3Djs are not possible. The Vincently formula calculate distance between 2 points, and it's not exactly what I need. – phron Dec 01 '13 at 08:21
  • Thanks but as I said in my previous comment, I cannot use polygons (as you do) but paths, I have to use only RaphaelJS with SVG paths and jQuery 1.8.3, others alternatives using other tools are not acceptable in this specific case (no shapes, no polygons, so no shapes files). – phron Dec 01 '13 at 16:06