Leaflet JavaScript – How to Set ‘Map View’ Instead of ‘Split View’ in Leaflet

functiongeojsonleaflet

I am using geojson-dashboard framework template for Leaflet (http://fulcrumapp.github.io/geojson-dashboard/).

enter image description here

By default, the initial view of the screen is "splitted" or "divided" (half view is the map and the other half is a geojson table). What I'm trying to do is to modify the function in order to set the initial view of the screen only with the map.

The function that acts on that is the following:

function switchView(view) {
  if (view == "split") {
    $("#view").html("Split View");
    location.hash = "#split";
    $("#table-container").show();
    $("#table-container").css("height", "55%");
    $("#map-container").show();
    $("#map-container").css("height", "45%");
    $(window).resize();
    if (map) {
      map.invalidateSize();
    }
  } else if (view == "map") {
    $("#view").html("Map View");
    location.hash = "#map";
    $("#map-container").show();
    $("#map-container").css("height", "100%");
    $("#table-container").hide();
    if (map) {
      map.invalidateSize();
    }
  } else if (view == "table") {
    $("#view").html("Table View");
    location.hash = "#table";
    $("#table-container").show();
    $("#table-container").css("height", "100%");
    $("#map-container").hide();
    $(window).resize();
  }
}

$("[name='view']").click(function() {
  $(".in,.open").removeClass("in open");
  if (this.id === "map-graph") {
    switchView("split");
    return false;
  } else if (this.id === "map-only") {
    switchView("map");
    return false;
  } else if (this.id === "graph-only") {
    switchView("table");
    return false;
  }
});

I've tried in a thousand ways but I don't know how to solve in order to establish "Map View" as the initial view.

Best Answer

Looking at your code and the config code, this is what happens when you want map only on start.

$("#map-container").show();
$("#map-container").css("height", "100%");
$("#table-container").hide();

Just need to put it in the function that's loaded last. Maybe something like:

 $(window).load(function() {
    switchView("map");
});
Related Question