|
POST
|
I couldn't figure out where to report it. I think it's specifically part of the bootstrap-map, because it works just fine when I'm using regular esri/map. I'm not savvy enough to contribute to the gitHub and when I looked around on it, I couldn't even figure out where it was coming from. I finally gave up.
... View more
06-25-2015
02:37 PM
|
0
|
0
|
2046
|
|
POST
|
I have a long-ish function that is setting my infoContent. Right before I return the formatted string I added: if (!dom.byId('zoomLink')){
app.link = domConstruct.create("a",{
"class": "action zoomTo myZoom",
"id": "zoomLink",
"title":"My Zoom",
"innerHTML": "Zoom To", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".sizer", app.map.infoWindow.domNode)[1]);
on(app.link, "click", zoomTo);
} The myZoom class just has a margin-left of 10px to get it to line up with the rest of the content. My zoomTo function looks like this: function zoomTo(){
var geom = app.currentGraphic.geometry;
var lod = app.map.getLevel();
if (lod < 8){
app.map.centerAndZoom(geom,8);
}else {
app.map.centerAndZoom(geom, lod+1);
}
app.map.infoWindow.setFeatures(app.currentGraphic);
app.map.infoWindow.show(app.currentGraphic.geometry);
} I found that if I didn't set the infoWindow feature again, the tag didn't appear in the right place once I zoomed, Hopefully this helps someone.
... View more
06-25-2015
02:15 PM
|
0
|
0
|
2046
|
|
POST
|
I really don't know where that's getting set in the code. I looked around, but couldn't find it. It's something in ESRI, not in my code. I thought I had a work around a moment ago, but realized I was adding multiple 'Zoom' links and not just one. I just about got it figured out, I think.
... View more
06-25-2015
02:11 PM
|
0
|
3
|
2046
|
|
POST
|
I am using a bootstrap map and pulling the styles from <link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> I am using a standard esri/dijit/Popup with an esri/InfoTemplate for the infoWindow of my featureLayer. The 'zoom to' in the action pane is not displaying. As I look into the elements of the infoWindow, I see that the style is coming from esriPopup.light as opposed to just .esriPopup. Is this because of the bootstrap css I've referenced? When I look the actionPane at the bottom of a typical infoWindow, the anchor looks like this: <a class="action zoomTo" href="javascript:void(0);">Zoom to</a> With the esriPopup.light, instead it looks like this <a title="Zoom" to class="action zoomTo" href="javascript:void(0);"><span>Zoom to</span></a> It says it's getting its style from esri.css, not the bootstrap.css. I'm not familiar with all the nuances of CSS, but I've never seen 'to class'. Is this a bug in the code? This isn't anything I wrote, I simply defined my popup and infoTemplate like I normally would. Looking at the elements, it would appear there is an attempt to have a Zoom To anchor, but in reality, there's just a narrow band where the actionPane sits.
... View more
06-18-2015
08:50 AM
|
0
|
5
|
4938
|
|
POST
|
I only tried the lang.hitch because it was a solution to a problem I had just the other day. I tried it first w/o it. It would work for 2-3 grid clicks and then decide not to. When I say 'locking up', I mean my entire browser session acts like it's not working. If you wait a long time (at least 30 seconds) often the info tag will eventually draw. That's way too long for a user to wait. If you click the record enough times, eventually the browser (Chrome) becomes non-responsive and I've had to go into Task Manager and kill it. I'm also seeing graphic drawing time out errors in the console that I was told relate to drawing of featureLayers that start before the map is done panning/zooming. The lang.hitch was supposed to help with that. Here's a link to where I'm testing this. I took out the lang.hitch lines. My Third Bootstrap
... View more
06-15-2015
07:59 AM
|
0
|
0
|
944
|
|
POST
|
I have a featureLayer with a lot of points that's based on an XY event from a external database. I also have a definition expression that's rather long and an extent change handler that's populating a dGrid. All of these are performance issues, I know. This is working well in general except for the click event I have on my dgrid. It's locking up regularly and I think's it's because it's not finishing the query/drawing. I can see I have several lines in my debugger that are 'pending'. I don't the hang of using lang.hitch yet and I think it might help me. I'd like to have it zoom to the feature when it's clicked if it's zoomed out pretty far. If it's zoomed already, then I only want to pan to the point before I display the info tag. I haven't had it lock up on me at all when I'm not also trying to pan or zoom. I'm using a bootstrap-map and the info tags for it don't have the same 'Zoom To' link at the bottom that the standard popups do. Maybe an alternative is to introduce that into my popup instead. I'm not sure how to go about that. Here's the relevant code: //functions for populating the grids, limited to features in current extent
function updateGrid(){
showLoading(); //shows spinning loading image
var query = new Query();
query.where = '1=1';//note: featureLayer already has a definition expression defined
query.geometry = app.currentExtent; //currentExtent set by map extent-change handler
app.featureLayer.on("selection-complete", featureLayerQueryHandler);
app.featureLayer.selectFeatures(query);
}
function featureLayerQueryHandler(response){
var data = [];
if (app.datagrid){
app.datagrid.refresh();
}
if (response.features.length == 0) {
dom.byId('gridHeader').innerHTML = "No "+searchType + " providers available in this area."
}else{
if (searchType.length > 0){
dom.byId('gridHeader').innerHTML = searchType+ " providers in this area:"
}else{
dom.byId('gridHeader').innerHTML = "Providers in this area:"
}
}
data = arrayUtils.map(response.features, function(feature){
var provTest = findProvCode(feature.attributes.ID_PROV_TYPE_FK);
if (!provTest){ //if a code isn't found in the provider table,just show the code
provTest = feature.attributes.ID_PROV_TYPE_FK;
}
var specTest = findSpecCode(feature.attributes.ID_SPECIALTY_FK);
if (!specTest){ //if a code isn't found in the speciality table, just show the code
specTest = feature.attributes.ID_SPECIALTY_FK;
}
return {
'id': feature.attributes.ESRI_OID,
'facility': feature.attributes.NA_PROVIDER,
'address': feature.attributes.AD_LINE1,
'address2':feature.attributes.AD_LINE2,
'city': feature.attributes.AD_CITY,
'state': feature.attributes.AD_STATE,
'phone':phoneFormatter(feature.attributes.PH_NUMBER),
'zip':feature.attributes.AD_ZIP_CODE,
'provider':provTest,
'specialty':specTest
};
});
var currentMemory = new Memory({
data: data,
idProperty: 'id'
});
app.datagrid.set('store', currentMemory);
app.datagrid.sort('facility');
app.datagrid.on('.dgrid-row:click', function(event){
var row = app.datagrid.row(event);
var gridQuery = new Query();
gridQuery.objectIds = [row.data.id];
app.featureLayer.queryFeatures(gridQuery, function(results){
if (results.features.length > 0) {
var feature = results.features[0];
feature.setInfoTemplate(app.infoTemplate);
var resultGeometry = results.features[0].geometry;
app.map.infoWindow.setFeatures(results.features);
app.map.infoWindow.show(resultGeometry);
var currentZoom = app.map.getZoom();
//this is where I attempted to show the information tag after the map has zoomed or panned
/* if (currentZoom > 12) {
app.map.centerAt(resultGeometry, 12)
.then(lang.hitch(this, function(){
app.map.infoWindow.setFeatures(results.features);
app.map.infoWindow.show(resultGeometry);
}));
*/
/* }
else {
app.map.centerAndZoom(resultGeometry, 12)
.then(lang.hitch(this, function(){
app.map.infoWindow.setFeatures(results.features);
app.map.infoWindow.show(resultGeometry);
}));
}*/
app.map.infoWindow.setFeatures(results.features);
app.map.infoWindow.show(resultGeometry);
}
else {
console.log("error in grid.on click function");
}
}); //end queryFeatures
}); //end grid click
hideLoading();// turns off spinning load image
}
... View more
06-15-2015
07:25 AM
|
0
|
2
|
3368
|
|
POST
|
I have a print button on my map that I would like to hide if the user is accessing the map from a mobile device. I have a media query set up @media (max-width:767px) { #btnPrint { visibility:hidden } } but the problem is the wide range of resolutions available on mobile devices. I could easily have a user hitting the site with a desktop, where I do want them to have a print button. It seems like a media query isn't going to cover all the bases. It seems to be OK for a typical phone, but not for something like a tablet. Is there another (or better) way to handle this?
... View more
06-10-2015
02:02 PM
|
0
|
2
|
3105
|
|
POST
|
That seems to have done the trick. Since I defined the map as a bootstrapMap, one of the things it seems to try to do is pan to keep the info tag completely on the display. That's nice, but it does mean there is more panning that's going on then a typical esri/map. I did a bunch of random clicking and address entering and no matter how quickly I went, once I geocoded the tag was properly anchored to the flag.
... View more
06-10-2015
06:59 AM
|
0
|
0
|
1574
|
|
POST
|
You just happen to look at it when I had moved on to adding some print functionality. I took that part out again. That wasn't it. As far as looking at making one of my events pausable, I'm not sure what event I'm pausing or when. I had a similar problem with identify and measuring as well and fixed it using pausable with dojo/on. In this case I'm not sure what I'm pausing. I don't have a map click event defined. The problem I'm seeing is random. It will be fine for two or three times, but then it will decide not to work again. I'm occasionally getting on onAnimate error, which I tried to look up. The other postings for that didn't seems to relate too much to my problem. Maybe in true production people will never randomly quickly enter a bunch of addresses and click around a lot. But in test, that's always what people do. Once it starts happening, it continues and will only geocode properly again if you enter a different address.
... View more
06-10-2015
06:33 AM
|
0
|
2
|
1574
|
|
POST
|
I need to do a selectFeatures on a featureLayer based on a geocoded point. I also want them to be able to get information when they click around on the map, so I have a infoTemplate set on the featureLayer. If the user enters an address, the anchor to the popup appears where I expect, tied to the geocoded symbol. If the user then clicks around on the map and then goes back to entering an address, the anchor to the popup ends up set to the last map click, rather than the geocoded location. What am I doing wrong? Here are my definitions: var popup = new Popup({
markerSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 2),
new Color([255, 255, 0, 0.5])),
fillSymbol: highlightFillSymbol}, domConstruct.create("div"));
var infoTemplate = new InfoTemplate("Poverty Status");
infoTemplate.setContent(setInfoContent);
var featureLayer = new FeatureLayer(featureLayerUrl, { mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'],
infoTemplate: infoTemplate,
opacity: 0.6
}); Here are the relevant functions: function setInfoContent(graphic){
var per = formatPercentage(graphic.attributes.pov_perc);
return "Percentage Poverty: " + per;
}
function showLocation(evt){
map.graphics.clear();
var startPoint = evt.result.feature.geometry;
addr = evt.result.name;
map.centerAndZoom(startPoint, 13);
var graphic = new Graphic(startPoint, geoSymbol);
map.graphics.add(graphic);
popup.show(startPoint);
var query = new Query();
query.geometry = startPoint;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
var per = formatPercentage(results[0].attributes.pov_perc);
popup.setContent(addr + "</br> Percentage Poverty: " + per);
dom.byId('povStatus').innerHTML = "Census tract is eligible, with a poverty percentage of " + per;
});
} Here is a link:Poverty Tract Search Suggested input address: 301 W High St, Jefferson City, MO
... View more
06-09-2015
08:43 AM
|
0
|
5
|
4716
|
|
POST
|
I have a rather complex query that I'm running and the results need to go into a dGrid which is formatted with a renderRow. I have successfully used this in the past. I think it might be the size of my data set, because I'm getting an error in my renderRow function that the object I should be passing isn't yet available. Sometimes this works. Otherwise, if I put a breakpoint in my renderRowFunction, this gives the process enough time to format my data and then it works. var dataGrid = new declare([Grid, Selection]);
datagrid = new dataGrid({
showHeader: false,
renderRow:renderRowFunction
}, "gridDiv");
function renderRowFunction(obj, options){
var template = '<div class="gridTitle gridInfo">${0}</div><div class="details gridInfo">${1}</div> <div class="details gridInfo">${2}</div><div class="details gridInfo"> ${3}, ${4}</div><div class="details gridInfo">${5}</div><div class="details gridInfo provider">Provider Type: ${6}</div><div class="details gridInfo provider">Specialty: ${7}</div>';
var divString = String.substitute(template, [obj.facility, obj.address,obj.address2, obj.city,obj.state,obj.phone,obj.provider,obj.specialty])
var div = domConstruct.create("div", {
innerHTML: divString
});
return div;
} The grid is populated from featureLayer, which has a definition expression on it. Since that filter is in place, I only need to a simple where clause to get all the elements to populate the grid. I also have an extent-change listeners to limit the contents to the current map extent. function updateGrid(){
var query = new Query();
query.where = '1=1';
query.geometry = currentExtent;
featureLayer.on("selection-complete", featureLayerQueryHandler, errorHandler);
featureLayer.selectFeatures(query);
}
function featureLayerQueryHandler(response){
var data = [];
data = arrayUtils.map(response.features, function(feature){
return {
'id': feature.attributes.ESRI_OID,
'facility': feature.attributes.NA_PROVIDER,
'address': feature.attributes.AD_LINE1,
'address2':feature.attributes.AD_LINE2,
'city': feature.attributes.AD_CITY,
'state': feature.attributes.AD_STATE,
'phone':phoneFormatter(feature.attributes.PH_NUMBER),
'provider':findProvCode(feature.attributes.ID_PROV_TYPE_FK),
'specialty':findSpecCode(feature.attributes.ID_SPECIALTY_FK)
};
});
var currentMemory = new Memory({
data: data,
idProperty: 'id'
});
datagrid.set('store', currentMemory);
datagrid.sort('facility'); } Could I set something up to only define the renderRow after datagrid is populated?
... View more
06-04-2015
10:18 AM
|
0
|
0
|
3464
|
|
POST
|
I was using collection to populate the data, when I should have been using store.
... View more
06-03-2015
10:05 AM
|
0
|
0
|
997
|
|
POST
|
You need to create a function and set it as your infoContent. I'm not using a popupTemplate, I'm using an infoTemplate, but it should be the same concept. var infoTemplate = new InfoTemplate(); infoTemplate.setContent(generateInfoContent); //creates string for info tag function generateInfoContent(graphic){ var formatString = ""; var disclaimerTest = graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER; var adaTest = graphic.attributes.ADA_ACCESS; var idTest = graphic.attributes.ID_REQUIRED; //these fields always have data, so start with a string that contains them and then append the others only when they have values. formatString = "<b>"+graphic.attributes.FACILITY +"</b><br/>" +graphic.attributes.ADDRESS+"<br/>" + graphic.attributes.CITY+", " + graphic.attributes.STATE + "</br>" + "Phone: " + graphic.attributes.PHONE + "<br/>" + "Hours: " + graphic.attributes.HOURS_OF_OPERATION; if (disclaimerTest){ formatString += "<br/>" + graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER; } if (idTest && idTest !== 'UNK' ) { formatString += "<br/> ID Required?: " + graphic.attributes.ID_REQUIRED; } if (adaTest && adaTest !== 'UNK' ) { formatString += "<br/>ADA access?: " + graphic.attributes.ADA_ACCESS } return formatString; }
... View more
06-03-2015
09:00 AM
|
2
|
1
|
2532
|
|
POST
|
I know I'm really down in the weeds here for using just dojo and bootstrap, but maybe someone can help me out. I want to be able to use some dropdown buttons within a collapsible panel. I've been using the panel and it works OK. I've put the buttons in a straight div and that's OK, but when I combine, the items that should list when you click the button are either a) cropped, so they're nearly hidden or b) if you set style as position: relative, it shoves all the rest of the buttons off to the side, which looks very ugly. <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown button test</title>
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css">
<!-- <link rel="stylesheet" type="text/css" href="https://community.esri.com//esri.github.io/bootstrap-map-js/dist/css/bootstrapmap.min.css"> -->
</head>
<style type="text/css">
.dropdown-menu {
position: relative;
}
.nav-pills > li > a {
position: relative;
background-color: #CBDDEB;
color: #000000;
padding: 3px;
margin: 1px 10px 1px 10px;
}
.nav .open > a:focus {
background-color: #96bad8;
}
</style>
<script type="text/javascript">
window.dojoConfig = {
async: true,
packages: [{
name: 'dojo-bootstrap',
location: '//rawgit.com/xsokev/Dojo-Bootstrap/master'
}]
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.12compact">
</script>
<script type="text/javascript">
require(['dojo-bootstrap/Collapse', 'dojo-bootstrap/Dropdown']);
</script>
<body class="bs-docs-example">
<div id="sidebar">
<div class="panel-group" id="my-accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#my-accordion" href="#one">Find a Provider</a></h4>
</div>
<div id="one" class="panel-collapse collapse in">
<div class="panel-body">
Search by one of these types:
<div>
<ul class="nav nav-pills">
<!-- <li class="active">
<a href="#">Regular link</a>
</li>-->
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Facility<b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li>
<a tabindex="-1" href="#">Hospital</a>
</li>
<li>
<a tabindex="-1" href="#">Clinic</a>
</li>
<li>
<a tabindex="-1" href="#">Dentist</a>
</li>
<li>
<a tabindex="-1" href="#">Mental Health</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Service<b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li>
<a tabindex="-1" href="#">Home Care</a>
</li>
<li>
<a tabindex="-1" href="#">Medical Equipment</a>
</li>
<li>
<a tabindex="-1" href="#">Pharmacy</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Condition<b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li>
<a tabindex="-1" href="#">Diabetes</a>
</li>
<li>
<a tabindex="-1" href="#">Hearing</a>
</li>
<li>
<a tabindex="-1" href="#">Dental</a>
</li>
<li>
<a tabindex="-1" href="#">Eye/Vision</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
... View more
05-22-2015
12:18 PM
|
0
|
2
|
6502
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-02-2017 02:38 PM | |
| 2 | 03-18-2022 10:14 AM | |
| 2 | 02-18-2016 06:28 AM | |
| 1 | 03-18-2024 07:29 AM | |
| 4 | 08-02-2023 06:08 AM |
| Online Status |
Offline
|
| Date Last Visited |
02-25-2025
01:56 PM
|