Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how get proper coordinates to new map #11

Closed
mancho-ged opened this issue Oct 25, 2013 · 19 comments
Closed

how get proper coordinates to new map #11

mancho-ged opened this issue Oct 25, 2013 · 19 comments

Comments

@mancho-ged
Copy link

I am trying to make map of custom country (Tbilisi, georgia) with mapael. Everything is ok, but the plots. I cannot coordinate them properly with latitude and languitude. How can I do this? I tryed to do according to usa map but it don't work :( where and what I should put?

saqartvelos_regionebi : {
width : 844.8,
height : 469.2,
latLngToGrid: function(lat, lng, phi1, phi2, midLng, scale) {
var pi =Math.PI
, midLat = (phi1 + phi2) / 2
, n, tmp1, tmp2, tmp3, x, y, p;

                    n = (Math.sin(phi1 / 180 * pi) + Math.sin(phi2 / 180 * pi)) / 2;
                    tmp1 = Math.sqrt(Math.cos(phi1 / 180 * pi)) + 2 * n * Math.sin(phi1 / 180 * pi);
                    tmp2 = scale * Math.pow(tmp1 - 2 * n * Math.sin(midLat / 180 * pi),0.5) / n;
                    tmp3 = n * (lng - midLng);
                    p = scale * Math.pow(tmp1 - 2 * n * Math.sin(lat / 180 * pi),0.5) / n;
                    x = p * Math.sin(tmp3 / 180 * pi);
                    y = tmp2 - p * Math.cos(tmp3 / 180 * pi);

                    return([x,y]);
                },
                getCoords : function (lat, lon) {
                    var coords = {};
                    if(lat > 43.582132) { // alaska

                        // these are guesses
                        var phi1= 15; // standard parallels
                        var phi2= 105;
                        var midLng = 43.5;
                        var scale = 530;
                        coords = this.latLngToGrid(lat, lon, phi1, phi2, midLng, scale);
                        xOffset = 190;
                        yOffset = 543;
                        scaleX= 1;
                        scaleY= -1;

                    } else if (lon < 40) { // hawaii
                        // Lat: 18°?55' N to 28°?27' N, Lng:154°?48' W to 178°?22' W
                        // (225, 504) to (356, 588) on map

                        // these are guesses
                        var phi1= 0; // standard parallels
                        var phi2= 26;
                        var midLng = 42;
                        var scale = 1280;
                        coords = this.latLngToGrid(lat, lon, phi1, phi2, midLng, scale);
                        xOffset = 115;
                        yOffset = 723;
                        scaleX= 1;
                        scaleY= -1;
                    } else {
                        xOffset = -17;
                        yOffset = -22;
                        scaleX = 10.05;
                        scaleY = 6.26;

                        coords[0] = 50.0 + 124.03149777329222 * ((1.9694462586094064-(lat* Math.PI / 180)) * Math.sin(0.6010514667026994 * (lon + 96) * Math.PI / 180));
                        coords[1] = 50.0 + 1.6155950752393982 * 124.03149777329222 * 0.02613325650382181 - 1.6155950752393982* 124.03149777329222 * (1.3236744353715044- (1.9694462586094064-(lat* Math.PI / 180)) * Math.cos(0.6010514667026994 * (lon + 96) * Math.PI / 180));
                    }
                    return {x : (coords[0] * scaleX + xOffset), y : (coords[1] * scaleY + yOffset)};
                },
@neveldo
Copy link
Owner

neveldo commented Oct 27, 2013

Hello mancho-ged,

In order to be able to locate plots on your map, you have to fill the getCoords() function with the proper algorithm. The algorithm depends on the projection of your map (mercator, miller, ...). More on projections : http://en.wikipedia.org/wiki/Map_projection . The simpliest projection is the equi-rectangular one (http://en.wikipedia.org/wiki/Equirectangular_projection) where you can easily compute x and y coordinates from latitude and longitude :

x = ax long + bx
y = ay lat + by

Do you know what is the projection of your map ?

@mancho-ged
Copy link
Author

No, I don't know. I've got this svg from wikimedia. But Georgia is small country, about half of France. How can I put the coordinates on my map? I don't need to be very accurate, I only want it to work somehow. Where can I get this xoffset and xfactor? what are they? Sorry if I'm asking stupid questions, I am not strong in geography at all.

@neveldo
Copy link
Owner

neveldo commented Oct 28, 2013

I saw this map of Georgia on wikimedia commons that is based on an equi-rectangular projection : http://commons.wikimedia.org/wiki/File:Georgia_location_map.svg.

You have to calculate ax (x factor), bx (x offset), ay (y factor) and by (y offset) in order to be able to convert lat,long to x,y. Here is the method that I've used for the map of France :

For ax and bx : you position two plots on your map by using x and y parameters : one at the most east, and the other at the most west. Then, you get the corresponding longitude for these two plots by using Google Maps.

Now, you have two points where x and corresponding longitude are known. In order to calculate ax and bx from these values, you just have to solve a simple equation with two unknowns (you can use a tool to resolve the equation : http://ncalculators.com/algebra/2-variable-equation-solver.htm)

Then, you have to do exactly the same thing for ay and by. FYI, map of France uses the equi-rectangular projection (with ax, bx, ay and by specifics to the map).

@lyssar
Copy link

lyssar commented Nov 5, 2013

Hi neveldo,
can you explain why you are making the IF Statement?
if (lat < 43.15710 && lon > 8.17199)

I'm trying to understand how to do this for a map of germany (equi-rectangular projection) and I don't really get what I have to do at my getCoords function =/

@lyssar
Copy link

lyssar commented Nov 7, 2013

neveldo could you provide an example for the calculation of france?

@neveldo
Copy link
Owner

neveldo commented Nov 7, 2013

Hello cefuroX,

The if statement is here for the 'Corse' region. This island is closer to France on the map than in the real world. That why there are specific ax (x factor), bx (x offset), ay (y factor) and by (y offset) for this region.

Here is an example to compute ax and bx for the map of France with an equi-rectangular projection :

You have to take a point at the most west of the country on google map in order to retrieve the longitude : https://maps.google.fr/maps?q=48.037692,-4.729042&hl=fr&ll=46.935261,0.834961&spn=8.656949,21.643066&num=1&t=m&z=6 .

Do the same to get the longitude of a point at the most east of the country : https://maps.google.fr/maps?q=48.967597,8.222809&hl=fr&ll=46.392411,3.010254&spn=8.74399,21.643066&num=1&t=m&z=6 .

Then, with mapael, you have to position manually a small point on the map with x and y parameters in order to find the matching x coordinates.

You should now be in front of an equation with two unknowns (this is not real values for the x) :

2 = ax * -4.729042 + bx
658 = ax * 8.222809 + bx

ax and bx are now easy to find with a tool like http://ncalculators.com/algebra/2-variable-equation-solver.htm.

Then, you have to do exactly the same for latitude (y axis). I hope this will help you !

@lyssar
Copy link

lyssar commented Nov 7, 2013

just in case to get it right, for y axis it will be:

Y1 = ay * lat1 + by
Y2 = ay * lat2 + by

Am I right?

@neveldo
Copy link
Owner

neveldo commented Nov 7, 2013

That's it ! For the y axis, you will have to take two points at the most north and at the most south of the map.

@lyssar
Copy link

lyssar commented Nov 7, 2013

Thx! Now it works! ;) I am a little bit brain dead today xD but thx for the help.
have a nice day!

@neveldo
Copy link
Owner

neveldo commented Nov 7, 2013

You are welcome :) Feel free to contribute by adding your new map in the dedicated repository when you are done : https://github.com/neveldo/mapael-maps

@neveldo neveldo closed this as completed Dec 27, 2013
@guarder
Copy link

guarder commented Dec 28, 2013

Hi neveldo

you give an example
2 = ax * -4.729042 + bx
658 = ax * 8.222809 + bx
what this mean about 2 or 658?

I do not how to get x1, x2, y1, y2.
x1 = ax * 135 + bx
x2 = ax * 73 + bx
y1 = ay * 53.33 + by
y2 = ay * 3.50 + by

@neveldo
Copy link
Owner

neveldo commented Dec 30, 2013

Hi,

2 is the x coordinate of a point at the most west of the map from mapael and that matches with the longitude -4.729042.
658 is the x coordinate of a point at the most east of the map from mapael that matches with the longitude 8.222809.

When you have an equation like :

2 = ax * -4.729042 + bx
658 = ax * 8.222809 + bx

You can easily resolve it with a small tool like : http://ncalculators.com/algebra/2-variable-equation-solver.htm

This is the way to get ax and bx in order to translate a longitude to a x coordinate. You have to do the same in order to get ay and by to translate a latitude to an y coordinate. Be carefull, it will only works for maps with an equi-rectangular projection.

@neveldo neveldo reopened this Dec 30, 2013
@guarder
Copy link

guarder commented Dec 31, 2013

Thanks for your prompt reply.
It will help me a lot.

@jadirpuppin
Copy link

Com todas as explicações, ainda estou com dúvidas. Talvez por não dominar a língua inglesa.
Por acaso existe algum passo a passo com screenshot para criar um mapa personalizado?
Transformei o arquivo SVG em Mapael, peguei as informações de Latitude no Google maps, mas não sei como usa-los, apesar de estar explicado aí em cima. Se puder me ajudar, agradeço. Preciso muito disso.

O mapa é esse: https://goo.gl/maps/WHHGn

@neveldo
Copy link
Owner

neveldo commented Mar 23, 2015

Hello,

Sorry, I don't speak portuguese, but here is a complete tutorial to create your own map for Mapael : http://www.vincentbroute.fr/mapael/create-map.php . I hope it will help you !

@jadirpuppin
Copy link

Can anyone help me generate the coordinates with the data below?

espirito santo - google maps

(SVG)
https://docs.google.com/file/d/0B8Lb7_0Kk1HRTFo2QmhjMzF2R2M/edit

(CustomMAP.js)
https://drive.google.com/open?id=0B8Lb7_0Kk1HRTFVWVjRLdi1ENTA&authuser=0

@neveldo
Copy link
Owner

neveldo commented Mar 29, 2015

Hello,

I think there is an error with the width and height attributes of your map. The width should be close to 800 and the height should be close to 1225. Ensure that you have ungrouped all SVG objects through Inskcape (you shouldn't not have any element in the XML editor), then go to the document properties, and click on "resize page to drawing".

Regarding the getCoords() function, the latitudes and longitudes you've picked up on Google Maps seems to be right. Then , you just have to do the same thing on your mapael map. You can position points by x and y on your map. You have to find the x coordinates that match the west and east longitudes you have picked up, and do the same for the north and south latitudes.

$(function(){
    $(".container1").mapael({
        map : {
            // Set the name of the map to display
            name : "france_departments",
        },
        plots : {
          p1 : {
            x : 100,
            y : 50,
            size : 5
          }
        }
    });
});

Then, you just have to fill this form in order to get the getCoords() function content : http://www.vincentbroute.fr/mapael/getcoords.php . It just resolves the equations with two unknowns.

@jadirpuppin
Copy link

All right. Thank you very much.

@Indigo744
Copy link
Collaborator

All issue seems to be resolved. This thread will be closed. Feel free to open a new issue if you have any problem. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants