Demo Map One:

Something Like a Zoo

zoom based pins/image overlaysevents

View it below or open it in a new window.

Zoo Demo Snapshots

A testing environment for custom map content that is conditional.

View Snapshots in a New Window

Demo Map Two:

Something Like an Amusement Park

suggest featuretop three Categories on load

View it below or open it in a new window.

Amusement Park Demo Snapshots

A testing environment for custom map content that is conditional.

View Snapshots in a New Window

The Process:

Designing the Maps Front-End

schemaplanning

The Maps project started by planning and gathering assets. First with an idea of the public map features, to the database schema on a poster board, into wireframes of the public map created in Affinity Designer.

Admin Version of the Map

formsprocedures

There are two versions of the map, Admin and Public. The Admin map(Class) was programmed to work with the specific admin pages(excluding Snapshots) containing forms. The form data is submitted by the admin to collect data that is consumed by the Public map. There are three areas of the Admin Panel that will be discussed below. They are Setup, Map Elements, and Automation.

Setup: Admin Area 1/3

Web Geolocation APILeaflet

The Clusters Tab and basic Maps logic were developed first. Clusters can be plotted at a location or manually for placing the base map or map elements. Research showed that the Web Geolocation API uses decimal coordinates as opposed to degrees and minutes. Accurate placement on a map requires considering Earth's curvature, so Leaflet, an open-source JavaScript library was chosen to simplify this and other map functions such as zoom.

Map Elements: Admin Area 2/3

categoriespointseventsoverlaysalerts

The front-end data structure is passed to the map Object via the Javascript Fetch API. Two properties of the map Object are Categorized and Uncategorized. These properties contain most of the other map elements. Some nested further than others. For example, a Point of Interest placed in a Category can contain an Event. Diving even further, that Event can have Conditions(automation). Uncategorized elements are shown by default and behave differently.

As shown below, Bootstrap helped style the admin forms quickly.

Integrating OptBox

design principlesorganization

Leveraging a web content management system I built called OptBox (accessible within the Map Elements tab), this Maps project enables the direct association of web content with Points of Interest and Maps Information pages for quick web page creation. As another option, a custom page can be added to the custom folder of a specific location. For custom pages, dashes in the filename will appear as spaces in the Maps Admin Area.

OptBox Portfolio Piece

Automation: Admin Area 3/3

triggersconditionsautomation

The Automation Area of the Admin Panel consists of Triggers, Conditions, and Snapshots(to be discussed in a later section). Triggers of switch, time, zone, weather, and view can be defined, then added to Conditions, to be added to Map Elements.

Programming the Public Map Class

asynchronous javascriptgraphic design

The admin areas of Map Setup, Map Elements, and Automation were designed to preform database operations(CRUD) to work with the map data. Once the same data was successfully passed to the front-end in a usable format(JSON), work on programming the public map Class started. This included designing the user interface and programming the functionality.

Adding Snapshots to the Admin Area

Testing EnvironmentRender Log

The Snapshots feature, though in the Admin Panel (Automation Area), was integrated into the Public map to simulate public access environments (time, date, weather, location, user switches). It includes the map, an environment form, and a render log for understanding automation.

Zoo Demo SnapshotsAmusement Park Demo Snapshots

Building Maps as an Admin

testingbug fixesuseful keyboard shortcuts

I built two demo maps using the interface, leveraging the completed admin functionality for map data collection and the finished public map that consumed this data. I debugged along the way. For the base map images I used the online service Inkarnate to build the graphics. They were exported as a JPEG(as opposed to PNG) with the same color on the outsides as the CSS background to save on file size/loaging time.

For the debugging process, I got comfortable using specific keyboard shortcuts in Visual Studio Code including (Ctrl+K+0) to collapse the code, (Ctrl+G) to find the line number, (ctrl+F) to search a file, and (ctrl+shift+F) to search all files in the selected folder.

Final Thoughts:

Locally Hosted Environment to a Usable End Result on a Server

SQL to JSONlightweightminificationrefactoring

Each map location has a content database that contains OptBox data. This allows the OptBox application to build web content that can be assigned to the map information page and the map Points of Interest. An additional database is assigned to each location for other map data such as Categories, other Points of Interest details, Events, etc... Lastly, each location shares one database for location data such as name, timezone, etc...

For versions of the maps that are published on this portfolio, the three databases of each map are condensed to a single JSON file that is consumed by the public map Class. For a viable product, the authentication for the admin area would need to be implemented and additional logic would need to be added if the databases were converted to JSON for immediate feedback from the admin area.

Let's Talk:

Dave Pierce

Web Designer