0

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.

1

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");
});
  • Many thanks for answering. I've tried with your suggestion and seems that is happening something interesting: when loading the web page, the map "is trying" to be shown at 100%; however, below on the screen remains an "empty place" which is the table that doesn't just disappear completely: The table itself is not visible, but it is the space that the table occupies on the web.. – abrobia Aug 8 '18 at 8:44
  • I updated my answer and tested it, it should work for you now. – Bill Chappell Aug 8 '18 at 12:50
  • :) if in fact, it works much better! but it seems that there is still needed to modify some function of the whole code that insists on showing the half table-container while the web page is loading. Also, i should fix the "feature extent" (the map looks centered on muy features coordinates but with a lower zoom level than my features extent). Anyway, I've already come so far thanks to your help. very grateful Bill. – abrobia Aug 8 '18 at 18:07

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.