Skip to content

Instantly share code, notes, and snippets.

@a-ignatov-parc

a-ignatov-parc/atlas.js

Created February 14, 2012 12:25
Show Gist options
  • Save a-ignatov-parc/1826443 to your computer and use it in GitHub Desktop.
Save a-ignatov-parc/1826443 to your computer and use it in GitHub Desktop.
Download ZIP
Исходники карты с кастомными инфобаблами и маркерами
Raw
atlas.js
function initAtlas(b) {
var p = false,
e = null;
function o() {
if (e != null) {
e.close();
e = null
}
}
var d = false,
c = function (b) {
var a = (new RegExp("[#&]" + b + "=([^&]*)")).exec(window.location.hash);
return a ? a[1] || null : null
},
y = new google.maps.MarkerImage(b.visitedSiteImageUrl, new google.maps.Size(12, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
H = new google.maps.MarkerImage(b.siteImageUrl, new google.maps.Size(12, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
G = new google.maps.MarkerImage(b.wreckImageUrl, new google.maps.Size(16, 16), new google.maps.Point(0, 0), new google.maps.Point(8, 15)),
z = new google.maps.MarkerImage(b.wreckImageUrl, new google.maps.Size(18, 10), new google.maps.Point(17, 6), new google.maps.Point(6, 10)),
r = new google.maps.MarkerImage(b.airportImageUrl, new google.maps.Size(32, 37), new google.maps.Point(0, 0), new google.maps.Point(16, 37)),
n = new google.maps.MarkerImage(b.weatherStationImageUrl, new google.maps.Size(18, 29), new google.maps.Point(0, 0), new google.maps.Point(6, 27)),
A = new google.maps.MarkerImage(b.photoImageLargeUrl, new google.maps.Size(22, 35), new google.maps.Point(0, 0), new google.maps.Point(11, 35)),
E = new google.maps.MarkerImage(b.shadowImageUrl, new google.maps.Size(22, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
w = new google.maps.MarkerImage(b.shadowImageLargeUrl, new google.maps.Size(37, 35), new google.maps.Point(0, 0), new google.maps.Point(11, 35)),
C = new google.maps.MarkerImage(b.reticuleImageUrl, new google.maps.Size(13, 13), new google.maps.Point(0, 0), new google.maps.Point(7, 7)),
D = {
coords: [13, 13, 13, 13],
type: "rect"
},
h = {
mapTypeId: google.maps.MapTypeId.HYBRID,
backgroundColor: "#ebebeb",
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT
},
zoom: b.zoom,
center: b.center,
mapTypeControl: false
};
if (document.location.hash) {
var i = c("zoom");
if (i) h.zoom = parseInt(i);
var j = c("lat"),
k = c("lng");
if (j && k) h.center = new google.maps.LatLng(j, k);
if (j && k && i) d = window.location.hash
}
var a = new google.maps.Map(document.getElementById("atlas-map"), h),
B = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: a,
icon: C,
shape: D,
optimized: false,
zIndex: 5
});
google.maps.event.addListener(a, "bounds_changed", function () {
B.setPosition(a.getCenter())
});
$("#map-type-map").data("mapTypeId", google.maps.MapTypeId.ROADMAP);
$("#map-type-satellite").data("mapTypeId", google.maps.MapTypeId.SATELLITE);
$("#map-type-hybrid").data("mapTypeId", google.maps.MapTypeId.HYBRID);
$("#map-type-terrain").data("mapTypeId", google.maps.MapTypeId.TERRAIN);
$(".map-type-button").click(function () {
a.setMapTypeId($(this).data("mapTypeId"));
$(".map-type-button").removeClass("button-down").addClass("button-up");
$(this).addClass("button-down")
});
google.maps.event.addListener(a, "click", function () {
o()
});
function v(c, f, d) {
google.maps.event.addListener(c, "click", function () {
o();
var g = new InfoBubble({
content: "<div class='site-detail-loading-name'><img src='/Content/Images/icon-map-marker-dive-site-small.png' />" + d + "</div><div class='site-detail-loading-message'><img src='/Content/Images/anim-load-spinner-16.gif' /> Loading info...</div>",
shadowStyle: 0,
padding: "8px",
backgroundColor: "#EEEEEE",
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
disableAutoPan: true,
disableAnimation: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: "info-bubble",
arrowStyle: 2
});
g.open(a, c);
e = g;
$.post(b.siteDetailsUrl, {
siteId: f
}, function (b) {
if (b) {
var e = "<div class='site-detail-title'><img src='/Content/Images/icon-map-marker-dive-site-small.png' /><a href='" + b.url + "' class='site-detail-name'>" + b.name + "</a></div>";
if (b.location) e += "<div class='site-detail-location'>Of " + b.location + "</div>";
if (b.alternateNames && b.alternateNames.length > 0) {
e += "<div class='site-detail-alternate-names'>Also known as:<ul>";
$(b.alternateNames).each(function (b, a) {
e += "<li>" + a + "</li>"
});
e += "</ul></div>"
}
g.setContent(e);
g.open(a, c)
} else {
g.setContent("<div>Unable to load information for <em>" + d + "</em></div>");
g.open(a, c)
}
}, "json")
})
}
var l = function () {
if (a.getZoom() < 10) $("#create-links").fadeOut(400);
else $("#create-links").fadeIn(400)
};
google.maps.event.addListener(a, "zoom_changed", l);
var g, u;
google.maps.event.addListener(a, "idle", function () {
var c = a.getCenter(),
d = a.getZoom();
if (d == u && c.lat() == g.lat() && c.lng() == g.lng()) return;
g = c;
u = d;
x();
$("#create-region-link").attr("href", b.createRegionUrl + "?latitude=" + c.lat() + "&longitude=" + c.lng() + "&zoom=" + d);
$("#import-photos-link").attr("href", "/photo/import?GeoCircleRadius=32&GeoSpecificationType=WithinRadius&GeoCircleLatitude=" + c.lat() + "&GeoCircleLongitude=" + c.lng() + "&MapCenterLat=" + c.lat() + "&MapCenterLng=" + c.lng() + "&MapZoom=" + d);
if (!p) {
p = true;
I();
return
}
F()
});
var f = [],
q = [],
m = [],
x = function () {
var c = a.getBounds(),
d = a.getCenter();
$.post(b.searchBoxUrl, {
north: c.getNorthEast().lat(),
east: c.getNorthEast().lng(),
south: c.getSouthWest().lat(),
west: c.getSouthWest().lng(),
lat: d.lat(),
lng: d.lng(),
zoom: a.getZoom()
}, function (c) {
$.each(f, function (b, a) {
a.setMap(null)
});
$.each(q, function (b, a) {
a.setMap(null)
});
$.each(m, function (b, a) {
a.setMap(null)
});
f.length = 0;
if (c.tooManySites) $("#sidebar-zoom-help").fadeIn(400);
else $("#sidebar-zoom-help").fadeOut(400);
if (c.popularSites && c.popularSites.length != 0) {
$("#sidebar-popular-sites").fadeIn(400);
$("#popular-sites-list").empty();
$.each(c.popularSites, function (g, c) {
var e = $("<li></li>"),
f = $("<a></a>", {
href: c.url,
text: c.name,
"class": "entity"
}).click(function () {
a.panTo(new google.maps.LatLng(c.y, c.x));
a.setZoom(13);
return false
}),
d = $("<img></img>", {
src: c.wrk ? b.wreckImageLegendUrl : b.siteImageLegendUrl
}).css({
"margin-bottom": "-2px"
});
d.css(!c.wrk ? {
"margin-right": "6px",
"margin-left": "2px"
} : {
"margin-right": "2px"
});
e.append(d).append(f);
$("#popular-sites-list").append(e)
})
} else $("#sidebar-popular-sites").fadeOut(400);
$.each(c.sites, function (i, b) {
var d = new google.maps.LatLng(b.y, b.x),
e = b.v ? y : b.wrk ? G : H,
c = b.wrk ? z : E,
h = b.wrk ? new google.maps.Point(-12, 16) : new google.maps.Point(-8, 18),
g = a.getZoom() > 11 ? new MarkerWithLabel({
position: d,
clickable: true,
draggable: false,
map: a,
icon: e,
shadow: c,
labelContent: b.name,
title: b.name,
labelAnchor: h,
labelClass: "map-marker-label",
visible: true
}) : new google.maps.Marker({
position: d,
clickable: true,
map: a,
icon: e,
shadow: c,
title: b.name,
zIndex: 1
});
f.push(g);
v(g, b.id, b.name)
});
c.airports && $.each(c.airports, function (f, b) {
var c = new google.maps.LatLng(b.y, b.x),
d = b.iata ? b.iata : b.icao,
e = a.getZoom() > 11 ? new MarkerWithLabel({
position: c,
clickable: true,
draggable: false,
map: a,
icon: r,
labelContent: d,
labelAnchor: new google.maps.Point(-8, 18),
labelClass: "map-marker-label",
visible: true
}) : new google.maps.Marker({
position: c,
clickable: true,
map: a,
icon: r,
title: d,
zIndex: 1
});
q.push(e)
});
c.weather && $.each(c.weather, function (f, b) {
var c = new google.maps.LatLng(b.y, b.x),
d = b.name,
e = a.getZoom() > 11 ? new MarkerWithLabel({
position: c,
clickable: true,
draggable: false,
map: a,
icon: n,
labelContent: d,
labelAnchor: new google.maps.Point(-8, 18),
labelClass: "map-marker-label",
visible: true
}) : new google.maps.Marker({
position: c,
clickable: true,
map: a,
icon: n,
title: d,
zIndex: 1
});
m.push(e)
});
if (c.photos && c.photos.length != 0) {
$("#bottombar").fadeIn(400);
$("#sidebar .shadow").css({
"margin-top": "-141px"
});
var d = $("#bottombar").find(".content"),
h = function () {
d.empty();
var b;
$.each(c.photos, function (e, c) {
d.append($("<a></a>", {
href: "/photo/view/" + c.id
}).append($("<img/>", {
src: c.url,
style: "width:75px;height:75px;margin:10px;"
})).fadeIn(600).mouseenter(function () {
b && b.setMap(null);
b = new google.maps.Marker({
position: new google.maps.LatLng(c.y, c.x),
clickable: false,
map: a,
icon: A,
shadow: w,
zIndex: 1
})
}).mouseleave(function () {
b && b.setMap(null);
b = null
}))
})
},
e = d.find("a");
if (e.length == 0) h();
else e.fadeOut(100, h)
} else {
$("#bottombar").fadeOut(400, function () {
$("#bottombar .content").empty()
});
$("#sidebar .shadow").css({
"margin-top": "0"
})
}
var g = $("#region-info");
g.empty();
if (c.regions.length != 0) {
var i = $("<ul></ul>").addClass("flat").addClass("link-list").appendTo(g);
$.each(c.regions, function (c, a) {
var b = $("<li></li>");
b.append($("<a></a>").attr({
href: a.url,
"class": "entity"
}).text(a.name)).appendTo(i);
a.flag != null && b.append($("<img></img>").attr({
src: "/f/48/" + a.flag.toLowerCase() + ".png",
"class": "small-region-flag"
}))
});
$("#create-site-at-marker").attr("href", b.createSiteUrl + "?lat=" + a.getCenter().lat() + "&lng=" + a.getCenter().lng());
$("#create-operator-at-marker").attr("href", b.createOperatorUrl + "?lat=" + a.getCenter().lat() + "&lng=" + a.getCenter().lng())
}
l()
}, "json")
},
F = function () {
var b = a.getCenter(),
e = a.getZoom(),
c = "#lat=" + b.lat() + "&lng=" + b.lng() + "&zoom=" + e;
d = c;
window.location.hash = c
},
t = function () {
var e = c("box");
if (e) try {
var b = e.split(",");
if (b.length == 4) {
var h = new google.maps.LatLng(parseFloat(b[0]), parseFloat(b[1])),
g = new google.maps.LatLng(parseFloat(b[2]), parseFloat(b[3])),
f = new google.maps.LatLngBounds(h, g);
a.fitBounds(f);
d = window.location.hash
}
} catch (i) {
console.log(i)
}
};
t();
var I = function () {
setInterval(function () {
if (window.location.hash != d) {
d = window.location.hash;
var b = c("lat"),
e = c("lng"),
f = parseInt(c("zoom"));
if (b && e && f) {
var g = new google.maps.LatLng(b, e);
a.setZoom(f);
a.setCenter(g)
} else t()
}
}, 100)
},
s = new google.maps.places.Autocomplete(document.getElementById("jump-to"), {
types: ["geocode"]
});
google.maps.event.addListener(s, "place_changed", function () {
var b = s.getPlace();
if (b.geometry.viewport) a.fitBounds(b.geometry.viewport);
else a.setCenter(b.geometry.location)
})
}
Raw
index.html
<script src="atlas.js"></script>
<script>
$(document).ready(function () {
var setMapHeight = function() { $('#map-container-atlas').height($(window).height()-85-$('#notify-container').height()); };
$(window).resize(setMapHeight);
$('#notify-container').resize(setMapHeight);
setMapHeight();
initAtlas({
visitedSiteImageUrl:'/c/fe04b0d199.png',
siteImageUrl: '/c/6409df85f8.png',
wreckImageUrl: '/c/f33d4d850d.png',
siteImageLegendUrl: '/c/93e4bf4d82.png',
wreckImageLegendUrl: '/c/018fe231c9.png',
airportImageUrl: '/c/5a1dee36f5.png',
weatherStationImageUrl: '/c/5bd12a8605.png',
shadowImageUrl: '/c/32c6219da4.png',
photoImageLargeUrl: '/c/5610525795.png',
shadowImageLargeUrl: '/c/f3fafd75af.png',
infoIconUrl: '/c/b6b058ca1e.png',
reticuleImageUrl: '/c/ccc4a6d442.gif',
siteDetailsUrl: '/atlas/get-site-detail',
getPointRegionsUrl: '/region/get-point-regions',
createSiteUrl: '/dive-site/create',
createOperatorUrl: '/operator/create',
createRegionUrl: '/region/create',
searchBoxUrl: '/atlas/search-box',
center: new google.maps.LatLng(53.2,50.15),
zoom: 6
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment