Comments (19)
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 ?
from jquery-mapael.
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.
from jquery-mapael.
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).
from jquery-mapael.
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 =/
from jquery-mapael.
neveldo could you provide an example for the calculation of france?
from jquery-mapael.
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 !
from jquery-mapael.
just in case to get it right, for y axis it will be:
Y1 = ay * lat1 + by
Y2 = ay * lat2 + by
Am I right?
from jquery-mapael.
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.
from jquery-mapael.
Thx! Now it works! ;) I am a little bit brain dead today xD but thx for the help.
have a nice day!
from jquery-mapael.
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
from jquery-mapael.
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
from jquery-mapael.
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.
from jquery-mapael.
Thanks for your prompt reply.
It will help me a lot.
from jquery-mapael.
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
from jquery-mapael.
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 !
from jquery-mapael.
Can anyone help me generate the coordinates with the data below?
(SVG)
https://docs.google.com/file/d/0B8Lb7_0Kk1HRTFo2QmhjMzF2R2M/edit
(CustomMAP.js)
https://drive.google.com/open?id=0B8Lb7_0Kk1HRTFVWVjRLdi1ENTA&authuser=0
from jquery-mapael.
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.
from jquery-mapael.
All right. Thank you very much.
from jquery-mapael.
All issue seems to be resolved. This thread will be closed. Feel free to open a new issue if you have any problem. Thanks!
from jquery-mapael.
Related Issues (20)
- How to get zoom level when you click zoom buttons or mousewheel
- GetCoords function not working properly, what I'm doing wrong?
- How does Event afterZoom works?
- multiple_legends_plotted_cities.html with just one state (Maine)
- Map of a Mexico state divided in munipies
- change the map into dotted map.
- Resize the Map by Inkscape
- How to change color of all areas in a row in jquery HOT 1
- getCoord HOT 2
- attrs text-anchor HOT 2
- Allow click in tooltip content HOT 3
- GetCoords and Mercator Projection ? HOT 2
- dynamic value for areas
- Mouseover issues
- Overflow in horizontal legends
- zoom in mousewheele
- mobile hover problem
- Hongkong and Singapore is not shown in world map.
- French Guiana !== France
- My Map is Coming upside down
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-mapael.