Created
May 22, 2013 03:02
-
-
Save mm-git/5624981 to your computer and use it in GitHub Desktop.
This add a static map function to jQuery as a plug-in.
Poly-line is available. The canvas is needed on your browser. Usage :
$("<div>").css({width:200,height:200}).staticMap(point, lines, zoom); point and lines(array) are google.maps.LatLng object.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
var TILE_SIZE = 256; | |
var TILE_URL = "http://tile.openstreetmap.org/"; | |
$.fn.staticMap = function(point, lines, zoom){ | |
return this.each(function(i){ | |
var _this = this; | |
var width = $(this).width(); | |
var height = $(this).height(); | |
$(this) | |
.css({ | |
overflow : "hidden" | |
}); | |
var map = $("<canvas>") | |
.css({ | |
position : "absolute", | |
width : width, | |
height :height, | |
zIndex: 90 | |
}) | |
.appendTo($(this)); | |
map[0].width = width; | |
map[0].height = height; | |
var mapContext = map[0].getContext("2d"); | |
var centerX = lngToTile(point.lng(), zoom); | |
var centerY = latToTile(point.lat(), zoom); | |
var startX = Math.floor(centerX-(width/TILE_SIZE)/2); | |
var startY = Math.floor(centerY-(height/TILE_SIZE)/2); | |
var endX = Math.floor(centerX+(width/TILE_SIZE)/2); | |
var endY = Math.floor(centerY+(height/TILE_SIZE)/2); | |
var offsetX = Math.floor((Math.floor(centerX)-centerX)*TILE_SIZE) + Math.floor(width/2) + Math.floor(startX - Math.floor(centerX)) * TILE_SIZE; | |
var offsetY = Math.floor((Math.floor(centerY)-centerY)*TILE_SIZE) + Math.floor(height/2) + Math.floor(startY - Math.floor(centerY)) * TILE_SIZE; | |
for(var x=startX; x<=endX; x++){ | |
for(var y=startY; y<=endY; y++){ | |
var url = TILE_URL + zoom + "/" +x + "/" + y + ".png"; | |
var img = $("<img>"); | |
img[0].offsetX = (x-startX)*TILE_SIZE+offsetX; | |
img[0].offsetY = (y-startY)*TILE_SIZE+offsetY; | |
img | |
.on("load", function(){ | |
mapContext.drawImage(this, this.offsetX, this.offsetY, TILE_SIZE, TILE_SIZE); | |
}) | |
.attr("src", url); | |
} | |
} | |
var line = $("<canvas>") | |
.css({ | |
position : "absolute", | |
width : width, | |
height :height, | |
zIndex: 95 | |
}) | |
.appendTo($(this)); | |
line[0].width = width; | |
line[0].height = height; | |
line.refresh = function(l){ | |
var lineContext = this[0].getContext("2d"); | |
lineContext.clearRect(0, 0, width, height); | |
if(l.length >= 2){ | |
lineContext.strokeStyle = "#ff00ff"; | |
lineContext.lineWidth = 10; | |
lineContext.globalAlpha = 0.4; | |
lineContext.beginPath(); | |
lineContext.moveTo( | |
lngToDrawOffset(l[0].lng(), centerX, width, zoom), | |
latToDrawOffset(l[0].lat(), centerY, height, zoom)); | |
for(var i=1; i<l.length; i++){ | |
lineContext.lineTo( | |
lngToDrawOffset(l[i].lng(), centerX, width, zoom), | |
latToDrawOffset(l[i].lat(), centerY, height, zoom)); | |
} | |
lineContext.stroke(); | |
} | |
}; | |
line.refresh(lines); | |
this.refresh = function(l){ | |
line.refresh(l); | |
}; | |
}); | |
}; | |
var lngToTile = function(lng, zoom){ | |
return ((lng + 180.0) / 360.0) * Math.pow(2, zoom); | |
}; | |
var latToTile = function(lat, zoom){ | |
return (1.0 - Math.log(Math.tan(lat * Math.PI/180.0) + 1.0 / Math.cos(lat * Math.PI/180.0)) / Math.PI) /2 * Math.pow(2, zoom); | |
}; | |
var lngToDrawOffset = function(lng, centerX, width, zoom){ | |
return Math.floor(width/2 - TILE_SIZE * (centerX - lngToTile(lng, zoom))); | |
}; | |
var latToDrawOffset = function(lat, centerY, height, zoom){ | |
return Math.floor(height/2 - TILE_SIZE * (centerY - latToTile(lat, zoom))); | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment