Проблема при добавлении виджета поиска в приложение ArcGIS Shortlist Story
У меня проблемы с добавлением виджета поиска в приложение для создания короткого списка. Я включил код ниже. Панель поиска появляется, но не работает. Мне нужно иметь это, чтобы он мог искать названия компаний, которые включены в приложение.
<html>
<head>
<title>ChahtaPreneur</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="image/ico" rel="shortcut icon" href="//resources.esri.com/favicon.ico">
<link type="image/ico" rel="icon" href="//resources.esri.com/favicon.ico">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="colorbox/colorbox.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/common/helper_functions.js"></script>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<style>
html,body,
#mapDiv,.map.container{
padding:0;
margin:0;
height:100%;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 720px;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<!--
To correctly reference your Shortlist in search engine:
- create and fill out extensively an ArcGIS Online item that link to your final application
- edit the following four tags as well as the title tag above on line 4
-->
<meta name="description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online.">
<!-- Facebook sharing -->
<meta property="og:type" content="article"/>
<meta property="og:title" content="Story Map Shortlist"/>
<meta property="og:description" content="This story map was created with the Story Map Shortlist application in ArcGIS Online."/>
<meta property="og:image" content="resources/common/icons/esri-globe.png"/>
<!--
This application is released under the Apache License V2.0 by Esri http://www.esri.com/
Checkout the project repository on GitHub to access source code, latest revision, developer documentation, FAQ and tips
https://github.com/Esri/shortlist-storytelling-template-js
-->
<script type="text/javascript">
//-------------------------------------------------------------------------------------------
// Application configuration (ignored on ArcGIS Online, Portal and during development)
//-------------------------------------------------------------------------------------------
var configOptions = {
// Enter an application ID created through the Shortlist builder
appid: "f8c9b5d9a2c64703bb72910f46f59d7c",
// Optionally to secure Shortlist's access, use an OAuth application ID (example: 6gyOg377fLUhUk6f)
// User will need to sign-in to access the viewer even if your application is public
oAuthAppId: "",
// Optionally to be able to use the appid URL parameter, configure here the list of application author
// whose application are allowed to be viewed by this Shortlist deployment
// This is the Portal username of the Shortlist owner (e.g. ["user1"], ["user1", "user2"])
authorizedOwners: ["*"]
};
// Optionally sharing and proxy URLs can be configured in app/config.js. This is only required
// when the webmap is not hosted on ArcGIS Online or a Portal for ArcGIS instance and the application isn't deployed as /home/Shortlist/ or /apps/Shortlist/.
// Optionally Bing Maps key, Geometry and Geocode service's URLs can be configured in app/config.js. This is only required
// if the Organization or Portal for ArcGIS instance default configuration has to be overwritten.
</script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("esri.dijit.Geocoder");
/******************************************************
******************** config section ******************
*******************************************************/
var WEBMAP_ID = "6b3d1da24e5841f1b8d47de63b7be7a4";
var BOOKMARKS_ALIAS = "Zoom";
var COLOR_ORDER = "green,red,blue,purple"; // will only use as many colors as you have content (point) layers
var BINGMAPS_KEY = "";
/******************************************************
******************** app variables ********************
*******************************************************/
var _contentLayers = [];
var _isMobile = isMobile();
var _map;
var _bookmarks;
var _layerCurrent;
var _selected;
var _initExtent;
var _dojoReady = false;
var _jqueryReady = false;
var geocoder;
var locatorUrl = "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/";
/******************************************************
************************* init ************************
*******************************************************/
dojo.addOnLoad(function() {_dojoReady = true;init()});
jQuery(document).ready(function() {_jqueryReady = true;init()});
/* init comes in two parts because of async call to
createMap. */
function init() {
if (!_jqueryReady) return;
if (!_dojoReady) return;
if (getParameterByName("webmap") != "") {
WEBMAP_ID = getParameterByName("webmap");
}
if (getParameterByName("bookmarks_alias") != "") {
BOOKMARKS_ALIAS = getParameterByName("bookmarks_alias");
}
if (getParameterByName("color_order") != "") {
COLOR_ORDER = getParameterByName("color_order")
}
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼');
$(this).resize(handleWindowResize);
$("#zoomIn").click(function(e) {
_map.setLevel(_map.getLevel()+1);
});
$("#zoomOut").click(function(e) {
_map.setLevel(_map.getLevel()-1);
});
$("#zoomExtent").click(function(e) {
_map.setExtent(_initExtent);
});
$(document).bind('cbox_complete', function(){
$(".details .rightDiv").height($(".details").height() - 65);
});
$("#bookmarksToggle").click(function(){
if ($("#bookmarksDiv").css('display')=='none'){
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▲');
}
else{
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼');
}
$("#bookmarksDiv").slideToggle();
});
var mapDeferred = esri.arcgis.utils.createMap(WEBMAP_ID, "map", {
mapOptions: {
slider: false,
wrapAround180:false
},
ignorePopups: true,
bingMapsKey: BINGMAPS_KEY
});
mapDeferred.addCallback(function(response) {
document.title = response.itemInfo.item.title;
$("#title").html(response.itemInfo.item.title);
$("#subtitle").html(response.itemInfo.item.snippet);
_map = response.map;
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', _map,_map.resize);
dojo.connect(_map, 'onExtentChange', refreshList);
// click action on the map where there's no graphic
// causes a deselect.
dojo.connect(_map, 'onClick', function(event){
if (event.graphic == null) {
unselect();
}
});
_bookmarks = response.itemInfo.itemData.bookmarks;
if (_bookmarks) {
loadBookmarks();
$("#bookmarksCon").show();
}
var layers = response.itemInfo.itemData.operationalLayers;
if(_map.loaded){
initMap(layers);
} else {
dojo.connect(_map,"onLoad",function(){
initMap(layers);
});
}
});
mapDeferred.addErrback(function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
}
function initMap(layers) {
var supportLayers = [];
var pointLayers = [""];
$.each(layers,function(index,value){
if (value.url == null) {
if (value.featureCollection.layers[0].featureSet.geometryType == "esriGeometryPoint") {
pointLayers.push(value);
} else {
supportLayers.push(value);
}
} else {
// if the layer has an url property (meaning that it comes from a service), just
// keep going...it will remain in the map, but won't be query-able.
}
});
_initExtent = _map.extent;
var supportLayer;
$.each(supportLayers,function(index,value) {
supportLayer = findLayer(_map,value.title);
if (supportLayer == null) return;
$.each(supportLayer.graphics,function(index,value) {
value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity
});
dojo.connect(supportLayer, "onMouseOver", baselayer_onMouseOver);
dojo.connect(supportLayer, "onMouseOut", baselayer_onMouseOut);
dojo.connect(supportLayer, "onClick", baselayer_onClick);
});
if (COLOR_ORDER.split(",").length < pointLayers.length) {
// you have supplied fewer colors than point layers and
// therefore have lost your sorting privileges...
colorschemes = COLOR_SCHEMES;
} else {
// sort the colors
var colorschemes = getSortedColorSchemes();
// burn off any extra colors, if you have more colors
// than points.
while (pointLayers.length < colorschemes.length) {
colorschemes.shift()
};
}
var contentLayer;
$.each(pointLayers,function(index,value) {
_map.removeLayer(findLayer(_map,value.title));
if (index <= 4) { // maximum of 4 point layers.
$.each(value.featureCollection.layers[0].featureSet.features,function(index,value) {
value.attributes.getValueCI = getValueCI; // assign extra method to handle case sensitivity
});
contentLayer = buildLayer(
value.featureCollection.layers[0].featureSet.features.sort(SortByID),
colorschemes[index].iconDir,
colorschemes[index].iconPrefix
);
contentLayer.color = colorschemes[index].color;
contentLayer.title = value.title;
dojo.connect(contentLayer, "onMouseOver", layer_onMouseOver);
dojo.connect(contentLayer, "onMouseOut", layer_onMouseOut);
dojo.connect(contentLayer, "onClick", layer_onClick);
_map.addLayer(contentLayer);
_contentLayers.push(contentLayer);
}
});
_contentLayers.reverse();
$.each(_contentLayers,function(index,value){
$("#tabs").append('<div class="tab" onclick="activateLayer(_contentLayers['+index+'])">'+value.title+'</div>');
});
activateLayer(_contentLayers[0]);
dojo.connect(_map.infoWindow,"onHide",infoWindow_onHide);
handleWindowResize();
$("#zoomToggle").css("visibility","visible");
// Solomon Additions
// add a graphics layer for geocoding results
_map.addLayer(new esri.layers.GraphicsLayer({
id: "results"
}));
var myGeocoders = [{
url: locatorUrl,
name: "Single_Line"
}];
// create the geocoder
geocoder = new esri.dijit.Geocoder({
autoComplete : true,
autoNavigate: true,
localSearchOptions : {
minScale : 3,
distance : 4000},
maxLocations : 20,
arcgisGeocoder: false,
geocoders:myGeocoders,
value:'Search by Name',
map : _map
}, "search");
geocoder.startup();
geocoder.focus();
var symbol = new esri.symbol.PictureMarkerSymbol({
"angle":0,
"xoffset":0,
"yoffset":10,
"type":"esriPMS",
"url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
"contentType":"image/png",
"width":24,
"height":24
});
var template = new esri.InfoTemplate("${NAME}", "${*}");
dojo.connect(geocoder, "onFindResults", function(response) {
//STEVE CHANGES
//Use first match
//var name = response.results[0].name;
//Match name with locations layer and selected that index
//for(i in _locations){
//if(name === _locations[i].attributes.getName()){
//preSelection()
//_selected = _locations[i];
//postSelection();
//}
//}
//STEVE CHANGES END
console.log("find results: ", response);
var l = _map.getLayer("shortlistlayer");
l.clear();
_map.infoWindow.hide();
dojo.forEach(response.results, function(r) {
r.feature.attributes.NAME = r.NAME;
r.feature.setSymbol(symbol);
r.feature.setInfoTemplate(template);
l.add(r.feature);
});
});
// solomon Addition Ends
}
/******************************************************
******************** event handlers *******************
*******************************************************/
function tile_onMouseOver(e) {
$(this).stop().animate({'background-color' : COLOR_FULL});
}
function tile_onMouseOut(e) {
if (_selected != null) {
// does this tile represent the selected graphic?
var id = parseInt($(this).attr("id").substring(4));
if (_selected.attributes.getValueCI("Number") == id) {
return;
}
}
$(this).stop().animate({'background-color' : COLOR_DIM});
}
function tile_onClick(e) {
// turn off the last selected tile...
if (_selected != null) {
var tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0];
if ($(tile).attr("id") != $(this).attr("id")) $(tile).stop().animate({'background-color' : COLOR_DIM});
}
$(this).stop().animate({'background-color' : COLOR_FULL});
var id= $(this).attr("id").substring(4);
_selected = $.grep(_layerCurrent.graphics,function(n,i){return n.attributes.getValueCI("Number") == id})[0];
postSelection();
}
function infoWindow_onHide(event) {
unselect();
}
function baselayer_onMouseOver(event)
{
if (_isMobile) return;
_map.setMapCursor("pointer");
var graphic = event.graphic;
$("#hoverInfo").html(graphic.attributes.getValueCI("Title"));
var pt = event.screenPoint;
hoverInfoPos(pt.x,pt.y);
}
function baselayer_onMouseOut(event)
{
if (_isMobile) return;
_map.setMapCursor("default");
$("#hoverInfo").hide();
}
function baselayer_onClick(event) {
var feature = event.graphic;
_map.infoWindow.setTitle(event.graphic.attributes.getValueCI("NAME"));
_map.infoWindow.setContent(event.graphic.attributes.getValueCI("CAPTION")+"<p><span class='infoWindowLink'>Details >></span></p>");
_map.infoWindow.show(event.mapPoint);
$(".infoWindowLink").click(function(e) {
showDetails(feature);
});
$("#hoverInfo").hide();
}
function layer_onClick(event)
{
var tile;
if (_selected != null) {
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0]
$(tile).stop().animate({'background-color' : COLOR_DIM});
}
_selected = event.graphic;
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0]
$(tile).stop().animate({'background-color' : COLOR_FULL});
postSelection();
}
function layer_onMouseOver(event)
{
if (_isMobile) return;
_map.setMapCursor("pointer");
var graphic = event.graphic;
if (graphic == _selected) return;
graphic.setSymbol(graphic.symbol.setHeight(30).setWidth(24));
$("#hoverInfo").html(graphic.attributes.getValueCI("NAME"));
var pt = _map.toScreen(graphic.geometry);
hoverInfoPos(pt.x,pt.y);
}
function layer_onMouseOut(event)
{
if (_isMobile) return;
_map.setMapCursor("default");
var graphic = event.graphic;
graphic.setSymbol(graphic.symbol.setHeight(28).setWidth(22));
$("#hoverInfo").hide();
}
/******************************************************
****************** other functions ********************
*******************************************************/
function unselect() {
if (_selected != null) {
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+_selected.attributes.getValueCI("Number")})[0]
$(tile).stop().animate({'background-color' : COLOR_DIM});
}
_selected = null;
postSelection();
}
// sort items by numeric ID
function SortByID(a, b){
var aID = a.attributes.getValueCI("Number");
var bID = b.attributes.getValueCI("Number");
return ((aID < bID) ? -1 : ((aID > bID) ? 1 : 0));
}
function loadBookmarks() {
$.each(_bookmarks,function(index,value){$("#bookmarksDiv").append("<p><a>"+value.name+"</a></p>")});
$("#bookmarksDiv a").click(function(e) {
var name = $(this).html();
var extent = new esri.geometry.Extent($.grep(_bookmarks,function(n,i){return n.name == name})[0].extent);
_map.setExtent(extent);
$("#bookmarksTogText").html(BOOKMARKS_ALIAS+' ▼');
$("#bookmarksDiv").slideToggle();
});
}
function activateLayer(layer) {
_selected = null;
postSelection();
_layerCurrent = layer;
var tab = $.grep($(".tab"),function(n,i){return $(n).html() == _layerCurrent.title})[0];
$(".tab").removeClass("tab-selected");
$(tab).addClass("tab-selected");
$.each(_contentLayers,function(index,value){
value.setVisibility(value == _layerCurrent);
});
$("#myList").empty();
var display;
var tile;
var img;
var footer;
var num;
var title;
$.each(_layerCurrent.graphics,function(index,value){
if (_map.extent.contains(value.geometry)) {
display = "visible"
} else {
display = "none";
}
tile = $('<li id="item'+value.attributes.getValueCI("Number")+'" style="display:'+display+'">');
img = $('<img src="'+value.attributes.getValueCI("THUMB_URL")+'">');
footer = $('<div class="footer"></div>');
num = $('<div class="num" style="background-color:'+_layerCurrent.color+'">'+value.attributes.getValueCI("Number")+'</div>');
title = $('<div class="blurb">'+value.attributes.getValueCI("Name")+'</div>');
$(footer).append(num);
$(footer).append(title);
$(tile).append(img);
$(tile).append(footer);
$("#myList").append(tile);
});
// event handlers have to be re-assigned every time you load the list...
$("ul.tilelist li").mouseover(tile_onMouseOver);
$("ul.tilelist li").mouseout(tile_onMouseOut);
$("ul.tilelist li").click(tile_onClick);
$("ul.tilelist").animate({ scrollTop: 0 }, { duration: 200 } );
}
function refreshList() {
var tile;
$.each(_layerCurrent.graphics,function(index,value){
//find the corresponding tile
tile = $.grep($("ul.tilelist li"),function(n,i){return n.id == "item"+value.attributes.getValueCI("Number")})[0];
if (_map.extent.contains(value.geometry)) {
if ($(tile).css("display") == "none") $(tile).stop().fadeIn();
} else {
if ($(tile).css("display") != "none") $(tile).stop().fadeOut(1000);
}
});
}
function buildLayer(arr,iconDir,root) {
var layer = new esri.layers.GraphicsLayer();
var pt;
var sym;
$.each(arr,function(index,value){
pt = new esri.geometry.Point(value.geometry.x,value.geometry.y,value.geometry.spatialReference);
sym = new esri.symbol.PictureMarkerSymbol("images/icons/"+iconDir+"/"+root+value.attributes.getValueCI("Number")+".png",22,28);
layer.add(new esri.Graphic(pt,sym,value.attributes));
});
return layer;
}
function getValueCI(field) {
var found;
$.each(this,function(index,value){
if (index.toUpperCase() == field.toUpperCase()) {
found = index;
return false;
}
});
return this[found];
}
function handleWindowResize() {
var heightDoc = getViewportDimensions()[1];
$("#mainWindow").height(heightDoc - ($("#header").height()));
dijit.byId("mainWindow").layout();
$("#paneLeft").height($("#mainWindow").height() - 35);
$(".tilelist").height($("#paneLeft").height() - 20);
$("#map").height($("#mainWindow").height() - 35);