Launching Your Ideas



<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4compact/"></script>

<script>
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Gallery");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.dijit.PopupMobile");

var map;
var locator;
var currentItem;
var arcgisURL = "http://arcgis.com/sharing/content/items/";
var bingMapsKey;
var urlObject;
var popup;

dojo.ready(function () {
$(document).ready(jQueryReady);
});

function jQueryReady() {
//resize the map content section
$('#mapcontent').height($(window).height());

//onorientationchange doesn't always fire in a timely manner in Android so check for both orientationchange and resize
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function () {
orientationChanged();
}, false);

urlObject = esri.urlToObject(document.location.href);
urlObject.query = urlObject.query || {};

var webmap = urlObject.query.webmap || "dbd1c6d52f4e447f8c01d14a691a70fe";

bingMapsKey = urlObject.query.bingMapsKey || "Akt3ZoeZ089qyG3zWQZSWpwV3r864AHStal7Aon21-Fyxwq_KdydAH32LTwhieA8";

//initialize the geocoder
locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
dojo.connect(locator, "onAddressToLocationsComplete", showResults);

//create the map using the webmap id
//create a mobile popup
popup = new esri.dijit.PopupMobile(null, dojo.create("div"));
var mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
mapOptions :{
infoWindow:popup
},
ignorePopups:false,
bingMapsKey :bingMapsKey
});
mapDeferred.addCallback(function (response) {
map = response.map;

currentItem = response.itemInfo;
$("#webmapTitle").html(currentItem.item.title);

resizeMap();
});

$('#infoDialog').bind('pagebeforeshow', function (event, ui) {
$("#webmapTitleInfo").html(currentItem.item.title);
$("#snippet").html(currentItem.item.snippet);
$("#description").html(currentItem.item.description);
$("#mapThumbnail").attr("src", arcgisURL + currentItem.item.id + "/info/" + currentItem.item.thumbnail);
});
//add the legend
$('#legendDialog').bind('pagebeforeshow', function (event, ui) {
$(this).unbind(event);
var layerInfo = [];
dojo.forEach(currentItem.itemData.operationalLayers, function (layer) {
if ((!layer.featureCollection) && (layer.layerObject)) {
layerInfo.push({
layer:layer.layerObject,
title:layer.title
});
}
});
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map :map,
layerInfos:layerInfo
}, "legendDiv");

legendDijit.startup();
} else {
$("#legendDiv").html("No operational layers");
}
});

//setup the basemap gallery
$('#detailDialog').bind('pagebeforeshow', function (event, ui) {
$(this).unbind(event);
$("#currentBasemap").html(currentItem.itemData.baseMap.title);
var basemaps = new esri.dijit.BasemapGallery({
showArcGISBasemaps:true,
map :map
});
dojo.connect(basemaps, "onLoad", function () {
items = $.map(basemaps.basemaps, function (basemap) {
return {
thumbnailUrl:basemap.thumbnailUrl,
id :basemap.id,
title :basemap.title
};
});

//display basemaps in the gallery
var params = {};
params.items = items;
params.thumbnailStyle = "small";
var gallery = new esri.dijit.Gallery(params, "galleryDiv");

dojo.connect(gallery, "onSelect", function (item) {
basemaps.select(item.id);
//close the dialog
$('#detailDialog').dialog('close');
});

gallery.startup();
});
});
}

//mark current location on map
function zoomToLocation(location) {
//clear existing graphics
map.graphics.clear();
$.mobile.hidePageLoadingMsg();
var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(location.coords.longitude, location.coords.latitude));
map.centerAndZoom(pt, 13);
var symbol = new esri.symbol.PictureMarkerSymbol("images/bluedot.png", 40, 40);
map.graphics.add(new esri.Graphic(pt, symbol));
}

function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
console.log("Location not provided");
break;
case error.POSITION_UNAVAILABLE:
console.log("Current location not available");
break;
case error.TIMEOUT:
console.log("Timeout");
break;
default:
console.log("unknown error");
break;
}
}

function getLocation() {
if (navigator.geolocation) {
$.mobile.showPageLoadingMsg();
//true hides the dialog
//if you want to track as the user moves setup navigator.geolocation.watchPostion
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
}
}

function findLocation() {
var searchText = $("#search")[0].value;
//clear existing list results
$('#searchList li').remove();
map.graphics.clear();
var address = {
'SingleLine':searchText
};
locator.addressToLocations(address, ["*"]);
}

function showResults(results) {
//create a pick list of results
$.each(results, function (i, result) {

var li = $('<li class="linklist"/>');
$('.linklist').click(function () {
addResult(result);
});

//create the list content
var content = "<a href='#'>" + result.address + "</a>";

li.append(content);
//add the list item to the feature type list
$('#searchList').append(li);
});
//refresh the featurelist so the jquery mobile style is applied
$('#searchList').listview('refresh');
}

function addResult(result) {
//clear any existing graphics
map.graphics.clear();
//add selected geocode result to map and zoom
var infoTemplate = new esri.InfoTemplate("Result", "${*}");
var r = Math.floor(Math.random() * 250);
var g = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);

var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([r, g, b, 0.5]), 5), new dojo.Color([r, g, b, 0.9]));
var wmloc = esri.geometry.geographicToWebMercator(result.location);
var attr = {
"Address":result.address
};

var graphic = new esri.Graphic(wmloc, symbol, attr, infoTemplate);

map.graphics.add(graphic);
//convert point to extent and expand a bit
var ptAttr = result.attributes;
var esriExtent = new esri.geometry.Extent(ptAttr.West_Lon, ptAttr.South_Lat, ptAttr.East_Lon, ptAttr.North_Lat, new esri.SpatialReference({
wkid:4326
}));
var extent = esri.geometry.geographicToWebMercator(esriExtent);
map.setExtent(extent);
//close the dialog
$('#searchDialog').dialog('close');
}

function orientationChanged() {
resizeMap();
}

function resizeMap() {
if (map) {
//resize map section
$('#map').css("height", screen.height);
$('#map').css("width", "auto");

map.reposition();
map.resize();
}
}
</script>