Created
November 25, 2014 17:02
-
-
Save dgtm/8a89786fb3aab95cdb11 to your computer and use it in GitHub Desktop.
This file contains 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
Tooltip = (a) -> | |
@setValues a | |
b = @div_ = document.createElement("div") | |
b.style.position = "absolute" | |
b.style.zIndex = "999" | |
b.className = "tooltip" | |
@draw = -> | |
@add_ = add_ | |
@remove_ = remove_ | |
return | |
add_ = -> | |
a = @div_ | |
b = @getPanes().floatPane | |
c = @getProjection() | |
e = c.fromLatLngToDivPixel(@get("position")) | |
a.style.left = e.x + 12 + "px" | |
a.style.top = e.y - 32 + "px" | |
a.innerHTML = @get("text").toString() | |
a.style.visibility = "visible" | |
b.appendChild @div_ | |
@listener_ = google.maps.event.addListener(this, "position_changed", -> | |
a.style.visibility = "hidden" | |
return | |
) | |
return | |
remove_ = -> | |
google.maps.event.removeListener @listener_ | |
a = @div_.parentNode | |
a.removeChild @div_ if a | |
return | |
makeTip = (a) -> | |
b = google.maps | |
c = new Tooltip(map: map) | |
c.bindTo "position", a, "position" | |
c.bindTo "text", a, "tooltip" | |
b.event.addListener a, "mouseover", -> | |
c.add_() | |
return | |
b.event.addListener a, "mouseout", -> | |
c.remove_() | |
return | |
c | |
showValues = -> | |
a = document.forms["f"].elements["mode"][0].checked | |
b = document.getElementById("report") | |
c = undefined | |
e = undefined | |
d = 6371 | |
h = google.maps.geometry.spherical | |
f = poly.getPath().getArray() | |
if a | |
c = h.computeLength(f, d) | |
b.innerHTML = "Total line length:<br> " + c.toFixed(3) + " km" | |
else | |
e = h.computeArea(f, d) | |
b.innerHTML = "Area of polygon:<br> " + e.toFixed(3) + " km²\n\t\t" | |
c | |
changeTips = (a) -> | |
b = a | |
c = undefined | |
while c = markers[b] | |
e = markers[b - 1].num | |
d = markers[b].num | |
if d - e > 1 | |
break | |
else | |
c.num = e + 1 | |
c.setOptions tooltip: "Point " + c.num | |
b++ | |
return | |
createMarker = (e, d, h) -> | |
f = google.maps | |
k = "http://sites.google.com/site/mxamples/" | |
m = | |
url: k + "mm_blue.png" | |
size: new f.Size(12, 20) | |
anchor: new f.Point(6, 20) | |
g = new f.Marker( | |
position: e | |
map: map | |
icon: m | |
crossOnDrag: false | |
draggable: true | |
tooltip: d | |
) | |
g.num = parseInt(d.split(" ")[1]) | |
i = makeTip(g) | |
if h | |
g.setIcon k + "mm_lightblue.png" | |
markers.splice h, 0, g | |
changeTips h | |
else | |
markers.push g | |
poly.getPath().push e | |
showValues() | |
f.event.addListener g, "drag", (a) -> | |
b = 0 | |
c = undefined | |
while c = markers[b] | |
if c is g | |
poly.getPath().setAt b, a.latLng | |
break | |
b++ | |
showValues() | |
return | |
f.event.addListener g, "click", -> | |
i.remove_() | |
a = 0 | |
b = undefined | |
while b = markers[a] | |
if b is g | |
g.setMap null | |
poly.getPath().removeAt a | |
markers.splice a, 1 | |
break | |
a++ | |
if markers.length is 0 | |
clearMap() | |
else | |
showValues() | |
return | |
g | |
getSegment = (a) -> | |
b = google.maps.geometry.spherical | |
c = poly.getPath() | |
e = c.getLength() | |
d = [] | |
h = 0 | |
while h < (e - 1) | |
f = c.getAt(h) | |
k = c.getAt(h + 1) | |
m = b.computeDistanceBetween(f, k) | |
g = b.computeDistanceBetween(f, a) | |
i = b.computeDistanceBetween(k, a) | |
d[d.length] = (g + i) - m | |
h++ | |
j = 0 | |
n = d[0] | |
l = 0 | |
while ++l < d.length | |
if d[l] < n | |
n = d[l] | |
j = l | |
j + 1 | |
drawOverlay = -> | |
i = google.maps | |
j = undefined | |
n = document.forms["f"].elements["mode"][0].checked | |
if n | |
l = | |
path: i.SymbolPath.CIRCLE | |
strokeColor: "#000" | |
strokeWeight: 2 | |
fillColor: "#FFF" | |
fillOpacity: 1 | |
scale: 5 | |
poly = new i.Polyline( | |
strokeColor: "#0000af" | |
strokeOpacity: .8 | |
strokeWeight: 5 | |
icons: [icon: l] | |
) | |
o = poly.get("icons") | |
showValues() if markers.length > 1 | |
i.event.addListener poly, "mousemove", (a) -> | |
b = google.maps.geometry.spherical | |
c = showValues() | |
e = 0 | |
d = @getPath() | |
h = getSegment(a.latLng) | |
e += b.computeDistanceBetween(d.getAt(h - 1), a.latLng) | |
f = 1 | |
while f < h | |
k = d.getAt(f - 1) | |
m = d.getAt(f) | |
e += b.computeDistanceBetween(k, m) | |
f++ | |
g = e / c * 0.1 | |
o[0].offset = g + "%" | |
@set "icons", o | |
d.setAt j, a.latLng if @mousedown | |
return | |
i.event.addListener poly, "mouseout", -> | |
@set "icons", null | |
return | |
i.event.addListener poly, "mousedown", (b) -> | |
return if @mousedown | |
c = b.latLng | |
j = getSegment(c) | |
return if markers[j].getPosition().equals(c) | |
@mousedown = true | |
i.event.addListener map, "mousemove", (a) -> | |
poly.getPath().setAt j, a.latLng | |
return | |
map.set "draggable", false | |
@getPath().insertAt j, c | |
return | |
i.event.addListener poly, "mouseup", (a) -> | |
if @mousedown | |
@mousedown = false | |
map.set "draggable", true | |
i.event.clearListeners map, "mousemove" | |
if typeof j is "number" | |
b = "Point " + parseInt(j + 1) | |
createMarker a.latLng, b, j | |
return | |
else | |
poly = new i.Polygon( | |
strokeColor: "#0000af" | |
strokeOpacity: .8 | |
strokeWeight: 3 | |
fillColor: "#335599" | |
fillOpacity: .2 | |
) | |
return | |
leftClick = (a) -> | |
unless poly | |
drawOverlay() | |
poly.setMap map | |
unless poly.mousedown | |
b = (if (markers.length is 0) then 1 else (markers[markers.length - 1].num + 1)) | |
c = "Point " + b | |
createMarker a.latLng, c | |
return | |
buildMap = -> | |
a = google.maps | |
b = | |
center: new a.LatLng(47.60247, 9.365845) | |
zoom: 9 | |
mapTypeId: a.MapTypeId.ROADMAP | |
streetViewControl: false | |
draggableCursor: "auto" | |
draggingCursor: "move" | |
scaleControl: true | |
disableDoubleClickZoom: true | |
mapTypeId: a.MapTypeId.TERRAIN | |
map = new a.Map(document.getElementById("map"), b) | |
a.event.addListener map, "click", leftClick | |
return | |
toggleMode = -> | |
if poly | |
a = poly.getPath() | |
poly.setMap null | |
if poly.mousedown | |
clearMap() | |
map.set "draggable", true | |
google.maps.event.clearListeners map, "mousemove" | |
return | |
drawOverlay() | |
poly.setOptions | |
map: map | |
path: a | |
icons: null | |
return | |
clearMap = -> | |
a = google.maps | |
b = 0 | |
c = undefined | |
while c = markers[b] | |
a.event.clearInstanceListeners c | |
c.setMap null | |
b++ | |
if poly | |
a.event.clearInstanceListeners poly | |
poly.setMap null | |
poly = null | |
markers.length = 0 | |
document.getElementById("report").innerHTML = " \n\t" | |
return | |
map = undefined | |
poly = undefined | |
markers = [] | |
Tooltip:: = new google.maps.OverlayView() | |
window.onload = buildMap |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment