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.
Best Answer
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