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?
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
