Skip to content

Instantly share code, notes, and snippets.

@aemkei
Forked from 140bytes/LICENSE.txt
Created August 23, 2011 08:35
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aemkei/1164659 to your computer and use it in GitHub Desktop.
Save aemkei/1164659 to your computer and use it in GitHub Desktop.
Mercator Projection - 140byt.es

Mercator Projection - 140byt.es

Converts a point from latitude/longitude to pixel coordinates using the Mercator projection.

Demo: http://jsfiddle.net/aemkei/Ls4QU/show/

Usage

mercator(
  latitude, longitude,
  zoomLevel,
  tileSize
)

// returns {x,y} coordinates

Author

Created by Martin Kleppe (@aemkei) at Ubilabs.

DIY

Check his "JavaScript Golf Lessons" slides.

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

function(
a, b, // latitude, longitude
c, // zoom
d, // tile size
e // placeholder
){
return e = Math,
a = e.sin(a * e.PI / 180), // sin latitude
c = d * e.pow(2, c), // scale factor
{
x: (b / 360 + .5) * c, // x position
y: (.5 - e.log((1 + a) / (1-a)) / (4 * e.PI)) * c // y position
}
}
function(a,b,c,d,e){return e=Math,a=e.sin(a*e.PI/180),c=d*e.pow(2,c),{x:(b/360+.5)*c,y:(.5-e.log((1+a)/(1-a))/(4*e.PI))*c}}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "mercator",
"description": "Converts a geographic location from latitude/longitude into pixel coordinates.",
"keywords": [
"maps",
"geo",
"mercator",
"projection"
]
}
<!DOCTYPE html>
<head>
<title>Mercator Projection</title>
<style type="text/css" media="screen">
html, body { margin: 0;}
.map { position: relative; }
.map div { position: absolute; width: 8px; height: 8px; margin: -5px; background: #F00; border: 1px solid #FFF; }
</style>
</head>
<body>
<div class="map">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=0,0&amp;zoom=1&amp;size=512x512&amp;maptype=roadmap&amp;sensor=false">
<div id="nyc" title="New York"></div>
<div id="rio" title="Rio"></div>
<div id="tokyo" title="Tokyo"></div>
</div>
<script>
var mercator = function(a,b,c,d,e){return e=Math,a=e.sin(a*e.PI/180),c=d*e.pow(2,c),{x:(b/360+.5)*c,y:(.5-e.log((1+a)/(1-a))/(4*e.PI))*c}},
city, style, coords, xy,
cities = {
nyc: { lat: 40.714997, lng: -74.005966 },
rio: { lat: -22.878706, lng: -43.207855 },
tokyo: { lat: 35.713068, lng: 139.685669 }
};
for (city in cities){
style = document.getElementById(city).style;
coords = cities[city];
xy = mercator(coords.lat, coords.lng, 0, 512);
style.top = xy.y + "px";
style.left = xy.x + "px";
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment