ArcGIS for Javascript on ASP.NET Core project

959
4
01-06-2022 03:41 AM
MeloiMagpantay
New Contributor

Is there a way to use ArcGIS Javascript on ASP.NET Core website. I've been trying to use it but it is causing an error like this.

 

MeloiMagpantay_0-1641469227163.png

 

I tried to follow the get started documentation.

0 Kudos
4 Replies
ReneRubalcava
Frequent Contributor

Well, I haven't used ASP in years, so I spun up a new project locally and it looks like the default app uses a local jquery and bootstrap. This is where the error comes from because jquery has a require method it uses. We can work around this in the "Pages/Shared/_Layout.cshtml" file with a dojoConfig to define where the local packages can be loaded from.

<script>
    var dojoConfig = {
    packages: [
        {
        name: "jquery",
        location: location.pathname.replace(/\/[^/]+$/, "") + "lib/jquery/dist",
        main: "jquery.min",
        },
        {
        name: "bootstrap",
        location:
            location.pathname.replace(/\/[^/]+$/, "") + "lib/bootstrap/dist/js",
        main: "bootstrap.bundle.min",
        },
    ],
    };
</script>
<script src="https://js.arcgis.com/4.22/"></script>

 

Then in your "wwwroot/js/site.js" file, when you load the JSAPI and require the modules, you can load the jquery and bootstrap stuff.

require([
  "esri/WebMap",
  "esri/views/MapView",
  "jquery",
  "bootstrap"
], function (...) {...})

 

This fixed the issue in my local app, should fix the issue for you too. Now I feel like I should do something with dotnet...

 

0 Kudos
NadirHussain1
New Contributor

where should i write the code for map load code.in site.js. write the code like below.

function showMap() {
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"jquery",
"bootstrap"
], function (esriConfig, Map, MapView, FeatureLayer) {
const map = new Map({ basemap: "arcgis-topographic" });
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543, 34.02700],
zoom: 13
});

//Trailheads feature layer (points)
const trailheadsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
});

map.add(trailheadsLayer);

//Trails feature layer (lines)
const trailsLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
});

map.add(trailsLayer, 0);
});
}

but i did not see any map on index page and there is no error in console.actually i  cant understand where should i call showMap function.Please help.

 

Thanks

0 Kudos
sajalpal
New Contributor

We are also getting the same issue. While we are using the version "https://js.arcgis.com/4.26/".

Did you find any fix for this

Thanks.

0 Kudos
GavinBoyd
New Contributor II

The way to get around this error is to comment out this section of your shared _layout.cshtml view

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)

It appears to conflict with any arcgis sdk of higher than 4.15

0 Kudos