<%@include file="/apps/att/common/
components/shared/global.jsp"%
>
<html>
<head>
<script src="
https://ecn.dev.
virtualearth.net/mapcontrol/
mapcontrol.ashx?v=7.0&s=1&mkt=
en-us" type="text/javascript" charset="UTF-8"></script>
<%
pageContext.setAttribute("
currentPagePath",
resourceResolver.map(
currentNode.getPath()));
pageContext.setAttribute("
pushpinExploredPath",
resourceResolver.map(request, "
/mappage/pushpin.png"));
pageContext.setAttribute("
pushpinPlannedPath",
resourceResolver.map(request, "
/pushpin_blue.png"));
pageContext.setAttribute("
pushpinAvailablePath",
resourceResolver.map(request, "
/mappage/pushpin_green.png"));
%>
<script src="
https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
console.log("${
pushpinAvailablePath}");
var map = null, infobox, dataLayer;
var pushpinFrameHTML = '';
var z=4;
var h= jQuery(window).height();
var w= jQuery(window).width();
if(h<=450&&w<=640){z=3; }
function GetMap() {
// Initialize the map
var mapOptions = {
zoom: z,
center: new Microsoft.Maps.Location(39.
7392,-99.9903),
mapTypeId: Microsoft.Maps.MapTypeId.road,
credentials: "Akg_
FZYIXiJc8S0ZecryN60DVoNKcHsd8f
Nm89pSSshPe_
R4y89aoVQB8tBK02zt",
customizeOverlays: true,
showMapTypeSelector:false,
showScalebar:false
}
Microsoft.Maps.loadModule('
Microsoft.Maps.Overlays.Style'
,
{ callback: function() {
map = new Microsoft.Maps.Map(document.
getElementById("myMap"), mapOptions);
jQuery('.MicrosoftMap').
append(jQuery('#myMap > div:first'));
dataLayer = new Microsoft.Maps.
EntityCollection();
map.entities.push(dataLayer);
var infoboxLayer = new Microsoft.Maps.
EntityCollection();
map.entities.push(
infoboxLayer);
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, height: 100, width: 150,offset: new Microsoft.Maps.Point(-13, 30) });
infoboxLayer.push(infobox);
map.getZoomRange = function (){
return {
max: 10,
min: z
};
};
}
});
AddData();
}
function AddData() {
var data = "[]";
jQuery.ajax({ url:'<c:out value="${currentPagePath}.xhr.
json"/>', cache: false, dataType: 'text', success: function(data){
var json = jQuery.parseJSON(data);
data = json.mapdata;
var imgSrc="",i=0,pin1;
pushpinFrameHTML ='';
console.log('Returned data --> ' + data);
for(i = 0; i < data.length; i++) {
if(data[i].availability == "explored") {
imgSrc = '<c:out value="${pushpinExploredPath}"
/>';
//pushpinFrameHTML = '<div class="infobox_orange"><div class="infobox_content2">{
content}</div></div>';
pushpinFrameHTML = '<div class="infobox_other nfoorange"><div class="infobox_banner"></div><
div class="infobox_content">{
content}</div></div><div class="infobox_pointer_other orangepointer"></div>';
pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[
i].latitude, data[i].longitude),{icon:
imgSrc, height:50, width:50, draggable: false});
pin1.Title = data[i].district+", "+data[i].state+"";
pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Keep me updated</a></div>';
pin1.name = pushpinFrameHTML;
Microsoft.Maps.Events.
addHandler(pin1, 'click', displayInfobox);
Microsoft.Maps.Events.
addHandler(map,'
viewchangestart',restrictZoom)
;
dataLayer.push(pin1);
}}
for(i = 0; i < data.length; i++) {
if(data[i].availability == "planned") {
imgSrc = '<c:out value="${pushpinPlannedPath}"/
>';
//pushpinFrameHTML = '<div class="infobox_blue"><div class="infobox_content2">{
content}</div></div>';
pushpinFrameHTML = '<div class="infobox_other nfoblue"><div class="infobox_banner"></div><
div class="infobox_content">{
content}</div></div><div class="infobox_pointer_other bluepointer"></div>';
pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[
i].latitude, data[i].longitude),{icon:
imgSrc, height:50, width:50, draggable: false});
pin1.Title = data[i].district+", "+data[i].state+"";
pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Keep me updated</a></div>';
pin1.name = pushpinFrameHTML;
Microsoft.Maps.Events.
addHandler(pin1, 'click', displayInfobox);
Microsoft.Maps.Events.
addHandler(map,'
viewchangestart',restrictZoom)
;
dataLayer.push(pin1);
}
}
for(i = 0; i < data.length; i++) {
if(data[i].availability == "available") {
imgSrc ='<c:out value="${pushpinAvailablePath}
"/>';
//pushpinFrameHTML = '<div class="infobox_green"><div class="infobox_content">{
content}</div></div>';
pushpinFrameHTML = '<div class="infobox nfogreen"><div class="infobox_banner"></div><
div class="infobox_content">{
content}</div></div><div class="infobox_pointer greenpointer"></div>';
pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[
i].latitude, data[i].longitude),{icon:
imgSrc, height:50, width:50, draggable: false});
pin1.Title = data[i].district+", "+data[i].state+"";
pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Shop now</a></div>';
pin1.name = pushpinFrameHTML;
Microsoft.Maps.Events.
addHandler(pin1, 'click', displayInfobox);
Microsoft.Maps.Events.
addHandler(map,'
viewchangestart',restrictZoom)
;
dataLayer.push(pin1);
}}
}});
}
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.
getLocation());
console.log("description of infobox is:"+e.target.Description + "::::"+
e.target.name);
var html = "<div class='infobox_title'>" + e.target.Title + "</div>" + e.target.Description;
pushpinFrameHTML =
e.target.name;
infobox.setOptions({
visible: true,
htmlContent: pushpinFrameHTML.replace('{
content}',html)
});
Microsoft.Maps.Events.
addHandler(map, 'viewchangestart', function () {setTimeout('var mapctrl2 = map.entities.get(map.entities.
getLength()-1); infobox.setOptions({visible:
false})', 20)});
Microsoft.Maps.Events.
addHandler(infobox, 'click', function () {setTimeout('var mapctrl3 = map.entities.get(map.entities.
getLength()-1); infobox.setOptions({visible:
false})', 20)});
}
var newWidth = jQuery(".infobox_title").
width();
infobox.setOptions({
offset: new Microsoft.Maps.Point(-(
newWidth+62), 48),
});
}
<body onload="GetMap();">
<div id='myMap' style="position:relative;
width:100%;height:100%; float:center;padding:0px;
margin:0px;">
</div>
</body>
</html>
<style>
