594 lines
16 KiB
Plaintext
594 lines
16 KiB
Plaintext
var autocomplete;
|
|
var geocoder;
|
|
var map;
|
|
var markers = [];
|
|
var provider = "srtm";
|
|
var rectangle;
|
|
var bestResultRect;
|
|
var tileSize = 256;
|
|
var tilelayer;
|
|
|
|
function AddPOI()
|
|
{
|
|
CreatePOI(map.getCenter(), "New POI " + (markers.length + 1));
|
|
|
|
$("#POIs").show("fast");
|
|
UpdateInfo();
|
|
}
|
|
|
|
function Clip(val, min, max)
|
|
{
|
|
if (val < min) return min;
|
|
if (val > max) return max;
|
|
return val;
|
|
}
|
|
|
|
function CreatePOI(position, title)
|
|
{
|
|
var marker = new google.maps.Marker({
|
|
position: position,
|
|
title: title,
|
|
});
|
|
|
|
marker.setMap(map);
|
|
markers.push(marker);
|
|
|
|
google.maps.event.addListener(marker, 'drag', OnMarkerDrag);
|
|
|
|
var markerPosition = "Lat: " + marker.position.lat() + ", Lng: " + marker.position.lng();
|
|
var el = "<div class='poi ui attached segment'><div class='ui stackable grid'>";
|
|
el += "<div class='one wide column poiIndex'>" + markers.length + "</div>";
|
|
el += "<div class='four wide column poiTitle'>" + marker.title + "</div>";
|
|
el += "<div class='ten wide column'>" + markerPosition + "</div>";
|
|
el += "<div class='one wide column poiDelete'><i class='icon trash alternate'></i></div>";
|
|
el += "</div></div>";
|
|
$("#poiContainer").append(el);
|
|
|
|
$(".poiTitle:last").dblclick(OnPOITitleDoubleClick);
|
|
var lastDelete = $(".poiDelete:last");
|
|
lastDelete.find("i").popup({
|
|
title: "Delete",
|
|
position: "top center"
|
|
});
|
|
lastDelete.click(OnDeletePOI);
|
|
|
|
$('html, body').animate({
|
|
scrollTop: $("#poiContainer").offset().top
|
|
}, 500);
|
|
}
|
|
|
|
function GenerateLinks()
|
|
{
|
|
if (provider == "srtm") GenerateLinksSRTM();
|
|
else if (provider == "srtm30") GenerateLinksSRTM30();
|
|
}
|
|
|
|
function GenerateLinksSRTM()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
var x1 = sw.lng();
|
|
var x2 = ne.lng();
|
|
var y1 = ne.lat();
|
|
var y2 = sw.lat();
|
|
var x1u = Math.floor(x1 / 5) * 5 + 180;
|
|
var x2u = Math.floor(x2 / 5) * 5 + 180;
|
|
var y1u = 90 - Math.floor(y1 / 5) * 5;
|
|
var y2u = 90 - Math.floor(y2 / 5) * 5;
|
|
|
|
var el = $("#dlHeightmaps");
|
|
|
|
el.text("");
|
|
$("#dlTextures").text("");
|
|
var server = "http://srtm.csi.cgiar.org/wp-content/uploads/files/srtm_5x5/ASCII/";
|
|
|
|
for (var x = x1u; x <= x2u; x += 5)
|
|
{
|
|
for (var y = y1u; y <= y2u; y += 5)
|
|
{
|
|
var ax = Math.floor(x / 5 + 1);
|
|
var ay = Math.floor(y / 5 - 6);
|
|
var filename = "srtm_" + ((ax > 9)? ax: "0" + ax) + "_" + ((ay > 9)? ay: "0" + ay);
|
|
var e = "<a class='ui icon button' href='" + server + filename + ".zip'><i class='icon download'></i>" + filename + "</a>";
|
|
el.append(e);
|
|
}
|
|
}
|
|
|
|
var links = $("#download-links-srtm");
|
|
links.show("fast");
|
|
|
|
$('html, body').animate({
|
|
scrollTop: links.offset().top
|
|
}, 500);
|
|
}
|
|
|
|
function GenerateLinksSRTM30()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
var x1 = sw.lng();
|
|
var x2 = ne.lng();
|
|
var y1 = ne.lat();
|
|
var y2 = sw.lat();
|
|
var x1u = Math.floor(x1 + 180) - 180;
|
|
var x2u = Math.floor(x2 + 180) - 180;
|
|
var y1u = Math.floor(y1 + 90) - 90;
|
|
var y2u = Math.floor(y2 + 90) - 90;
|
|
|
|
var el = $("#dlHeightmaps30");
|
|
|
|
el.text("");
|
|
$("#dlTextures").text("");
|
|
var server = "https://e4ftl01.cr.usgs.gov/MODV6_Dal_D/SRTM/SRTMGL1.003/2000.02.11/";
|
|
|
|
console.log(x1u + " " + x2u + " " + y2u + " " + y1u);
|
|
|
|
for (var x = x1u; x <= x2u; x++)
|
|
{
|
|
for (var y = y2u; y <= y1u; y++)
|
|
{
|
|
var ax = x < 0 ? "W" : "E";
|
|
var absX = Math.abs(x);
|
|
if (absX < 100) ax += "0";
|
|
if (absX < 10) ax += "0";
|
|
ax += absX;
|
|
|
|
var ay = y < 0 ? "S" : "N";
|
|
var absY = Math.abs(y);
|
|
if (absY < 10) ay += "0";
|
|
ay += absY;
|
|
|
|
var filename = ay + ax + ".SRTMGL1.hgt.zip";
|
|
|
|
var e = "<a class='ui icon button' href='" + server + filename + "' target='_blank'><i class='icon download'></i>" + filename + "</a>";
|
|
el.append(e);
|
|
}
|
|
}
|
|
|
|
var links = $("#download-links-srtm30");
|
|
links.show("fast");
|
|
|
|
$('html, body').animate({
|
|
scrollTop: links.offset().top
|
|
}, 500);
|
|
}
|
|
|
|
function Initialize()
|
|
{
|
|
var centerPoint = new google.maps.LatLng((Coords.tly + Coords.bry) / 2, (Coords.tlx + Coords.brx) / 2);
|
|
|
|
var mapOptions =
|
|
{
|
|
center: centerPoint,
|
|
zoom: 9,
|
|
zoomControl: true,
|
|
zoomControlOptions: {
|
|
style: google.maps.ZoomControlStyle.DEFAULT,
|
|
},
|
|
mapTypeControl: true,
|
|
panControl: false,
|
|
scaleControl: true,
|
|
scrollwheel: true,
|
|
streetViewControl: false,
|
|
draggable : true,
|
|
overviewMapControl: false,
|
|
mapTypeId: google.maps.MapTypeId.HYBRID
|
|
};
|
|
|
|
var bounds = new google.maps.LatLngBounds(
|
|
new google.maps.LatLng(Coords.bry, Coords.tlx),
|
|
new google.maps.LatLng(Coords.tly, Coords.brx)
|
|
);
|
|
|
|
autocomplete = new google.maps.places.Autocomplete(
|
|
(document.getElementById('search-address')),
|
|
{types: ['geocode']});
|
|
|
|
tilelayer = new google.maps.ImageMapType({
|
|
getTileUrl: function(tile, zoom) { return "images/grid.png"; },
|
|
tileSize: new google.maps.Size(256, 256)
|
|
});
|
|
|
|
geocoder = new google.maps.Geocoder();
|
|
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
|
|
if ($("#showgrid").prop("checked")) map.overlayMapTypes.insertAt(0, tilelayer);
|
|
map.fitBounds(bounds);
|
|
|
|
rectangle = new google.maps.Rectangle({
|
|
bounds: bounds,
|
|
editable: true
|
|
});
|
|
rectangle.setMap(map);
|
|
rectangle.addListener("bounds_changed", UpdateInfo);
|
|
|
|
bestResultRect = new google.maps.Rectangle({
|
|
bounds: bounds,
|
|
strokeColor: '#00FF00',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
visible: false
|
|
});
|
|
bestResultRect.setMap(map);
|
|
if ($("#bestrect").prop("checked"))
|
|
{
|
|
bestResultRect.setVisible(true);
|
|
$("#btnSelectBestRect").show();
|
|
}
|
|
|
|
UpdateBestRect();
|
|
|
|
if (typeof(POI) != 'undefined')
|
|
{
|
|
for (var i = 0; i < POI.length; i++)
|
|
{
|
|
var p = POI[i];
|
|
CreatePOI(new google.maps.LatLng(p.y, p.x), p.title);
|
|
}
|
|
if (POI.length > 0) $("#POIs").removeClass("hidden");
|
|
}
|
|
|
|
UpdateInfo();
|
|
|
|
$("#search-address").keyup(function(event){
|
|
if(event.keyCode == 13) $("#btnSearch").click();
|
|
});
|
|
|
|
var clipboard = new Clipboard("#copyBtn");
|
|
$('#copyBtn').popup({
|
|
on: "click",
|
|
title: 'Copied',
|
|
content: 'Now click "Insert the coordinates from the clipboard" in Real World Terrain.'
|
|
});
|
|
|
|
provider = $("#elevation-provider").find('option:selected').val();
|
|
|
|
$("#bestrectHint").popup();
|
|
|
|
$("#btnCreateSelector").click(ShowRectangle);
|
|
$("#btnSearch").click(Search);
|
|
$("#btnAddPOI").click(AddPOI);
|
|
$("#btnShowLinks").click(GenerateLinks);
|
|
$("#btnOpenOSM").click(OnShowOSM);
|
|
$("#elevation-provider").change(OnChangeProvider);
|
|
$("#showgrid").change(OnToggleGrid);
|
|
$("#bestrect").change(OnToggleBestRect);
|
|
$("#btnSelectBestRect").click(SelectBestRect);
|
|
}
|
|
|
|
function LatLngToTile(latLng, zoom)
|
|
{
|
|
var sy = Math.sin(latLng.lat() * Math.PI / 180);
|
|
var lng = (latLng.lng() + 180) / 360;
|
|
var lat = 0.5 - Math.log((1 + sy) / (1 - sy)) / (Math.PI * 4);
|
|
var mapSize = tileSize * (1 << zoom);
|
|
var px = lng * mapSize + 0.5;
|
|
var py = lat * mapSize + 0.5;
|
|
|
|
if (px < 0) px = 0;
|
|
else if (px > mapSize - 1) px = mapSize - 1;
|
|
if (py < 0) py = 0;
|
|
else if (py > mapSize - 1) py = mapSize - 1;
|
|
|
|
var tx = px / tileSize;
|
|
var ty = py / tileSize;
|
|
|
|
return new google.maps.Point(tx, ty);
|
|
}
|
|
|
|
function MoveSelectorDown()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
var off = ne.lat() - sw.lat();
|
|
|
|
var ne2 = new google.maps.LatLng(ne.lat() - off, ne.lng());
|
|
var sw2 = new google.maps.LatLng(sw.lat() - off, sw.lng());
|
|
|
|
rectangle.setBounds(new google.maps.LatLngBounds(sw2, ne2));
|
|
}
|
|
|
|
function MoveSelectorLeft()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
var off = ne.lng() - sw.lng();
|
|
|
|
var ne2 = new google.maps.LatLng(ne.lat(), ne.lng() - off);
|
|
var sw2 = new google.maps.LatLng(sw.lat(), sw.lng() - off);
|
|
|
|
rectangle.setBounds(new google.maps.LatLngBounds(sw2, ne2));
|
|
}
|
|
|
|
function MoveSelectorRight()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
var off = ne.lng() - sw.lng();
|
|
|
|
var ne2 = new google.maps.LatLng(ne.lat(), ne.lng() + off);
|
|
var sw2 = new google.maps.LatLng(sw.lat(), sw.lng() + off);
|
|
|
|
rectangle.setBounds(new google.maps.LatLngBounds(sw2, ne2));
|
|
}
|
|
|
|
function MoveSelectorUp()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
var off = ne.lat() - sw.lat();
|
|
|
|
var ne2 = new google.maps.LatLng(ne.lat() + off, ne.lng());
|
|
var sw2 = new google.maps.LatLng(sw.lat() + off, sw.lng());
|
|
|
|
rectangle.setBounds(new google.maps.LatLngBounds(sw2, ne2));
|
|
}
|
|
|
|
function OnChangeProvider()
|
|
{
|
|
provider = $("#elevation-provider").find('option:selected').val();
|
|
if (provider == "srtm" || provider == "srtm30") $("#btnShowLinks").show();
|
|
else $("#btnShowLinks").hide();
|
|
|
|
$("#download-links-srtm").hide();
|
|
$("#download-links-srtm30").hide();
|
|
|
|
UpdateInfo();
|
|
}
|
|
|
|
function OnDeletePOI()
|
|
{
|
|
var index = $(".poiDelete").index($(this));
|
|
var marker = markers.splice(index, 1)[0];
|
|
marker.setMap(null);
|
|
$(this).parent().parent().remove();
|
|
|
|
if (markers.length > 0)
|
|
{
|
|
$(".poiIndex").each(function(index) {
|
|
$(this).text(index + 1);
|
|
})
|
|
}
|
|
else $("#POIs").hide("fast");
|
|
UpdateInfo();
|
|
}
|
|
|
|
function OnKeyDown(event)
|
|
{
|
|
if (event.ctrlKey == 1)
|
|
{
|
|
rectangle.setDraggable(true);
|
|
for(i = 0; i < markers.length; i++) markers[i].setDraggable(true);
|
|
}
|
|
}
|
|
|
|
function OnKeyUp(event)
|
|
{
|
|
if (event.ctrlKey == 0)
|
|
{
|
|
rectangle.setDraggable(false);
|
|
for(i = 0; i < markers.length; i++) markers[i].setDraggable(false);
|
|
}
|
|
}
|
|
|
|
function OnMarkerDrag()
|
|
{
|
|
var markerIndex = markers.indexOf(this);
|
|
var markerPosition = "Lat: " + this.position.lat() + ", Lng: " + this.position.lng();
|
|
$(".poi .poiPosition").eq(markerIndex).text(markerPosition);
|
|
UpdateInfo();
|
|
}
|
|
|
|
function OnPOITitleDoubleClick()
|
|
{
|
|
var newTitle = prompt("POI title:", $(this).text());
|
|
|
|
if (newTitle != null)
|
|
{
|
|
$(this).text(newTitle);
|
|
var index = $(".poiTitle").index($(this));
|
|
markers[index].title = newTitle;
|
|
UpdateInfo();
|
|
}
|
|
}
|
|
|
|
function OnShowOSM()
|
|
{
|
|
var center = map.getCenter();
|
|
var win = window.open("http://www.openstreetmap.org/#map=" + map.getZoom() + "/" + center.lat() + "/" + center.lng(), '_blank');
|
|
win.focus();
|
|
}
|
|
|
|
function OnToggleBestRect()
|
|
{
|
|
if ($("#bestrect").prop("checked"))
|
|
{
|
|
bestResultRect.setVisible(true);
|
|
$("#btnSelectBestRect").show();
|
|
}
|
|
else
|
|
{
|
|
bestResultRect.setVisible(false);
|
|
$("#btnSelectBestRect").hide();
|
|
}
|
|
}
|
|
|
|
function OnToggleGrid()
|
|
{
|
|
if ($("#showgrid").prop("checked")) map.overlayMapTypes.insertAt(0, tilelayer);
|
|
else map.overlayMapTypes.removeAt(0);
|
|
}
|
|
|
|
function Repeat(value, minValue, maxValue)
|
|
{
|
|
var range = maxValue - minValue;
|
|
while (value < minValue || value > maxValue)
|
|
{
|
|
if (value < minValue) value += range;
|
|
else value -= range;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function SelectBestRect()
|
|
{
|
|
rectangle.setBounds(bestResultRect.getBounds());
|
|
}
|
|
|
|
function Search()
|
|
{
|
|
geocoder.geocode({'address': $("#search-address").val()},
|
|
function(results, status) {
|
|
if (status == google.maps.GeocoderStatus.OK) {
|
|
var loc = results[0].geometry.location;
|
|
map.panTo(loc);
|
|
}
|
|
else {
|
|
alert("Not found: " + status);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function SelectText(containerid)
|
|
{
|
|
if (document.selection)
|
|
{
|
|
var range = document.body.createTextRange();
|
|
range.moveToElementText(document.getElementById(containerid));
|
|
range.select();
|
|
}
|
|
else if (window.getSelection)
|
|
{
|
|
var range = document.createRange();
|
|
range.selectNode(document.getElementById(containerid));
|
|
window.getSelection().addRange(range);
|
|
}
|
|
new Clipboard('.btn', {
|
|
text: function(trigger) {
|
|
return $("#" + containerid).text();
|
|
}
|
|
});
|
|
}
|
|
|
|
function ShowRectangle()
|
|
{
|
|
var center = map.getCenter();
|
|
var bounds = map.getBounds();
|
|
var bne = bounds.getNorthEast();
|
|
var bsw = bounds.getSouthWest();
|
|
var x1 = Repeat(bsw.lng(), -180, 180);
|
|
var y1 = Repeat(bne.lat(), -90, 90);
|
|
var x2 = Repeat(bne.lng(), -180, 180);
|
|
var y2 = Repeat(bsw.lat(), -90, 90);
|
|
var cx = Repeat(center.lng(), -180, 180);
|
|
var cy = Repeat(center.lat(), -90, 90);
|
|
var ne = new google.maps.LatLng(cy + (y1 - cy) * 0.7, cx + (cx - x1) * 0.7);
|
|
var sw = new google.maps.LatLng(cy + (y2 - cy) * 0.7, cx + (cx - x2) * 0.7);
|
|
rectangle.setBounds(new google.maps.LatLngBounds(sw, ne));
|
|
$("#map-coord").show("fast");
|
|
}
|
|
|
|
function TileToLatLng(tilePos, zoom)
|
|
{
|
|
var mapSize = tileSize << zoom;
|
|
var lng = 360 * (Repeat(tilePos.x * tileSize, 0, mapSize - 1) / mapSize - 0.5);
|
|
var lat = 90 - 360 * Math.atan(Math.exp((Clip(tilePos.y * tileSize, 0, mapSize - 1) / mapSize - 0.5) * Math.PI * 2)) / Math.PI;
|
|
return new google.maps.LatLng(lat, lng);
|
|
}
|
|
|
|
function UpdateBestRect()
|
|
{
|
|
var c = bestResultRect;
|
|
var zoom = map.zoom + 3;
|
|
|
|
var bounds = c.getBounds();
|
|
|
|
var ne = LatLngToTile(bounds.getNorthEast(), zoom);
|
|
var sw = LatLngToTile(bounds.getSouthWest(), zoom);
|
|
ne.x = Math.round(ne.x);
|
|
ne.y = Math.round(ne.y);
|
|
sw.x = Math.round(sw.x);
|
|
sw.y = Math.round(sw.y);
|
|
|
|
ne = TileToLatLng(ne, zoom);
|
|
sw = TileToLatLng(sw, zoom);
|
|
|
|
c.setBounds(new google.maps.LatLngBounds(sw, ne));
|
|
}
|
|
|
|
function UpdateInfo()
|
|
{
|
|
var bounds = rectangle.getBounds();
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
$("#TLLat").text(ne.lat());
|
|
$("#TLLon").text(sw.lng());
|
|
$("#BRLat").text(sw.lat());
|
|
$("#BRLon").text(ne.lng());
|
|
|
|
var D2R = Math.PI / 180.0;
|
|
var R = 6371;
|
|
|
|
var scfY = Math.sin(ne.lat() * D2R);
|
|
var sctY = Math.sin(sw.lat() * D2R);
|
|
var ccfY = Math.cos(ne.lat() * D2R);
|
|
var cctY = Math.cos(sw.lat() * D2R);
|
|
var cX = Math.cos((sw.lng() - ne.lng()) * D2R);
|
|
var sizeX1 = Math.abs(R * Math.acos(scfY * scfY + ccfY * ccfY * cX));
|
|
var sizeX2 = Math.abs(R * Math.acos(sctY * sctY + cctY * cctY * cX));
|
|
sizeX = ((sizeX1 + sizeX2) / 2.0);
|
|
sizeY = (R * Math.acos(scfY * sctY + ccfY * cctY));
|
|
|
|
$("#AreaWidth").text(sizeX.toFixed(2));
|
|
$("#AreaHeight").text(sizeY.toFixed(2));
|
|
$("#AreaArea").text((sizeX * sizeY).toFixed(2));
|
|
|
|
bestResultRect.bounds = rectangle.getBounds();
|
|
UpdateBestRect();
|
|
|
|
$("div").removeClass("wrong");
|
|
var wrong = false;
|
|
if (provider == "srtm" || provider == "srtm30")
|
|
{
|
|
if (ne.lat() > 60 || ne.lat() < -60) { $("#topLatRow").addClass("wrong"); wrong = true;}
|
|
if (sw.lat() > 60 || sw.lat() < -60) { $("#bottomLatRow").addClass("wrong"); wrong = true;}
|
|
}
|
|
|
|
if (!wrong)
|
|
{
|
|
var hasMarkers = markers.length > 0;
|
|
var str = '<Coords tlx="' + sw.lng() + '" tly="' + ne.lat() + '" brx="' + ne.lng() + '" bry="' + sw.lat() + '"' + (hasMarkers?"": "/") + '>';
|
|
if (hasMarkers)
|
|
{
|
|
str += "<POIs>";
|
|
|
|
for (var i = 0; i < markers.length; i++)
|
|
{
|
|
var marker = markers[i];
|
|
str += '<POI x="' + marker.position.lng() + '" y="' + marker.position.lat() + '">' + marker.title + "</POI>";
|
|
}
|
|
|
|
str += "</POIs>";
|
|
str += "</Coords>";
|
|
}
|
|
|
|
$("#coordNode").text(str);
|
|
}
|
|
else
|
|
{
|
|
$("#coordNode").text("Wrong latitude");
|
|
}
|
|
}
|
|
|
|
$(Initialize); |