Cannot load .geojson file with D3 in ASP.NET Core

Question

I am trying to create world map with D3.js using a .geojson file. However everytime the page loads it is giving me a 404 error http://localhost:xxxx/world.geojson file not found .

Here is my site.js file:

$(function() {
   d3.json("./world.geojson", createMap);
   function createMap(countries) {
      var aProjection = d3.geoMercator();
      var geoPath = d3.geoPath().projection(aProjection);
      d3.select("svg").selectAll("path").data(countries.features)
        .enter()
        .append("path")
        .atrt("d", geoPath)
        .attr("class", "countries");
    }
});

This is what my project structure looks like: structure

Any help would be appreciated. Thanks!

Answer 1

I as able to to fix my issue by adding the following to my Startup.cs :

app.UseStaticFiles();
        app.UseStaticFiles(new StaticFileOptions()
        {
            ServeUnknownFileTypes = true,
            FileProvider =
                new PhysicalFileProvider(
                    Path.Combine(Directory.GetCurrentDirectory(), @"MyStaticFiles")),
            RequestPath = new PathString("/StaticFiles")
        });

I created a folder in my application root directory ( MyStaticFiles ), and put my .geojson file within that. The file was then loading correctly into the browser.

Answer 2

You need to add mimeMap for geojson and other "less common" extensions in your Web.config in order to tell IIS to serve them as a static resource :

   <configuration>
     <system.webServer>
       <staticContent>
         <mimeMap fileExtension=".geojson" mimeType="application/json" />
       </staticContent>
     </system.webServer>
   </configuration>