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.
Pierce County Census Information and Parks Map 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; }
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.
I had this posted in stackoverflow.com and got the following suggestions:
2 - After your creation of your new LocateButton (line 215), you have an errant "});" which is preventing your code from running (you use the console to debug, right? You use sublimeText and htmlPrettify, or similar?
3 - When defining your second popup ("var popup1"), the class is still Popup, not Popup1 (line 141 - which you are also adding this popup to generic dev - how would you ref it? Make the div first with dojo attach point?)
That should get you going.
So I am currently working on that. Thanks Tom!
أكثر...
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.
Pierce County Census Information and Parks Map 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; }
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.
I had this posted in stackoverflow.com and got the following suggestions:
2 - After your creation of your new LocateButton (line 215), you have an errant "});" which is preventing your code from running (you use the console to debug, right? You use sublimeText and htmlPrettify, or similar?
3 - When defining your second popup ("var popup1"), the class is still Popup, not Popup1 (line 141 - which you are also adding this popup to generic dev - how would you ref it? Make the div first with dojo attach point?)
That should get you going.
So I am currently working on that. Thanks Tom!
أكثر...