javascript - example - Problemas para agregar un widget de búsqueda a la aplicación ArcGIS Shortlist Story
esri javascript map example (2)
Tengo problemas para agregar un widget de búsqueda a una aplicación de lista restringida. He incluido el código a continuación. La barra de búsqueda aparece, pero no funciona. Necesito tener esto para que pueda buscar nombres comerciales que están incluidos en la aplicación.
<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);
Bueno, aquí está el código de trabajo para el widget de búsqueda esri.
Solo necesita las bibliotecas necesarias y complemente el código.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Search with Suggestion Template</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
require([
"esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"
], function (Map, Search, FeatureLayer,InfoTemplate) {
var map = new Map("map", {
basemap: "gray",
center: [-82.93, 42.5], // lon, lat
zoom: 10
});
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("https://services.arcgis.com/b6gLrKHqgkQb393u/arcgis/rest/services/TaxParcelQuery/FeatureServer/0", {
outFields: ["*"],
infoTemplate: new InfoTemplate("Parcels", "Owner name: ${OWNERNME1}</br>Parcel ID: ${PARCELID}</br>Site address: ${SITEADDRESS}")
}),
outFields: ["OWNERNME1","PARCELID","SITEADDRESS"],
displayField: "OWNERNME1",
suggestionTemplate: "${PARCELID}: ${SITEADDRESS}",
name: "Parcels",
placeholder: "example: Shawn Smith",
enableSuggestions: true
}],
map: map
}, "search");
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
Esperando que esto te ayude :)
Bueno, revisé tu código, el error principal que puedo ver es ese error de definición múltiple.
Causa principal:
La razón principal de esto es que estás cargando esas bibliotecas más de una vez que exponen define.
Solución:
En su caso, noté que ha cargado ArcGIS JS Api más de una vez.
Solo cargue una sola fuente de ArcGIS, debería funcionar.
Una más delgada en el código adjunto que está utilizando múltiples versiones de CSS.
- se supone que debes usar la misma versión de ESRI CSS que estás usando para JS.
- De acuerdo con su código, está utilizando un modelo heredado de estilo de codificación, así que
arcgis js api''sversión solo dearcgis js api''s.
Código sin error de definición múltiple: https://jsfiddle.net/vikash2402/362ft9g7/
Esperando que esto te ayude :)