5

Please forgive me if this is very simple but I am not be able to find out the work around to solve the issue.

I am trying to open ESRI map in a bootstrap modal. On the first time it doesn't load the map (in console I see the error "require is not defined") but second time it works fine. If I open the map in a separate window then it also work well each time.

My partial view looks like following:

@{
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.21/"></script>
    <script>
        var map;

        require([
          "esri/map",
          "dojo/parser",
          "dojo/domReady!"
        ],
        function (
          Map,
          parser
        )
        {
            parser.parse();

            map = new Map("map", {
                basemap: "streets",
                center: [5.79, 50.97], // lon, lat
                zoom: 16,
                slider: false
            });
        });
   </script>
}

<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h4>DrawProjectLocation</h4>
</div>
<div class="modal-body">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"  data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">      
        <div id="map" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">

        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
            <div id="editorDiv"></div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <span id="info" style="position:absolute; left:15px; bottom:15px; color:#000; z-index:100"></span>
    <button type="submit" class="btn btn-success" id="submitButton">Save</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>

I tried to include require.js in my partial view but it didn't help. Can somebody please tell me whats going wrong here. Thanks!!

kashi_rock
  • 539
  • 1
  • 5
  • 19
  • Any idea guys :O – kashi_rock Aug 08 '17 at 08:48
  • 1
    Sounds like your `require` script comes after the above script in the html. Check the source of the page and make sure it comes before this code, or wrap the above code in an `onload` event (or similar) – K Scandrett Aug 09 '17 at 08:10

2 Answers2

3

Finally I solved the issue by adding js for ArcGIS on main view instead of the partial view. Since RequireJS is being loaded asynchronously so other scripts / functions don't wait until its loaded completely.

Another workaround is to load bootstrap modal by setting up configurations for RequireJS to make sure all the required scripts are loaded initially. Example can be found here

kashi_rock
  • 539
  • 1
  • 5
  • 19
1

Please be specific your question. Where did you include require.js? Try to include it before the script and check in console if require.js is included.