0

I'm 98% percent done with this map and have validated all of my GeoJSON files at GeoJSONLint.

I've got 5 files, 4 of which are turned on/off using a checkbox in the sidebar; three work just fine but one will not and I have no idea where I'm going wrong. It's the 16_decrease file that's giving me trouble.

The questionable code:

<!DOCTYPE html>
<html>
<head>

<title>Lyons LC Change</title>

<!-- External Stylesheets -->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>

body {
  padding: 0;
  margin: 10;
}
html, body {
  height: 100%;
  width: 100%;
}
#left {
  float: left;
  width: 25%;
}
#map {
  width: 75%;
  height:100%;
  float: right;
}

.info {
  padding: 6px 8px;
  font: bold 14px/16px Ebrima, Times, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.legend {
  text-align: left;
  line-height: 30px;
  color: #000000;
}

.legend i {
  width: 20px;
  height: 30px;
  float: left;
  margin-right: 8px;
  opacity: 1;
}

.legend .circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 8px;
}

</style>
</head>

<body>

  <!--                                                      LEFT PANE -->
  <div id="left"><h1>Land Cover Change Near Lyons</h1>
  <h2><strong>Tiles</strong></h2>
  <button id="tile1">OpenTopoMap</button><br><br>
  <button id="tile2">Pioneer</button><br><br>
  <h2><strong>Selections</strong></h2>
  <h3>2006</h3>
  <label><input id="06increase" type="checkbox" value="06increase">Increase</label><br><br>
  <h3>2011</h3>
  <label><input id="11decrease" type="checkbox" value="11decrease">Decrease</label><br><br>
  <h3>2016</h3>
  <label><input id="16increase" type="checkbox" value="16increase">Increase</label><br><br>
  <label><input id="16decrease" type="checkbox" value="16decrease">Decrease</label><br><br>
  <h2><strong>Summary</strong></h2>
  <p>Lorum Ipsum</p>
  </div>

  <!--                                                       WEB MAP/CONTENT -->

  <div id="map"></div>
  <!--                                                               LEAFLET -->

  <script>
  $(document).ready( function() {

//////////////////////////////////////////////////////////////////////////// MAP

var map = L.map('map',{ center: [40.25611111, -105.2625], zoom: 13});

//////////////////////////////////////////////////////////////////////////// MAP

/////////////////////////////////////////////////////////////////// BEGIN LEGEND

function getColor(d) {
  switch (d) {
    case 'agriculture': return '#32CD32';
    case 'grassland': return '#C51C0F';
    case 'water': return '#1E90FF';
    case 'wetlands': return '#314004';
    case 'quarry': return '#000000';;
  }
};

var legend = L.control({
  position: 'bottomleft'
});

legend.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'info legend');
  let faultstatus = ['agriculture', 'grassland', 'water', 'wetlands', 'quarry'];
  for (var i=0; i<faultstatus.length;i++) {
    div.innerHTML +=
    '<i class="circle" style="background:' +
    getColor(faultstatus[i]) + '"></i>' +
    (faultstatus[i] ? faultstatus[i] + '<br>' : '+');
  }
  return div;
};
legend.addTo(map);

///////////////////////////////////////////////////////////////////// END LEGEND

//////////////////////////////////////////////////////////////// BEGIN ADD TILES

var tile1 = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png').addTo(map);
var tile2 = L.tileLayer('https://tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=17d448b8b49c4decb6d86c8d11fb18ea');

////////////////////////////////////////////////////////////////// END ADD TILES

////////////////////////////////////////////////////////////// BEGIN COORD POPUP

var popup = L.popup();
function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
  }
map.on('click', onMapClick);

//////////////////////////////////////////////////////////////// END COORD POPUP

///////////////////////////////////////////////////// BEGIN HOLD LAYER VARIABLES

var sixteenincrease;
var sixteenincrvisible = false;

var sixteendecrease;
var sixteendecrvisible = false;

var elevendecrease;
var elevendecrvisible = false;

var sixincrease;
var sixincrvisible = false;

/////////////////////////////////////////////////////// END HOLD LAYER VARIABLES

////////////////////////////////////////////////////////////// BEGIN LOAD LAYERS

$.getJSON("16_increase.geojson",function(data) {
   sixteenincrease = L.geoJson(data,
    {
  style: function(feature) {
  switch (feature.properties.landcover) {
  case 'agriculture': return {color: "#32CD32"};
  case 'grassland': return {color: "#C51C0F"};
  case 'water': return {color: "#1E90FF"};
  case 'wetlands': return {color: "#314004"};}
  }
});
});

$.getJSON("16_decrease.geojson",function(data) {
   sixteendecrease = L.geoJson(data,
    {
      style: function(feature) {
      switch (feature.properties.landcover) {
      case 'agriculture': return {color: "#32CD32"};
      case 'grassland': return {color: "#C51C0F"};
      case 'water': return {color: "#1E90FF"};
      case 'wetlands': return {color: "#314004"};}
      }
    });
});

$.getJSON("11_decrease.geojson",function(data) {
  elevendecrease = L.geoJson(data,
    {style: function(feature) {
      switch (feature.properties.landcover) {
      case 'agriculture': return {color: "#32CD32"};
      case 'grassland': return {color: "#C51C0F"};
      case 'water': return {color: "#1E90FF"};
      case 'wetlands': return {color: "#314004"};}
      }
    });
});

$.getJSON("06_increase.geojson",function(data) {
  sixincrease = L.geoJson(data,
    {style: function(feature) {
      switch (feature.properties.landcover) {
      case 'agriculture': return {color: "#32CD32"};
      case 'grassland': return {color: "#C51C0F"};
      case 'water': return {color: "#1E90FF"};
      case 'wetlands': return {color: "#314004"};}
      }
    });
});

$.getJSON("quarry.geojson", function(data) {
  var quarry = L.geoJson(data,
    {style: function(feature) {return {color: "#000000"}}
  }).addTo(map);
});

//////////////////////////////////////////////////////////////// END LOAD LAYERS

////////////////////////////////////////////////////////// BEGIN BUTTONS/SIDEBAR

$("#tile1").click( function() {
  tile2.removeFrom(map);
  tile1.addTo(map);
});

$("#tile2").click( function() {
  tile1.removeFrom(map);
  tile2.addTo(map);
});

$("#16increase").click( function() {
  if (sixteenincrvisible) {
    sixteenincrvisible = false;
    sixteenincrease.removeFrom(map);
  } else {
    sixteenincrvisible = true;
    sixteenincrease.addTo(map);
  }
});

$("#16decrease").click( function() {
  if (sixteendecrvisible) {
    sixteendecrvisible = false;
    sixteendecrease.removeFrom(map);
  } else {
    sixteendecrvisible = true;
    sixteendecrease.addTo(map);
  }
});

$("#11decrease").click( function() {
  if (elevendecrvisible) {
    elevendecrvisible = false;
    elevendecrease.removeFrom(map);
  } else {
    elevendecrvisible = true;
    elevendecrease.addTo(map);
  }
});

$("#06increase").click( function() {
  if (sixincrvisible) {
    sixincrvisible = false;
    sixincrease.removeFrom(map);
  } else {
    sixincrvisible = true;
    sixincrease.addTo(map);
  }
     });

//////////////////////////////////////////////////////// END BUTTONS/SIDEBAR

});
  </script>
</body>
</html>
  • 2
    Code looks OK. If you don't get any errors in the console, I would try the following: in your $.getJSON calls just swap places of 16_increase.geojson and 16_decrease.geojson and see what happens. This way you'll find out who is culprit: GeoJSON or some error in the code. – TomazicM Dec 1 at 11:48
  • 1
    Swapping files is the easy check. If it's the file check the coordinates, make sure it's in Lat, Longs, and in the right order as it's easy to mix the x,y's. – Bill Chappell Dec 1 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.