Skip to main content

GeoGraphic Explorer

What does this solution intend to do?​

GeoExplorer is intended to be a flexible way of mapping data on a geographic map.

Example 1: A government client was interested in right-sizing their spare parts inventories and we helped them show overlaps where the same parts were being stored in 2 close locations.

Example 2: Throughline’s smart remote work policies during Covid allowed many staff to re-locate to regions that we don’t have offices in, but we still want to understand where people are/ by skillset/ experience and get them together for work and social interaction.

How does it work?​

GeoExplorer is made up of the following components.

  1. GE Solution (Data Object in Pimcore)

    1. slug/ name/ description/ status
    2. card size/ cover/ sorting/ etc.

  2. Map Settings (Mapbox Configurations)

    1. Map Style/ Token/ Origin point/ etc.

  3. JSON Data Files (Assets in Pimcore)

    1. Location Data (where to map those locations)

    2. Inventory Data (what is at those locations)

    3. Totals Data (any calculations associated with the inventory data/ location combos)

    4. Filter Data (the configuration we want for the custom filters in the UI) <--- this info could be moved into the data object if we think it would be better there.

      1. Hover Selector - this selector is used to determine which metrics appear when hovering over a location. Each solution can label this with its own label like Perspective, ViewPoint, Angle, etc.

        1. Example 1: Perspective (might be the leaders perspective, or the warehouse staff perspective - each of these would focus on different metrics/totals that apply to those locations - leaders might be focused on put away times and warehouse value, where staff might be more focused on inventory dates / volumes)
        2. Example 2: ViewPoint (might be staffing viewpoint or social viewpoint - each of these would focus on different metrics/ totals - staffing might be focused on experience/skills, where social might be focused on shared interests)

      2. Highlight Selector - this selector is used to determine which metric is driving the color of the location. Each solution can label this with its own label like Focus Metric or Spotlight

        1. There are some thresholds in the data that drive how the color is determined as well. (probably needs to be better documented)

      3. Dynamic Filters - this is an important capability. Because the data sets can be so different, we need a dynamic way to define/ implement filtering that works across solutions. (Note: the specific way we store these is open to adjustment in json or in data object if that is better suited.)

  4. GE API Endpoints

    1. Provide access to the data elements for the UI

  5. GE UI

    1. Requests the data elements to build the views

    2. Hover Selector (ex. Perspective) - changes what the popup/ hover content is for each location

    3. Highlight Selector (ex. Focus Metric) - changes which metric drives the coloring of each location’s map pin

    4. Dynamic Filters - change which locations appear in the map view

    5. Map View - Standard Google Maps style interface (leaflet based I think) with pan/zoom capability.

      1. Styled by whatever Mapbox style is linked in the solution (highly customizable)

    6. Data Table - makes the currently filtered data available

GeoExplorer Flexibility Better Explained through an example

| Element | Explanation | Government | Hockey League | Throughliners | | Hover Filter Label | Just a title/label, pulled from filters.json | PERSPECTIVE | ANGLE | VIEWPOINT | | Hover Filter Values | This value drives the contents of the onhover action for a location. The filter needs to define which fields get displayed here. | ExecutiveWarehouse Mgr | NHL FansNHL StaffNHL Owners | StaffingSocialTribe | | Highlight Filter Label | Just a title/label, pulled from filters.json | FOCUS METRIC | SPOTLIGHT | SPOTLIGHT | | Highlight Filter Values | This value drives the color of the location. The filter needs to also define the thresholds/ color values too. | AccuracyValuationDate of Last InventoryReady for IssueTurnover Rate | Stadium AgeStadium Capacity | Years of ExperienceYears at Throughline | | FILTER JSON | | | | Configuration: name, data source field, thresh1 "less than 5", thresh1color "green", thresh2 "5-10", thresh2color "blue", thresh3 "greater than 10", thresh3color "black" | | Secondary Filters (explained) | These values drive which locations appear... these are 100% flexible but they have to align with the inventory.json file to work. (see examples) | example: "Owning Org"filters.json would contain the label for this filter "Owning Org" and the source datafield it is tied to in the inventory.json"Owning Organization" | example: "Division" (not in current example on test but should be)NHL EastNHL Westand there should be a source datafiled in inventory.json to match it so each location would have that. | example: "Department"DesignDesign StrategyContent StrategyAccountsExtended TribeHobbies | | Secondary Filters (details) | Just a title/label, pulled from filters.json | PERSPECTIVE (should not be in secondary)LEADERSHIP METRICMANAGER METRICOWNING BSOINVENTORY SEGMENTASSET CATEGORYOWNING ORGMANAGED BY | DIVISION (select from all actual values)SEATING CAPACITY (select from ranges that are defined in the filters.json ex. under 15000, 15001-17499, over 17500)STADIUM AGE(select from ranges defined in filters.json ex. before 1999, between 2000-2009, between 2010-2019, after 2019) | DEPARTMENT (select from actual values)Years of Experience (ranges)Years at Throughline (ranges) | | Map Spots | On Open: There should be a plotted map spot for each item in the locations.json fileOn Filtering with secondary filters, the plots are reduced to match the filter criteria | | | | | Map Spot Clustering | As we discussed - Leaflet is already handling clustering of close together markers and allowing you to zoom in to find things. | | | But this is not helpful when loading Throughliners because we only have city/state, not exact address. So we need to handle this case where markers are "stacked"Possible solution:Clustering - I found a way... demo here. this is called "spidering" apparently. lolhttp://jawj.github.io/OverlappingMarkerSpiderfier-Leaflet/demo.html https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet/ | | Hover Content | Output is flexible here... filters.json setup for the Hover filter (perspective) will dictate which metrics get displayed here. | Ex. Perspective = Warehouse Mgrmeans that the hover state shows the name of the Location (the Warehouse name). And a series of "chiclets" with metrics:- Last Movement,

  • Putaway Time,
  • Program Util Rate

filters.json should have all the information needed for the frontend to render this except the raw data that will be in inventory.BUT the executive perspective shows other chicklets. | Ex. Angle = Fansmight mean that the hover state shows the name of the Location (the Stadium Name). And only one "chicklet" with metric.- Seating Capacity

filters.json would set the label for that, and set 3 thresholds like:(value less than 15000) = yellow(value greater than 20000) = green(value greater than 15000 and less than 20000 = blueBUT the Staff and Owners Angles show different chicklets. | Ex. ViewPoint = Tribemight mean that the hover state shows the name of the "Location" but in this case the location is really a human so "Josie Glore" followed by a chicklet for each of the metrics mentioned above with some thresholds that drive the coloring.AND we want the filter.json to detail what else gets displayed here... like title/ department/ photo eventually. | | Element | Explanation | Navy | NHL | Throughliners | | Data TablesTask 1 | Make the Tab Labels flexible.We should be able to set these in filters.json or somethingtab 1 is "Selected Location Detail"tab 2 is "Selected Location Info" | Tab 1: ResultsTab 2: Plant Info | Tab 1: RosterTab 2: Stadium Info | Tab 1: Key SkillsTab 2: Throughliner Info | | Data TablesTask 2 | Change the tab order (would be best if this was flexible based on how it is listed in the json)tab 1 is "Selected Location Info"tab 2 is "Selected Location Detail" | Tab 1: Plant InfoTab 2: Results | Tab 1: Stadium InfoTab 2: Roster | Tab 1: Throughliner InfoTab 2: Key Skills | | Data TablesTask 3 | Display all of the metrics from totals.json to the Location Info tab. | | | | | Data TablesTask 4 | Allow for the tabs to be enabled/disabled in json. | We might disable Plant Info here and that means that tab would not show at all. | We might disable Roster here and that means that tab would not show at all. | So we might keep all tabs viewable here. | | Data TablesTask 5 | Allow for a third tab"Displayed Locations"This would simply list all of the "locations" currently plotted on the map. | Label: Visible Plants1 Row for each Plant, with columns as dictated in json (example plant ID, plant poc, city/ state) | Label: Visible Stadiums1 Row for each Stadium, with columns as dictated in json (example capacity, city/ state, team name) | Label: Visible Throughliners1 Row for each Throughliner, with columns as dictated in json (example Name, city/ state, Department) | | | | | | | | | | | | |