Need some guidance here, I have two operational esri js maps that I want to combine to have two different popups. If I/we could somehow figure out a way to add the number of parks to the census popup that would work and not worry about the two popups. But I'd prefer to have info on census groups as well as parks plus number of parks in one census block group in the demographics popup. So I'll add the work I've done to create the two working maps and then post the work I've done trying to combine them which is not working. Any help would be very much appreciated.
This first example is parks in Pierce County, WA with a popup with park details.
http://students.washington.edu/sbuffor/infowindow_w_parkname.html
Second is the code for census block groups with demographics information for the same area.
http://students.washington.edu/sbuffor/census_vs_parks.html
Last but certainly not least is my attempt at combining the two pieces. This includes adding all the different require statements and functions from both and the majority of the code from each with duplicate pieces removed. I have tried moving things around to map the map render with no luck. I want to preserve the locatebutton and the search bar that are used to find addresses in this as well for added functionality.
http://students.washington.edu/sbuffor/combined_census_parks.html
<!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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<title>Pierce County Census Information and Parks Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esriScalebar {
padding: 20px 20px;
}
.esriPopup.myTheme .titlePane,
.dj_ie7 .esriPopup.myTheme .titlePane .title {
background-color: #899752;
color: #333333;
font-weight: bold;
}
.esriPopup.myTheme .titlePane {
border-bottom: 1px solid #121310;
}
.esriPopup.myTheme a {
color: #d6e68a;
}
.esriPopup.myTheme .pointer.top{
background-color:#899752;
}
.esriPopup.myTheme .outerPointer, .esriPopup.myTheme .pointer.bottom{
background-color:#424242;
}
.esriPopup.myTheme .contentPane,
.esriPopup.myTheme .actionsPane {
border-color: 1px solid #121310;
background-color: #424242;
color: #ffffff;
}
#ui-esri-dijit-geocoder {
top: 20px;
left: 70px;
position: absolute;
z-index: 3;
}
.esriPopup .titlePane {
text-shadow: none;
}
.esriPopup .titleButton.next {
right: 40px;
}
.esriPopup .titleButton.prev {
right: 53px;
}
.demographicInfoContent {
padding-top: 10px;
}
.demographicInnerSpacing {
display: inline-block;
width: 8px;
}
.demographicNumericPadding {
width: 90px;
display: inline-block;
text-align: right;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map;
require([
"esri/config",
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/geometry/Extent",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/GeometryService",
"esri/tasks/query",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/parser",
"esri/Color",
"dojo/_base/lang",
"dojo/date/locale",
"esri/dijit/Geocoder",
"esri/dijit/LocateButton",
"dojo/domReady!"
],
function (
esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer,
ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton
) {
parser.parse();
var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));
var popup1 = new Popup1({
fillSymbol: sfs,
lineSymbol: null,
markerSymbol: null
}, domConstruct.create("div"));
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
domClass.add(popup.domNode, "myTheme");
map = new Map("map", {
basemap: "topo",
center: [-122.402, 47],
zoom: 10,
infoWindow: popup
});
var geocoder = new Geocoder({
arcgisGeocoder: {
placeholder: "Search "
},
map: map
}, "ui-esri-dijit-geocoder");
var _countyCensusInfoTemplate = new InfoTemplate();
_countyCensusInfoTemplate.setTitle("<b>Census Information</b>");
var _blockGroupInfoTemplate = new InfoTemplate();
_blockGroupInfoTemplate.setTitle("<b>Census Information</b>");
var _censusInfoContent =
"<div class=\"demographicInfoContent\">" +
"<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
"<div class='demographicNumericPadding'>${AGE_18_21:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 18 - 21<br>" +
"<div class='demographicNumericPadding'>${AGE_22_29:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 22 - 29<br>" +
"<div class='demographicNumericPadding'>${AGE_30_39:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 30 - 39<br>" +
"<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
"<div class='demographicNumericPadding'>${AGE_50_64:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 50 - 64<br>" +
"<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
"</div>";
_countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
_blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);
var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var demographicsLayerOptions = {
"id": "demographicsLayer",
"opacity": 0.8,
"showAttribution": false
};
var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
demographicsLayer.setInfoTemplates({
1: { infoTemplate: _blockGroupInfoTemplate },
2: { infoTemplate: _countyCensusInfoTemplate }
});
demographicsLayer.setVisibleLayers([1, 2]);
map.addLayer(demographicsLayer);
geocoder.startup();
var geoLocate = new LocateButton({
map: map,
highlightLocation: false
}, "LocateButton"
);
geoLocate.startup();
});
var formatNumber = function(value, key, data) {
var searchText = "" + value;
var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
return formattedString;
};
var getCounty = function(value, key, data) {
if (value.toUpperCase() !== "LOUISIANA") {
return "County";
} else {
return "Parish";
}
};
map.on("click", function (event) {
var query = new Query();
query.geometry = pointToExtent(map, event.mapPoint, 10);
var deferred = featureLayer.selectFeatures(query,
FeatureLayer.SELECTION_NEW);
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
});
var template = new InfoTemplate();
template.setContent(getTextContent);
var featureLayer = new FeatureLayer("https://services3.arcgis.com/J1Locv0GPOt6yBRR/ArcGIS/rest/services/Parks_polygons_Feb2012/FeatureServer/0",
{
outFields: ["*"],
infoTemplate: template
});
map.addLayer(featureLayer);
function getTextContent (graphic) {
var attributes = graphic.attributes;
var namepark =
attributes.ParkName
.replace('"', "")
.split("::")
.map(function (name) {
return lang.trim(name);
});
var parkdata = namepark[0];
var commonName = namepark[1];
var parks;
if (commonName) {
parks = "<b>" + commonName + "</b><br/>" +
"<i>" + parkdata + "</i>";
}
else {
parks = "<i>" + parkdata + "</i>";
}
return parks + "<br>" +
attributes.Owner + "<br>" +
attributes.ParkWebLin
}
function pointToExtent (map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;
var toleranceInMapCoords = toleranceInPixel * pixelWidth;
return new Extent(point.x - toleranceInMapCoords,
point.y - toleranceInMapCoords,
point.x + toleranceInMapCoords,
point.y + toleranceInMapCoords,
map.spatialReference);
}
});
</script>
</head>
<body class="claro">
<div id="map">
<div id="LocateButton"></div>
</div>
<div id="ui-esri-dijit-geocoder"></div>
</body>
</html>
Please do not hesitate to let me know if you need more information. I'm still new to this and learn a ton from the help that is provided here so I'm excited to do just that with this example.
