Greetings, I'm working with popups in an ESRI Javascript API 3.18 bootstrapmap.js map and my popups are not styling correctly. It appears to me like I am missing both the minimize and maximize buttons and the popup pointers appear to not be drawing correctly. See below:
Initially the popup titlePane was white and the close button was invisible. I followed the directions at Making Your Pop-up Pop! | ArcGIS Blog and copied the css from http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css and that got me this far. How do I take this the rest of the way?
Thanks, Tyler
Tyler,
Here is what I have working:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Bootstrap <SPAN class="number token">101</SPAN> Template<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Bootstrap <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.2%2Fcss%2Fbootstrap.min.css" target="_blank">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css</A><SPAN>"</SPAN></SPAN> rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> media<SPAN class="operator token">=</SPAN><SPAN class="string token">"screen"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Step <SPAN class="number token">1</SPAN><SPAN class="punctuation token">.</SPAN> Add CSS <SPAN class="keyword token">for</SPAN> the mapping components <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/css"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.18%2Fesri%2Fcss%2Fesri.css" target="_blank">http://js.arcgis.com/3.18/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/css"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fesri.github.io%2Fbootstrap-map-js%2Fsrc%2Fcss%2Fbootstrapmap.css" target="_blank">http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> #mapDiv <SPAN class="punctuation token">{</SPAN> min<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> 100px<SPAN class="punctuation token">;</SPAN> max<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> 1000px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup <SPAN class="punctuation token">.</SPAN>titlePane<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>light <SPAN class="punctuation token">.</SPAN>titlePane<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>dark <SPAN class="punctuation token">.</SPAN>titlePane <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">112</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">112</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">112</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">/* Change color of icons to match bar chart and selection symbol */</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>dark div<SPAN class="punctuation token">.</SPAN>titleButton<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>dark div<SPAN class="punctuation token">.</SPAN>titlePane <SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>dark div<SPAN class="punctuation token">.</SPAN>actionsPane <SPAN class="punctuation token">.</SPAN>action <SPAN class="punctuation token">{</SPAN> color<SPAN class="punctuation token">:</SPAN> #A4CE67<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">/* Additional customizations */</SPAN> <SPAN class="punctuation token">.</SPAN>esriPopup<SPAN class="punctuation token">.</SPAN>dark <SPAN class="punctuation token">.</SPAN>esriPopupWrapper <SPAN class="punctuation token">{</SPAN> border<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esriViewPopup <SPAN class="punctuation token">.</SPAN>gallery <SPAN class="punctuation token">{</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> auto<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> HTML5 IE8 support <SPAN class="keyword token">of</SPAN> HTML5 elements and media queries <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="keyword token">if</SPAN> lt IE <SPAN class="number token">9</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"../assets/js/html5shiv.js"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"../assets/js/respond.min.js"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="punctuation token">[</SPAN>endif<SPAN class="punctuation token">]</SPAN><SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Step <SPAN class="number token">2</SPAN><SPAN class="punctuation token">.</SPAN> Add HTML to define the layout <SPAN class="keyword token">of</SPAN> the page and the map <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"container"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> Step <SPAN class="number token">3</SPAN><SPAN class="punctuation token">.</SPAN> Add JS to load the responsive map <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> package_path <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">lastIndexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> packages<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"application"</SPAN><SPAN class="punctuation token">,</SPAN> location<SPAN class="punctuation token">:</SPAN> package_path <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/js'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bootstrap"</SPAN><SPAN class="punctuation token">,</SPAN> location<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Frawgit.com%2Fxsokev%2FDojo-Bootstrap%2Fmaster" target="_blank">http://rawgit.com/xsokev/Dojo-Bootstrap/master</A><SPAN>"</SPAN></SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.18%2F" target="_blank">http://js.arcgis.com/3.18/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"application/bootstrapmap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/dijit/PopupTemplate"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/dijit/Popup"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/dom-class"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"dojo/domReady!"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> BootstrapMap<SPAN class="punctuation token">,</SPAN> PopupTemplate<SPAN class="punctuation token">,</SPAN> Popup<SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">,</SPAN> domClass<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> popup <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Popup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> titleInBody<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Add the dark theme which is customized further in the <style> tag at the top of this page</SPAN> domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>popup<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dark"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Get a reference to the ArcGIS Map class</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> BootstrapMap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN><SPAN class="string token">"national-geographic"</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.45</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">37.77</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN><SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN> infoWindow<SPAN class="punctuation token">:</SPAN> popup <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"title"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Location"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"description"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Crime Desc: </b> {Desc_} </br><br/> <b>Case #: </b> {Case_Num}"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"my url/0"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN> infoTemplate<SPAN class="punctuation token">:</SPAN> popupTemplate<SPAN class="punctuation token">,</SPAN> opacity<SPAN class="punctuation token">:</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>featureLayer<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thanks Robert, I'll continue to play around with it. I'm sure I must have made a mistake somewhere. It's probably a good time for me to walk away and come back. My popups look awesome, now. And that is what I needed. Thanks for your help!
Tyler
I followed the instructions found here and the code I provided worked fine:
Bootstrap Map JS - Get Started
Hi Robert, Thanks for providing me this template. The css that you provided fixed my issue. However, in my original application I am not referencing bootstrapmap.js only bootstrapmap.css. Is that an issue? Should I be using bootstrapmap.js as you are? If so, I'm getting a 404 on bootstrapmap.js in this template. I dug a little deeper and found the 404 at:
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"><A href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Frawgit.com%2Fxsokev%2FDojo-Bootstrap%2Fmaster" style="color: #000000; border: 0px; font-weight: inherit; text-decoration: underline; padding: 0px calc(12px + 0.35ex) 0px 0px;" target="_blank">http://rawgit.com/xsokev/Dojo-Bootstrap/master</A></SPAN>
I downloaded bootstrap map locally and changed the dojoConfig to:
<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> package_path <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN> window<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>location<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>pathname<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">substring</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">0</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> window<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>location<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>pathname<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">lastIndexOf</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'/'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> dojoConfig <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN> packages<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">[</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN> name<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">"application"</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> location<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> package_path <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">+</SPAN> <SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'/js'</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN> name<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">"bootstrap"</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> location<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"><SPAN style="border: 0px; font-weight: inherit;">"bootstrapmap.js</SPAN><SPAN style="border: 0px; font-weight: inherit;">"</SPAN></SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">]</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>
However, I'm getting a BootstrapMap is not a constructor when i create my map.
Any idea how I should proceed?
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
