3

I am trying to build an interactive web map to display the results of my master's thesis. Basically, it is a shapefile of line segments that have each been assigned to 1 out of 8 categories. The category is contained in the shapefile's attribute table.

When a user clicks on a particular line segment, I would like a static part of the page, separate from the map, to be populated with information based on what category the line segment is in.

I know it is fairly easy to set up a map in MapBox or Carto where you can click on segments and a little bubble pops up with the data contained in the attribute table. However, the information I want to display would be in the form of a rather large HTML table (1 for each category) that would best be displayed in static portion on the page to the side of the map, rather than a pop up bubble.

I am familiar with Mapbox, Carto, QGIS2Web, and am currently learning HMTL/CSS and JavaScript. Right now I am planning to build the basemap in Mapbox, export the shapefile as a geojson Leaflet map using QGIS2Web, and then code the functionality I want for the static portion of the page in Javacript. The HTML code for the table would be far too large to store in the attribute table of the shapefile, so I would have to write a script that would display one of the 8 tables based on the category code for a given segment.

But before I get too far into the weeds, does anybody know of a mapping platform that allows for this functionality? Or a way to do it that requires less custom coding?

I'm happy to put the work in, but would kick myself if I found out there was an easier way to do it afterwords.

Improve this question

1 Answer 1

Reset to default
2

Using Leaflet I did this. Basic HTML table in the side panel, then in the onEachFeature I have an on-click function that sets the GeoJSON values by using getElementByID. My example uses points instead of lines but it's similar.

http://www.gistechsolutions.com/leaflet/DEMO/baseball/Baseball.html

Improve this answer
3
  • Thanks! This is really helpful. One difference between this and what I'm trying to do though is that you have features from the json populating the table on a click event. My HTML tables would be so large/complex that putting the data in the json would make it too large to load easily. Because there are only 8 possible tables, I'm hoping to just have one column in the attribute table with a numeric code indicating which table to display. I would have to use an if/else or switch statement to write one of the 8 possible tables to the DOM based on the code of the feature that is clicked on.
    – global_stats
    Sep 27, 2017 at 17:55
  • Can we get a tutorial on how you did that?
    – rohit sharma
    Sep 13, 2020 at 18:05
  • The oneachfeature function, you can set a couple variables, like the feature I’d and a Json table table name, pass them to a function. That function can use those variables to get the records you want to populate the table.
    – Bill Chappell
    Sep 14, 2020 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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