example of mapbox not working with another .geojson file

I'm trying to test mapbox, but I am stuck in trying to visualize some polygons coming from a .geojson file.

Here's my code:

(needs Allow-Control-Allow-Origin Chrome Plugin to work properly).

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Point in polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
.state {
  position:absolute;
  top:10px;
  right:10px;
  z-index:1000;
  }
  .state strong {
    background:#404040;
    color:#fff;
    display:block;
    padding:10px;
    border-radius:3px;
    }
</style>

<!--
  This example requires jQuery to load the file with AJAX.
  You can use another tool for AJAX.

  This pulls the file airports.csv, converts into into GeoJSON by autodetecting
  the latitude and longitude columns, and adds it to the map.

  Another CSV that you use will also need to contain latitude and longitude
  columns, and they must be similarly named.
-->

<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
<div id='map'></div>
<div id='state' class='state'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicmljcmljdWNpdCIsImEiOiIyODdkMTk4YmY5YTllYWQ1ZTk5MWQ5NTEwYmIwMjQ3OSJ9.a2bQbD9hl6dOCI7Om1BcwQ';
var state = document.getElementById('state');
var map = L.mapbox.map('map', 'mapbox.emerald')
    .setView([38, -95], 4);

$.ajax({
    //url: 'https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson',          // correctly show U.S.A
    url: 'http://playground.nothingisclear.net/simplified_LW_2015.geojson',           // should show some areas in south-west Germany (Baden-Wuttemberg)
    dataType: 'json',
    success: function load(d) {
      console.log(d);
        var states = L.geoJson(d).addTo(map);
    }
});
</script>


</body>
</html>

My problem is that my geojson –showing polygons in a south west region of Germany– doesn't work (http://playground.nothingisclear.net/simplified_LW_2015.geojson)

while mapbox's example –showing U.S.A.– works (https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson).

I've triple-checked the geojson and it seems to have no errors at all, but somehow it doesn't show the polygons on the map.

Any ideas on how to solve this? Thank you.

To test: switch on/off the comments where you see url: of the ajax call.

Solution

From your GeoJSON file:

"geometry":{"type":"Polygon","coordinates":[[[3519139.557897714,5400906.9684712365]

This GeoJSON file is in a different projection than EPSG:4326, so the coordinates are very far from valid: longitude should be >-180 and <180, latitude >-90 and <90. Reproject your data into EPSG:4326 and your example will work.