By: CPT James Pistell

Posted on: 06SEP2020

Revised: 02NOV2020

  • 2020
  • • November
  • • October
  • • September
  • • August
  • • July
  • • June
  • • May
  • • April
  • • March
  • • February
  • • January

  • 2019
  • • December
  • • November
  • • October
  • • September
  • • August
  • • July
  • • June
  • • May
  • • April
  • • March
  • • February
  • • January

  • 2018
  • • September
  • • August

This is a daily log of updates I have done for MGRS Mapper. Useful for those who want to track what I am working on and the progress I am making. Does anyone even read these things?


November 2020


  • Finished merging the Quiz App into the main code repository. It is now pushed to production and can be viewed HERE!
  • Quiz App: Fixed an annoying CSS issue on the results dialog that caused mobile devices to flip out
  • Made error corrections to the blog pages for the Military Symbols Study guide
    • Fixed the Air and Missile defense symbol and added reference
    • Renamed "Air Defense Artillery (radar dome)" to "Air Defense" and added reference
    • Fixed CBRN symbol description and reference
    • Fixed the description for the Sector 1 modifier for Assault
    • Fixed the example symbol for Forward in Sector 1 modifiers
    • Fixed the example symbol for Medical Bed in Sector 2 modifiers
    • Fixed the example symbol for Service Craft Yard in Sector 2 modifiers
    • Fixed the description for Attached and Detached amplifiers
    • Fixed the description for Military Symbol Examples - Example 10
    • Added Air Defense Gun - Long Range
    • Added Mortar - Generic
    • Fixed the POL modifier on Sector 1 equipment symbols. Note: this fix is temporary and not useful for the production application
    • Fixed the description for the Sector 1 modifier for Utility
    • "Command and control armored fighting carrier" renamed to "Command and control armored fighting vehicle"
    • Fixed the description for "Armored tracked vehicle with medium mortar"
    • Fixed spelling mistakes
    • Fixed the Sector 1 modifier for Mortar because the Activity indicators were covering it up
    • Fixed the hashmarks on Direct Fire Gun - Light, Direct Fire Gun - Medium and Howitzer - 120 millimeters or Less
    • Fixed the description for Strong Point in Graphic Control Measures
    • Added better descriptions for Classes of Supply Points
    • Fixed the description for Attack Helicopter Axis of Advance
    • Fixed the description for Observation Post
    • Renamed CBRN Outpost to CBRN Observation Post
    • Removed the "25" in the Point Target example. I have looked all throughout ADP 1-02 and there is no explanation as to what Field X means in a Target Control Measure
    • Modified the path data for Ford (difficult) so it matches the example in ADP 1-02
    • Renamed Ferry to Ferry Crossing


  • Quiz App: Began importing the quiz app into the main code repository
  • Quiz App: Fixed an annoying CSS issue on the results dialog that caused mobile devices to flip out
  • Added more gtag events in the account management page

October 2020


  • Quiz App: Added more styles for results dialog
  • Quiz App: Added social sharing functionality to the social sharing dialog with custom meta data
  • Quiz App: Added quiz timer
  • Quiz App: Fixed some more broken symbols and added a few missing ones


  • Quiz App: Added more styles and media queries
  • Quiz App: Fixed 30 broken symbols with invalid SVG data


  • Quiz App: Added a radio select box that allows the users to select how many questions they want to take
  • Quiz App: Added a custom meme image on the results page using the canvas element


  • Quiz App: Finished Tactical Mission Task - Effects on Enemy Forces symbols
  • Quiz App: Finished Tactical Mission Task - Actions by Friendly Forces symbols
  • Quiz App: Finished Graphic Control Measures - Fortification symbols
  • Quiz App: Finished Graphic Control Measures - Mines symbols
  • Quiz App: Finished Graphic Control Measures - Mobility and Countermobility symbols
  • Quiz App: Finished Graphic Control Measures - Target Control Measures symbols
  • Quiz App: Finished Graphic Control Measures - Observation Posts symbols
  • Quiz App: Finished Graphic Control Measures - Movement and Maneuver symbols
  • Quiz App: Finished Graphic Control Measures - Points symbols


  • Quiz App: Finished Sector 1 Modifiers for Installation Symbols
  • Quiz App: Finished Sector 2 Modifiers for Installation Symbols


  • Quiz App: Finished Installation symbols
  • Quiz App: Finished Equipment symbols
  • Quiz App: Finished Transportation mode indicators for equipment symbols
  • Quiz App: Finished Sector 1 Modifiers for Equipment Symbols


  • Quiz App: Finished Activity symbols
  • Quiz App: Finished Main Icons for Units - Full Example Symbols
  • Quiz App: Finished Reinforced and Reduced Amplifiers
  • Quiz App: Finished Task Force Amplifiers
  • Quiz App: Finished Command Post Amplifiers


  • Quiz App: Finished Main Icons for Units - Sector 2 Modifiers
  • Quiz App: Added SVG Compression script


  • Quiz App: Finished Main Icons for Units - Sector 1 Modifiers
  • Quiz App: Added symbol validation to check for duplicates
  • Quiz App: Fixed eslint and question error handling
  • I finally bought a house 😛


  • Quiz App: Finished Main Icons for Units - Special Ops
  • Quiz App: Finished Main Icons for Units - Sustainment
  • Quiz App: Finished Main Icons for Units - Protection
  • Quiz App: Finished Main Icons for Units - Movement and Maneuver
  • Quiz App: Finished Main Icons for Units - Intelligence
  • Quiz App: Finished Main Icons for Units - Fires
  • Quiz App: Finished Echelon symbols


  • Quiz App: Added Material Design Circular Progress component
  • Quiz App: Added 100 questions


  • Quiz App: Added functionality to Top App Bar
  • Quiz App: Added bottom app bar
  • Quiz App: Fixed Ripple effect for Material Design buttons


  • Fixed broken transportation modifiers for equipment symbols
  • Began working on the Military Symbols Quiz application

September 2020


  • Fixed broken links in production and development Docker images
  • Fixed Webpack config
  • Created new routes in Express for blog
  • Fixed broken links in blog footer pages
  • Added blog link to Free/Paid app surface menus
  • Fixed storage issue in EC2 instance
  • Added sitemap and sitemap route in express
  • Fixed OG meta tags and Twitter Card meta tag. Issue lied in not using absolute URLs... Which is fucking stupid but whatever
  • Fixed GTAG events for subs. The issue with the "purchase" event not firing off was that it required weird values like SKU and other unnecessary things. Switched the event type to a custom value and everything worked.
  • Fixed an error in the purchase page where the pricing table for annual subscriptions read as "Billed Monthly"... How the hell did I miss that????
  • Couldn't get much done this month as I was on orders for Annual Training for the next 3 weeks.


  • Fixed media queries in Blog
  • Added promotional content to blog
  • Added Hyvor Talk blog commenting application to each post. Not sure how much use it will get but worth a shot
  • Added custom social sharing buttons on all blog posts
  • Fixed issue with Webpack not retrieving content from new folders
  • Injected FB Pixel into blog post headers

August 2020


  • Added blog articles sidebar
  • Cleaned up some links on the Surface Menu for the Top App Bar.
  • Added blog preview images for all 4 posts
  • Added facebook og:image and twitter card meta tags with images
  • Added Other Posts in this Series links to each blog post
  • Thinking of adding Hyvor Talk to the blog for a commenting system
  • Last commit from Court street. It's been a crazy year but now I have to go buy a house. I wanted to get the blog up and running before I moved out but I have new commitments to deal with and a new full time job which takes up a lot of my time (this is not a bad thing).


  • Added Top App Bar template for blog


  • Refactored Webpack build for blog
  • Fixed media queries on blog


  • Finished Graphic Control Measure minefields for blog
  • Finished Graphic Control Measure CBRN events for blog
  • Finished Tactical Mission Tasks for blog


  • Finished Graphic Control Measure Points for blog
  • Finished Graphic Control Measure Movement and Maneuver for blog
  • Finished Graphic Control Measures for airspace for blog
  • Finished Graphic Control Measure Observation Points for blog


  • Added Graphic Control Measures for points


  • Split main blog post into 4 pages


  • Added Graphic Control Measures for areas

July 2020


  • Added table of contents and scrolling logic for blog
  • Cards are now loaded with IntersectionObserver


  • Finished Mod2 equipment icons for blog
  • Fixed bugs in equipment icons for blog


  • Revised MilSym class logic for mobility indicators on equipment for the blog. Note: This is something that I will need to implement in the main application
  • Finished equipment icons for the blog


  • Fixed bug in MDC Cards for blogs
  • Finished Installation symbols for blog
  • Started equipment symbols for blog


  • Finished Mod1 symbols for installation icons for the blog


  • Added 45 installation symbols to blog
  • Finished Activity symbols for blog
  • Added 104 more Main Symbols for blog


  • Finished Mod2 symbols for blog


  • Added 36 Mod2 symbols to blog
  • Fixed media queries on Blog


  • Finished mod1 symbols for blog


  • Finished main icons for blog
  • Added 42 mod1 symbols to blog


  • Began working on blog via Webpack build
  • Added blog card alignment and download functionality


  • Removed validator from explicit deps for better long-term maintainability
  • Added email normalization to LocalPassportStrategy


  • Fixed GA events


  • Fixed bugs on Top App Bar button text content not updating when a user clicks off of it
  • Fixed a bug where the DisableInputs function would not change the Mod1/2 input text to "None" when a user chooses a GCM/TMT/CP
  • Changed the icon size of Emergency Medical and Emergency Management symbols so that Modifiers will fit on them
  • Removed MISO icon as it was duplicated and categorized incorrectly as a piece of equipment
  • Added "Mine Warfare" to MIW icons
  • Renamed "Music" to "Band"
  • Renamed "Nongovernmental Agency" to "Nongovernmental Organization"
  • Appended "OP" to "Observation Post"
  • Added the Mobile Gun System symbol
  • Renamed "Printed Media" to "Print Media"
  • Renamed "Foraging" in Mod 1 to "Food"
  • Renamed "Sensor Outpost" to "Sensor Observation Post"
  • Fixed CCP, TCP, and EPW points
  • Renamed U.S. Marshals Service to "U.S. Marshall Service"
  • Added the Bread symbol
  • Gave out a bunch of free premium accounts


  • Final bug fixes. LAUNCH DAY, WE ARE LIVE!! 🔥

June 2020


  • Added environment to Sentry init call
  • Implemented 3D Secure and subscriptions cancellation


  • Wired up privacy policy to the templating engine


  • Fixed bug with Leaflet.DumbMGRS that caused the map to freeze and the grids to fail at redrawing.
  • Fixed a potentially app breaking bug. When a user scrolls a leaflet map across the world, it will continuously regenerate. This will cause lots of problems with getting accurate grid locations. By setting 'worldCopyJump' to true in L.Map() you can avoid this issue.
  • Fixed bug where a user was prevented from dropping a symbol into the boundaries of a drawn item
  • Fixed a bug where if a user edits a drawn item on the map it would not update in local storage.
  • Added material design inspired tooltips for the leaflet controls. This gives much better user feedback if they don't know what these icons are
  • Added changes to the Free App from this one.
  • Fixed a bug where if a user chooses a symbol that is flight capable, and then goes to select a command post, the Flying switch would be disabled.
  • Added a flightCapable attribute to the MainMS class
  • Fixed favicons
  • Implemented privacy policy page
  • Fixed login page after user signs up


  • Fixed a lot of bugs with LocalStorage. Now the map is saving symbols and users center location/zoom level
  • Fixed LocalStorage bug where zooming onto the symbols would cause the 100K grids to "double draw".
  • Giving up on the LocalStorage feature. I can get the text, symbols and drawn items to successfully store itself in LocalStorage. I can even get them to all redraw on the map after page load. There is however a bug that causes the grid overlays to fail to draw. It crashes the entire app. This is really upsetting because I was looking forward to using this
  • Fixed broken icon links in server and free app


  • Changed the default colors for Leaflet.Draw from light blue to black.
  • iOS does not listen to click events. I am concerned that the Add Text To Map control will not work on mobile devices. Logic for this should be in moveSymbol.js under "addTextToMapSubmitButton"
  • Added hover state background color on Screenshot control and Add Text to Map control
  • Added a custom leaflet control that lets a user select a color for use with Leaflet.Draw
  • Added hover state for Screenshotter control and Add Text to Map control. This is good for UX
  • Changed CSS properties on the edit layer and trash icon for Leaflet.Draw. Previously if these controller buttons were disabled there was no color differentiation. I darked the background color and changed the cursor. This is good for UX
  • Added an opacity slider for the leaflet.draw plugin. (All in all, messing around with a color control for Leaflet.draw cost me 9 hours today)
  • FIXED issue with info window popups not appearing on symbols loaded from LocalStorage
  • BUG: LocalStorage can store symbols and refresh on page load, however the entries keep duplicating and the symbols keep appearing on top of each other
  • 27,178 total lines of CSS/HTML/JS I have written


  • FIXED menuSurface button on the Top App Bar that would not toggle properly if the user clicks off the menu. For instance previously if you clicked the "Open Menu" button and then clicked the map, the menu would close but the button text would still read "Close Menu"
  • FIXED issue where the affiliation outline would appear on the Mod1/2 dropdowns
  • FIXED issue when a flight capable symbol has flying enabled and then turned off, the rest of the inputs are kept reenabled. This is a bug because if you toggle "Unit is Flying" on a UAV and then toggle it off the user could add things like Reinforced/reduced/installation.
  • FIXED CSS issue where Save Symbol buttons were not centered on mobile devices
  • Changed the LinkedIn and Website icons in the pushbar to Instagram and Twitter
  • Added 500 meter grids and 100 meter grids
  • FIXED issue where the symbol list would lose its alphabetical order when a user searches for an icon and clicks the trashcan button or removes all text from the search field
  • FIXED issue where the popup div would clip over other symbols on the map. This was a z-index issue that I resolved in the biggestNumberInArray() function in moveSymbol.js (ADD THIS TO THE FREE APP!!!!)
  • FIXED issue where the last item in the Frequently Used Symbols list would cause an overflow in the x-axis by swapping the Field Artillery icon with the Infantry icon. Kind of a hack but it works (ADD THIS TO THE FREE APP!!!!)
  • Added a feature that changed the affiliation of the Most Popular Symbols depending on what affiliation the user selects. This is good for UX. (ADD THIS TO THE FREE APP!!!!)
  • Fixed incorrect names of 2 mine symbols
  • Added some functionality that will add all symbols on the map to local storage. Furthermore I added the ability to retrieve markers from LocalStorage and add them onto the map. There is however an issue with getting the popup div to appear on these symbols.
  • Finished Sales Page!!
  • Implemented Docker build and setup Docker Compose


  • Integrated Sentry
  • Integrated Sales page


  • Established proper async to sync error handling in passport.js


  • Fixed social media authentication


  • Implemented basic integration of free app with web server
  • Added free app to the repo and made it work as part of the server


  • Started actual integration of paid app and server
  • Updated ESLint
  • Put server and paid app side by side and made paid app work as part of the entire Webpack build


  • BUG: When a user searches for a symbol and then clicks the trash icon, the symbol list is no longer alphabetized
  • BUG: Z-Index problem for the symbol popups. Whenever the users mouse goes outside the bounding box the the popup div the markers on the map will start clipping over it
  • BUG: Top App Bar- when a user clicks the Open Menu button and clicks out of it by clicking on the map, the button text does not update. The button text will only update when it is clicked. It needs to listen for that surface menu to close (eg- 'MDCMenuSurface:closed')
  • BUG: Symbol Mods still have the affiliation box on them. Even when the affiliation is anything other than friendly it still shows a friendly land unit outline on them. The current production site does not have this issue.
  • BUG: When hovering over the Field Artillery icon in the Frequently Used Symbols it causes the horizontal scroll bar to show. Really minor but kinda annoying
  • Created MGRS Mapper YouTube Account (
  • Created MGRS Mapper Twitter Account (
  • IOT have a custom YouTube URL your channel needs to be 30 days old and have at least 100 subscribers
  • Finished the MGRS Mapper Sales Page
  • Added: Fixed a bug in the download SVG buttons where the symbol would not center or scale properly. This fix now works well for both SVG and PNG files


  • Implemented CSRF protection for forms
  • Ensured app responsiveness
  • Implemented production Webpack build on frontend
  • Worked on Sales Page media queries
  • Worked on Sales Page introduction video


  • Implemented Web Components Webpack build


  • Updated Google Maps API keys in the free app
  • Added Webpack dev middleware to dev server
  • Added Webpack hot middleware to dev server
  • Finalized password reset feature by integrating SendGrid


  • Added Stripe webhooks setup
  • Fixed issue with incorrect sign in attempts


  • Introduced first basic version of frontend Webpack based build
  • Implemented password recovery feature

May 2020


  • Made purchase page work for anonymouse users
  • Introduced unified app routes
  • Fixed subscription existence check
  • Implemented payment method update feature


  • Made subscription plan conversion stricter
  • Implemented subscriptions renewal functionality


  • Refactored purchase code structure
  • Implemented subscription cancellation
  • Implemented subscription plan switching


  • Added optional port param to config.js template
  • Fixed the issue with sign in URL param for create account page template
  • Error handling accross the board
  • Implemented initial purchase via Stripe checkout
  • Worked on Sales Page mp4 imports
  • Worked on Sales Page styles


  • Added simple integration with the MGRS Mapper version 2 app with the express application
  • Implemented paid app access control
  • Began working on sales page


  • Added getDateTimeGroup() to helperFunctions.js file. Now when a user takes a screenshot the Date-Time-Group will be appended to the filename
  • BUG: The screenshot button does not work on the Ink Toner map. This is an issue with CORS
  • Fixed bug where symbols weren't getting alphabetized on page load. Previously the way I was doing this was waiting for DOMContentLoaded and then running sortSymbolObjectList() via a 300ms setTimeout function. Results for this were spotty. I switched to a for-await-of statement and it seems to work much better, although I don't understand any of it
  • Implemented header and footer on express
  • Implemented manage account page version 1
  • Added table creation SQL script


  • Implemented create account page
  • Added simple integration with MGRS Mapper v1


  • Implemented sign in page


  • Worked on backend some more, ran into road blocks all night. Giving up on Express and hiring someone else to do it. The Coronavirus mission just got extended another month and I just want this thing done.
  • Talked with a developer manager at Toptal and told him what I am looking for. Gave them my \$500 deposit
  • Created a whole wireframe app for the developer. This took like 4 hours
  • Updated my app page on IndieHackers.
  • Made some adjustments to the Facebook page
  • Fixed a small bug in the app in DisableInputs() where if the unit size is enabled and the user switches to a non-land unit the select box wouldn't reset. Added the "silent" setEnhancedSelectedIndex_() method and it worked.

April 2020


  • Moved loadScreen.js to its own entry point in WebPack. The load screen will now fire off before index.js
  • Removed calls to the symbol objects file and instead simulated the files loading in the exampleSymbols array. I iterated over the array and filled it with copies of each element in the array so it would match the totalSymbolCount value (715).
  • Created a STYLES.HEADLINE5 object IOT mimic the mdc-typography--headline5 class. This is important because I now have the loadScreen firing off on document.readyState === 'loading', which at that point the CSS is still loading.
  • Fixed the setStyles function in loadScreen.js so that the for-in loop was replaced by Object.keys. This is a performance upgrade since the for-in loop will iterate all over the prototype chain.
  • Fixed the .hasOwnProperty() method in setStyles since eslint was freaking out about it
  • Removed all warnings from eslint on loadScreen.js, now contains valid ES6 code (this whole file took about 4.5 hours to tweak)
  • Fixed some issues with the loading screen and mobile browsers (including tablets)
  • Fixed app breaking bug where newSVG div borders will spill outside of the symbol panel. This was caused by the transform prop in .newSVG being set to scale(1.5). I moved this property to .newSVG > svg and it worked
  • Fixed app breaking bug that froze the leaflet map when the user goes to a zoom level > 17. This was due to the switch statements in getPaddingOnZoomLevel() not containing cases for those zoom levels.
  • Fixed pushbar select boxes on ipad and small screen sizes
  • Adjusted CSS in the selectSymbols menu surface so it looks nice on mobile
  • Fixed bug where activity icons were not getting viewBox settings, so they looked all jacked up in the symbol panel
  • Fixed symbol search results covering up the input field on mobile
  • Fixed the symbol info popup on mobile phone so it is no longer going outside of the page
  • Enabled the pushbar to be closed when a user searches for an address and clicks on the result on mobile. This is a UX improvement because before the pushbar would cover up the entire screen on mobile and the user wouldn't know if they searched for something or not
  • Tons of minor adjustments and media queries for tablet and phone users
  • Adjusted the deletePopupButton for Firefox users
  • Added a function that will Alphabetize the symbols
  • Added an if statement that will only add symbols on affiliation change that are NOT a Tactical Mission Task or Graphic Control Measure. This reduced the time to open the selectSymbol list from ~900ms to ~600ms
  • Added the isVisible() function to further optimize load speeds for the selectSymbol menu. The menu will now pop up within ~120ms
  • Removed the FBCLID query string parameter from the URL
  • Added screenshot plugin and configured the styles for mobile and Firefox. This ideally should be morphed into a "save to PDF" functionality. But for now this is the best plugin that exists because it captures the page and the symbols on it.


  • Struggled with enabling the use of touch events when dragging a symbol on a mobile device. The issue lies with HTML5's API not listening to TouchEvents. It will only listen to DragEvents. I have wasted about 20 hours on this issue so I decided to just have the symbol placed directly in the center of the map when it is touched on a mobile device.
  • Fixed the styling of the Leaflet plugin for adding text to the map. This functioned fine on mobile but the styles were missing. Probably due to the janky way I created the plugin.
  • Fixed the color selectors in the Leaflet plugin for adding text to map. Issues between mobile and desktop have been resolved
  • Fixed viewbox inconsistencies on Graphic Control Measures. They were using a static value and the clickable viewbox did not always envelop the symbol in the panel. Setting this to a dynamic value fixed this.
  • Added Tactical Mission Tasks to the setViewBox function in app.js. Since Graphic Control Measures and these do not take any modifiers I don't need to worry about how modifiers will fit within the symbol. This might be inefficient since I am running a function each time they are added. YOLO
  • Added a loading screen. Note sure if I like it since it's adding so much junk, but it looks cool
  • UI Improvements
    • Closed the Top App Bar's surface menu when a user changes a map. Better UI experience on mobile
    • Fixed spacing on bottom app bar sections, added media queries for iPad in portrait & landscape
    • Enabled cursor coordinates to update on touchstart event
    • Removed some extra text on bottom app bar section 3 (beneath the pushbar)
    • Adjusted absolute position of the menu surface so it is not covering the menuSurfaceButton
    • Added 'OPEN MENU' and 'CLOSE MENU' text on menuSurfaceButton in the Top App Bar
    • Added a ripple effect in SCSS to the menu surface button in the Top App Bar. For some reason the ripple effect fires off once successfully but then it won't fire off again. Manually created a ripple effect in SCSS to fix this issue
    • Centered the site logo in the Top App Bar
    • Worked on mobile styles and media queries
  • Added loading screen constructor function to it's own file
  • APP BREAKING BUG ALERT: When a user zooms in all the way on the map the console throws a ton of errors. This will in turn lock the map from panning anywhere. This happens on the Secondary Base Map. This is probably a maxZoom level error
  • APP BREAKING BUG ALERT: The newSVG div spills outside of the pushbar. Any symbols that are dropped onto the map are actually not clickable because of the invisible boundaries of .newSVG


  • I have a 2 day break from State Active Duty for the Coronavirus...
  • There is an issue with the Google Geocode API that prevents it from being used when referrer restrictions are enabled. Did a quick fix by just removing that restriction. Will need to look deeper into this before production.
  • Removed unnecessary grid layouts in the Pushbar. In total it removed about 80 lines of HTML but it helped simplify the layout so the content gets painted quicker.
  • Fixed Pushbar layout on smaller screen sizes. Works well in my 27 inch monitor and 15 inch laptop. Still requires more testing
  • Spent the rest of the day spinning my tires. Could not figure out how to get the drag-and-drop symbol to respond to touch events.

March 2020


  • Added 31 Mod2 symbols
  • Finished Mod2 symbols
  • Added 5 Command Post symbols
  • Finished Command Post symbols
  • Added 48 Tactical Mission Tasks
  • Finished Tactical Mission Tasks symbols
  • Added 144 Graphic Control Measures
  • Finished Graphic Control Measures
  • Refactoring militarySymbols.js
    • Starting lines: 18,891
    • Starting Size: 445.01KB
    • Ending lines: 10,986
    • Ending Size: 279.48KB
  • Refactoring mod1.js
    • Starting lines: 3867
    • Starting Size: 90.8KB
    • Ending lines: 3718
    • Ending Size: 87.9KB


  • Greatly optimized Resizer() function. Previously when the user would click on the symbolSelect menu, this function would resize ALL the symbols. This took nearly 700ms and there was a noticeable lag between clicking the menu and when it would appear. I added the functionality to check whether the symbol is visible on the screen and then only resize those symbols. When the user scrolls down it will continually check if the position of the menu and attempt to run the resize function when the scrollTop threshold is broken. This new functionality now takes 53ms to run.
  • Added async/await to bounceInAnimation() and setSelectMenuTextContent() which greatly increased the speed of addSymbolsAndModsToList(). Bringing the time down from 450ms to 96ms
  • Added PreloadWebpackPlugin to webpack.common.js. Max Potential First Input Delay lowered from ~2500ms to 230ms
    • On further inspection this does not always work. Might be an issue with running lighthouse on the dev build
  • Added preconnect rel attribute on google fonts stylesheet
  • Fixed bug preventing 100K grids from drawing on zoom levels less than 6. This was due to instantiating leaflet bounds in the initialize method
  • Centered map on United States and brought the zoom level out so the 100K grids are not drawing on the map during page load
  • Moved Roboto to head so I could add the preload attribute
  • Fixed async bug where if the user searches for a symbol and clicks the delete button the app would crash
  • Fixed async bug where if the user clears out a search field it would crash the app
  • Fixed bug in Resizer function which caused FireFox to shit out.
  • Fixed async bug where a user clicks a popular icon but there is text in the search field, so the app would explode.
  • Fixed bug where the task force amplifier would cause the app the explode. Apparently MainMS was missing an echelon setting when I instantiated it
  • Fixed bug where Aviation Equipment did NOT convert into flying outline
  • Fixed bug where the symbol list would not show up if a user had any text inputted into the uniqueDesignation and higherFormation fields
  • Fixed bbox bug on the 2nd element in the command post list
  • Fixed bug where User Text control was outputting dark blue instead of light blue
  • Fixed bug where Grid Overlay toggle for 100K labels were showing up as enabled despite being on zoom level 6. I have them disabled for that zoom level due to performance issues.
  • Mod2 starting count: 20, ending: 30


  • Added an async/await chain inside addSymbolsAndModsToList(). This has a great impact on reducing the page load times on the dev site
Lighthouse Score019
First Contentful Paint45.2s2.1s
Speed Index45.2s13.4s
Time to Interactive46.9s52.6s
First Meaningful Paint45.7s47.2s
First CPU Idle45.7s47.2s
Max Potential First Input Delay2990ms2030ms
  • Had to call it quits early despite the fucking coronavirus apocalypse.
  • Since Web Workers don't interact with the DOM I can't use it with addSymbolsAndModsToList() but I could potentially load all those symbol object files?


  • Disabled click propagation on symbols. Now when a user clicks on a symbol the map won't zoom in.
  • Added a Leaflet control that allows the user to add text markers to the map
  • Implemented the popup feature for text markers, so now they can be deleted!
  • Added colored text selector for the User Text Input Leaflet Control
  • Added the Leaflet.Draw plugin for more user interaction
  • Ran into issues with getting a printing plugin for leaflet. I think I'll just roll my own. Leaflet.EasyPrint would work but when the print job is done all the markers would disappear. Look into Print.js
  • Lighthouse Prod build:
    • Score: 8
    • First Contentful Paint: 11.4s
    • DOM Size: 7,501 elements
    • chunk.js: 569KB
    • app.js: 352KB
  • Lighthouse Dev Build:
    • Score: 0
    • First Contentful Paint: 45.3s
    • DOM Size: 7,502 elements
    • chunk.js: 5.2MB
    • app.js: 2.7MB
  • For some reason the most popular symbols event listener was duplicated verbatim... right below each other and I didn't catch it.
  • Disabling the 100K grids on page load will bring the Dev build Lighthouse score from 0 to 20 and lowers the First Contentful Paint from 45 seconds to 1.7 seconds
  • TODO: Combine Leaflet.DumbMGRS.js + map.js + moveSymbol.js
  • TODO: Combine app.js + index.js
  • I'm sick of these dependency cycle warnings. I have no idea how to fix them.
  • WebPack dev build isn't minifying one of the CSS bundle files and I don't know why. I'm at the point where I think I should hire some help


  • Added download symbol buttons for SVG and PNG symbols. Incorporated them into the Menu Surface and added a tooltip for people who don't know what the difference is between an SVG and PNG file... Which is pretty much everyone
  • Tried and failed to incorporate a Drawing toolbar for Leaflet. All the plugins that are available are heavy and don't allow you to include text. This will be a project for later.
  • Consider Leaflet Google Mutant
  • Added all of the base symbols
  • Added all of the Mod 1 symbols and made adjustments on affiliation type
  • Starting number of symbols: 278
  • Ending number of symbols: 460
  • TODO: When dropping a symbol on a map it remains selected. So when you try and drag another symbol on the map you can't drop it on the map
  • TODO: GCMs and TMTs still need to be added to militarySymbols object


  • Flying equipment symbols need to be able to morphed into flying outlines
  • Starting number of symbols: 154
  • Ending number of symbols: 278


  • Removed the mdc-grid on the map selectors and converted it to a list
  • Added the MDCList package
  • Fixed the map selector list
  • Fixed an error with the latLngFromMGRS() function. Now it will throw an error on an invalid LatLng
  • Added Viewport Biasing on Google Geocoder API to retrieve better results
  • Removed attributionControl from maps as they are distracting
  • Fixed zoom bug in in Leaflet.DumbMGRS. This bug was preventing maps from going beyond their default zoom levels. Some grids are still not drawing but I will worry about that later
  • Added content and styles to the bottom app bar (section 3)
  • Added content and styles to the bottom pushbar
  • Added About section on surface menu
  • Fixed a webpack error where images cannot be loaded (
  • Added a favicon
  • Began adding symbols to list (BIG MOMENT HERE)
  • fixed Fuse.js search threshold from 0.6 to 0.2
  • Added logic to modify decorators on flying symbols
  • Added hover effect on the social media icons
  • Starting number of symbols: 18
  • Ending number of symbols: 154
  • Index.scss is a gigantic file, this needs to be broken down or tree shook
  • militarySymbols object file should be loaded via webworkers. This project is about to get massive
  • Fixed MDCRipple effect on surface menu buttons


  • Working on eslint errors
    • app.js (20 errors)
    • index.js (18 errors)
    • Leaflet.DumbMGRS.js (1 error)
    • map.js (2 errors)
    • moveSymbol.js (11 errors)
    • militarySymbols.js (3 errors)
    • mod2.js (1 error)
    • helperFunctions.js (4 errors)
  • Gave up on eslint errors. I need to finish this project and I would be here for another month trying to resolve them.
  • Added MGRS coordinates search bar
  • Added Address search bar and integrated it with Google Geocoder API
  • Added more base maps to the config.
  • Began implementing the base maps into the menu surface for quick switching

February 2020


  • Created new project structure
  • Added new webpack configs
  • Merged code from mdcComponents into index.js
  • Fixed bugs with marker popups
  • Updated most Material Design Components to 4.0
  • Updated babel from 6.26.3 to 7.8.4
  • Updated all other babel plugins
  • Updated eslint
  • Updated webpack from 4.0.0 to 4.41.6
  • Look into merging app.js and index.js and go through your eslint errors
  • Clicking on a symbol will sometimes cause the map to zoom in. This is highly annoying


  • Tried and failed to move this project over to Parcel
  • Tried and failed to create a new webpack config. Some large errors occurred because I was updating all of MDC packages and apparently node-sass cannot use the @use module in sass files... Yeah idk
  • Tried and failed to move this project over to Snowpack
  • Fixed error in most popular symbols where if the search field has text in it, it would crash the app. I did this by adding clearSearchField() to the event listener
  • Added toggle switches for GZD, 100K, and 1000M labels and grids
  • Added a switch validator for grids and labels based on map zoom


  • After 3 months and 340.33 hours I have finished the MGRS overlay plugin.
  • Updated leaflet dependency to 1.6
  • Updated node-sass to 4.13 (4.9 did not support Node version 13)
  • Created folders for JS files based on the theme
    • map: Deals with Leaflet and its plugins
    • symbolObjects: Deals with the logic behind creating symbols. Also removed the word "object" from each of their file names.
    • ui: Deals with Material Design components, pushbar, or generally anything else UI related
  • Moved DisableInputs and addSymbolsAndModsToList from helperFunctions into mdcComponents
  • Tweaked the settings for Fuse.js for more accurate searches
  • Moved TransformModifiersOnEquipment from helperFunctions into placeSymbol
  • Removed leaflet-textpath dependency
  • Removed the esm dependency. No idea why I even had it in the first place
  • Added the map.locate method to automatically center the map on the users location
  • Added "transform-object-rest-spread" to webpack plugins because for some dumbass reason it isn't enabled by default
  • Added my Leaflet.DumbMGRS plugin!
  • Added coordinate info box in the bottom app bar
  • Removed geodesy dependency
  • Added Grid Overlay menu surface
  • Spent too much time messing around with imports/exports and global vars. This app is a total mess and I'm at the point where I think I just need to put that on a low priority list and just finish this app.
  • TODO: Add in the grid overlay toggle buttons on the menu
  • TODO: Consider moving easting/northing to bottom app bar section 3 and reduce the bottom app bar back to 80px height.
  • TODO: Convert bottom app bar into an MDC grid? This would probably be a lot nicer to work with
  • TODO: Remove menu surface button in exchange for a series of switches?
  • TODO: When the app first loads it asks for your location, when the user agrees the map kind of "hangs" and does not set the view properly


  • I finished Leaflet.DumbMGRS.js!!
  • Fixed 1000m grids on special zones in Norway and Svalbard
  • Optimized polylines with L.LineUtil.clipSegment
  • merged gzdObject and tree shook mgrs.js


  • Working on Leaflet.DumbMGRS.js
  • Fixed 100k labels
  • Refactored genLabels function
  • Configured 100k grid/labels switches
  • Converted GZD into a proper leaflet plugin class
  • Removed old 1000m grid dictionary


  • Working on Leaflet.DumbMGRS.js
  • Converted 100k grids to leaflet plugin
  • configured GitHub pages and Heroku deployment for this plugin


  • Working on Leaflet.DumbMGRS.js
  • Noted huge 100k error in Grid Zone Designator rows 30 and 31


  • Working on Leaflet.DumbMGRS.js
  • Fixed issue with grid labels on southern hemisphere latitudes
  • Added 1000m grids label switch
  • Added 1000m grids switch

January 2020


  • Working on Leaflet.DumbMGRS.js
  • Implemented L.OSGraticule.js plugin for 1000m grids
  • Fixed bug where 1000m grids were drawing beyond their Grid Zone Designator boundaries


  • Working on Leaflet.DumbMGRS.js
  • Fixed zoom level bug on 100k grids


  • Working on Leaflet.DumbMGRS.js
  • Discovered huge bug with polylines being drawn below the equator... Good fucking lord
  • Added 100k grid labels


  • Working on Leaflet.DumbMGRS.js
  • Added cleanVert function to terminate easting/northing lines on grid zone designator eastings


  • Working on Leaflet.DumbMGRS.js
  • Reduced polylines from 1089 to 476!


  • Working on Leaflet.DumbMGRS.js
  • Reduced polylines from 2235 to 1089!


  • Working on Leaflet.DumbMGRS.js
  • Fixed issues with northing/easting lines being drawn multiple times per regeneration


  • Working on Leaflet.DumbMGRS.js
  • Simplified northing lines for 100k grids


  • Working on Leaflet.DumbMGRS.js
  • Tweaked 100k grids


  • Working on Leaflet.DumbMGRS.js
  • Tweaked 100k grids


December 2019


  • Working on Leaflet.DumbMGRS.js
  • Completed 100K grid data


  • Working on Leaflet.DumbMGRS.js boilerplate


  • Made very little progress on the fucking grids. I got the 1000m SORT OF working. But this whole plugin is a total embarrassment


  • Fixed issues with the 100km grid square not generating when the map bounds contains 2 GZDs. Now I just need to implement this into a proper leaflet plugin


  • Got the 1000m grid squares to partially generate on a split GZD. Right now I have it generating for the left side of a GZD, there is a Promise function on the combinedIntervals() class method. I am thinking that I could possibly run the class again to generate the right side. If this works then I can definitely see this becoming an open source plugin.


  • Got a rough copy of the 1000 meter grid square generator. The problem with it is it will not generate grids when the map bounds contain 2 grid square designators. This is due to the eastingIntervals() and northingIntervals() methods. Since adjacent GZDs have vastly different UTM values, the eastingIterator/northingIterator is not always less than this.endCoordEasting.easting. It is recommended that you go back into your class function in the leaflet-mgrs-layer-pages-gh project and find out how to incorporate this
  • BUG: The 10k grid squares are not accurate. Scrape that whole idea and work on building the grid generator


  • Fixed missing 100K grid squares in the generator (was missing grids for over 250 GZDs!)
  • Fixed IndexedDB not logging the right data
  • Created a web worker to load the 100K grid square data in the background
  • Web Worker now posts data from IndexedDB
  • Created dynamic 1000 meter grid squares


  • Worked all day on fixing the grid generator. I have a working copy now but I'm too exhausted to add it. Look for the gridGeneratorExample.js file
  • Finally got all the corner grids for all 100k grid squares. Putting them in the CORRECTCORNERGRIDS.js file to look at later. It's 4:04am and I'm exhausted

November 2019


  • Worked on 100K grids. I generated a JSON file for all the 100K grid squares in GZDs that are NOT on a body of water (eg- the fuckin oceans). Adding them to ""
  • The grids get retrieved by a Service Worker and then are stored in IndexedDB. When the user zooms in it will find the GZDs that match the key and will draw the 100K grid squares. This technically works but there are some major inefficiencies with it. For example, I am wondering if I can cut the file size down by removing the bottom left and top left arrays. Also when the user drags the map the 100K grids will draw over each other. Very easy way to crash the browser.


  • Worked exclusively on getting coordinates from 100k grid squares. Working version can be seen in GETGRIDSQUARECOORDS.js and also on my codepen


  • Corrected the GZDs for exception zones (32V, 31X, 33X, & 37X)
  • Removed GZDs for zones 32X, 34X & 36X
  • Removed MGRSString function as it did not take into consideration the exception zones, and replaced it with geodesy import
  • Tried and failed getting the 100k grids to work
  • Good progress on extracting bbox values from 100km grid squares
    • Look in the "100K_MGRS_GRIDS" folder and select the GZD you want to extract data from
    • Go to and convert the KML to GeoJSON
    • Go to mapshaper and upload your GZD file
    • Run this command in terminal:
    • mapshaper 18T.geojson -split 100kmSQ_ID -o bbox-index
    • This will extract all the grid layers, delete them and keep "bbox-index.json"
    • From there run this regex command in a search & replace that will truncate the grid coordinates
    • \d{7}(?=\D)
    • Consider using a JSON parser for all of this


  • Worked on fixing the tags in thegot a lot of inspiration from HTML Head
  • Since this website is primarily an app, I added the "application-name" meta tag
  • Added the "theme-color" meta tag which will just change the toolbar of the app as documented here
  • Added the "rating" meta tag with a value of "General" based on the content of the app
  • Added humans.txt
  • Added a new class that creates dynamic GZDs depending on the map.getBounds()
  • Fixed the bug in the polylines that prevented symbols from being dropped on them. This was a simple options fix by setting "interactive" to false in gzdPolylineBox
  • Added maxZoom to the default map. Prevents those annoying grey tiles


  • Fixed a very difficult bug that prevented markers from being deleted if there were more than 2 on the map. This was due to creating my own popup solution. Since I don't know how to bind the popup data to the symbol it caused a lot of problems. This issue was solved by creating a layerGroup and adding all my markers to it. Then in the symbolData object I created a ID key with a unique value of 'marker._leaflet_id'. This object was then passed into the createPopupDiv() function and it allowed me to delete each marker by their own unique ID. Solution was found here
  • Interesting Military Installation Maps
  • Potential web content for MGRS familiarity here (saved locally as grid.pdf)
  • Began creating the functionality for implementing my own Grid Zone Designators
  • Created a Grid Zone Designator generator
  • Refer to the ES6 version of a working MGRS Grid here
  • Created all the Grid Zone Designators for the world. Now we just need to generate them when they are within the map bounds
  • Good source for visualizing Grid Zones here
  • BUG: Symbols cannot be dropped directly on the grid lines. This is an issue with the drop function in moveSymbol
  • BUG: On boot up the map does not load 100%. This could be a future problem on production.


  • Fixed a bug where the popups would stack on top of each other with each click
  • Fixed a bug with the popup arrow not aligning to the center of the popup box. I did this by appending the outerArrowDiv and innerArrowDiv to the symbolInfoDiv and then adjusted all the values by using CSS calc()
  • Implemented Delete Button on popup
  • Set CSS styles for popup
  • Added function for translating LAT-LNG to MGRS
  • added moreReadableString() function in app.js to make Popup data better to read
  • Implemented popup close button
  • Moved JS styles into SCSS file
  • Added an event listener that updates the MGRS coordinates when the mouse moves
  • Added pulsating prompt to remind the user to drag the symbol onto the map
  • Tried and failed implementing the MGRS grid
  • BUG: When the page has multiple markers, they won't delete


  • Got the dynamic popup box to work in test environment
  • Began integrating the popup into the main project. Major issues with this.


  • Worked on implementing popup as a web component
  • Utter failure of a day. Wasted on the popup question
  • Total failure of a day. Spent the entire time messing with popup windows for markers and made no progress


  • First day back from being sick
  • Interesting leaflet.draw, and this one too
  • Added map symbol drag-n-drop
  • Fixed bug where a symbol is dropped onto another symbol and it disappears
  • Added map symbol popup window
  • Fixed bug that caused the symbol control box to disappear when resized to 0
  • Fixed bug when user resizes the marker outside of the browser window or when they resize it too quickly
  • Fixed bug where JSON data from drag event wasn't transferring over to drop event
  • Added delete button on infowindow
  • Most of today was spent on trying to center the info window when the symbol is resized
  • Since the info window is too difficult to implement via Leaflet, try to create one natively in HTML/CSS. These could use some nice MDC animations


  • Added the facebook page to the production version of MGRS-Mapper. Hopefully I will get a few links between now and when I go live
  • Added Fusco to the private repo in case I fucking die
  • Added affiliationString() function. This will return a string of 'None' if the symbol is a TMT/GCM. Otherwise it will return the affiliation string by setting the first character to uppercase and adding a space between words. (eg- it will turn 'friendlyTemplated' into 'Friendly Templated')
  • Moved Tactical Mission Tasks into the main militarySymbolsObject file.
  • Modified DisableInputs to accept an object as a parameter. This makes readability so much easier.
  • Most Searched for symbols:
    1. Infantry
    2. Check point
    3. Infantry, Mechanized
    4. Target Reference Point
    5. Armor, Combat
    6. Field Artillery, Combat
    7. Ground Zero, Weapon (nuclear explosion)
    8. Cavalry
    9. Military Police
    10. Infantry, Light
    11. Engineer
    12. Observation Post
  • Most emplaced symbols:
    1. Default unit
    2. Infantry
    3. Infantry, Mechanized
    4. Infantry, Light
    5. Armor
    6. Military Police
    7. Ground Track
    8. Combat, Unit
    9. SOF Unit
    10. Field Artillery
    11. Infantry, Airborne
    12. Armor Track
  • Added Most Popular Symbols section
  • Added Leaflet map
  • Centered TMTs in symbol panel by modifying path data

October 2019


  • Had way too many issues with MapBox and decided to revert back to where I left off on the 28th. Moved the modified webpack.config and package.json files to the ./old folder and pushed the changes to a new branch "7bitSignedAscii".
  • Centered the dropped symbol on the mouse cursor
  • Since a user's symbol orientation is unknown I think we need to combine Tactical Mission Tasks into the general militarySymbolsObject file.
  • Created a Facebook page
  • DisableInputs should be refactored to accept an object as params. It is unreadable as it stands
  • Added site logo but to be honest I am not happy with it and it should probably be removed.
  • Tooltip inspiration Tippy.js


  • Got tied up in JS Perf testing out better implementations of the Resizer class. Found that converting it to a function yields with an array that stores values yields a +4,000% performance increase. Check the data out here and here
  • Online SVG Editor this might be useful when adding symbols
  • Fixed the bug where the symbolSelect unordered list wasn't mating to the bottom of it's dropdown select box. This was due to an idiotic mistake on my part by manually setting the style value to this:*.root* = `transform-origin: center top; top: ${selectSymbol.root_.getBoundingClientRect().bottom}px; max-height: 714.375px; right: 33.3438px;`;
  • Fixed overflow-x problem for select boxes in FireFox.

  • Moved JSON preview to Menu Surface IOT prepare for the map
  • MapBox is a bloated piece of shit software that fucks with Moveable.js. Consider going back to Google Maps. Spent over 13 hours on it today and got no where


  • Created a grid for all the list item elements in the select boxes. Now the symbol description sits on top of the type and everything is aligned properly without having to use that ugly padStart() method. Decided to code my own CSS grid instead of using MDCs built in Layout Grid (didn't feel like generating tons of extra divs).
  • Fixed a bug when selecting a GCM it would remove the first indexed item in the select boxes for Mod1/2, CPs and TMTs. This was an issue with DisableInputs and the way MDC listens for events. I was setting "selectMod1.selectedIndex = 0" which was causing a change event that then triggered placeSymbol(). So when a GCM was selected it would run placeSymbol() 5 separate times. By setting "selectMod1.setEnhancedSelectedIndex_(0);" this "silently" changes the index of the select box and the event listeners don't pick it up.
  • Added mdc-typography--headline6 to all non-generated list items for uniformity.
  • Got stuck on adding a map. I think I am going to go with MapBox and load in some vector and raster maps. I have a semi-working version on codepen here
  • TODO: Implement the MGRS overlay!!!!
  • BUG: Scroll down on the pushbar and then select a symbol. Notice how the list does not append to the bottom of the select box? That needs to be fixed. It's also not resizing the selectSymbols items. The symbols in firefox are also jacked up. In Chrome all you need to do is hover over them and they will resize but in Firefox this does not happen. Upon further inspection this looks like the default behavior of MDC. Look into locking the scroll position when a menu is open. Putting a setTimeout on the Resizer class seems to fix the issue on Chrome but it still persists on Firefox... fml


  • TransformModifiersOnEquipment() is being imported into mdcComponents but only being used in app.js
  • Tried fixing the bounceIn animation for equipment modifiers but got stuck. Settled on a zoom in animation that I got from Animate.css
  • Added semi-dynamic viewBoxes on symbols via the setViewBox arrow function
  • Fixed a bug that appended empty divs to the symbol. For instance, a select box with generated content would automatically set the value to "None" which caused my placeSymbol method to append that div even though it was empty. I added a ternary operator in the symbolValues function expression that would return the value undefined if it was set to "None"
  • Added a dynamic block of code in a
     tag that displayed data-symbol-info in a readable format. More info here
  • Fixed bug that appended the wrong information into 'data-symbol-info'.
  • Fixed animation bug that prevented the drop down animation for Equipment and GCMs
  • Added About Section on the bottom of the Pushbar
  • Moved ES Lint rules from top of file to eslintrc
  • BUG: When removing TransformModifiersOnEquipment from the window and into imports it throws an error... No clue.
  • Fully removed graphicControlMeasuresObject and integrated it with militarySymbolsObject. Since users tend to search for GCMs as much as symbols it made more sense to incorporate them into the main symbols object
  • Fixed a bug when clearing the search field. It was looking for dataset-symbol-name, which I removed earlier
  • Added bottom-about section on Pushbar
  • Added scroll bar styling in Chrome
  • Fixed scroll bar bug in Firefox by setting the .symbolSelectors height statically to 911px
  • Fixed the fadeInAndSlideOut animation bug on Firefox with an 'animationend' event listener on the window.
  • Added bounceInAnimation to Command Post and Tactical Mission Tasks
  • BUG: Choose a GCM, then go back to a normal land unit, now check Mod1 or Mod2 -> The first item is missing???? This is an issue with the Resizer class


  • Integrated the Drag-and-Drop functionality. (this took 14 hours).
  • Noted bug in Firefox on the placeSymbol() method. For some reason setting the height and width via getBBox() causes the app to fail. Setting the values statically fixes this issue. Although I don't like it.
  • BUG: Graphic Control Measures do not work with clone-and-drag. IMO this whole feature needs to be incorporated into the main military symbols object. In the long term this will be more beneficial since people tend to search for GCMs just as much as regular symbols
  • Feature: Need a clear symbol button. I have the feeling if a user has selected a piece of equipment, they won't know how to escape the disabled menus.



  • Added MPL 2.0 license.
  • Finally removed the default text in the package.json file... Only took me half a year
  • Potential bug. The dropzone restriction works when you drop the symbol down but once it is dropped it can be moved anywhere outside the yellow background. Need to set the container for the symbol.


  • Noticed that a lot of search strings in the old MGRS site include things like checkpoints and TRPs. Need a way to search both object files...
  • Added clone to Moveable
  • Added cloneAndDrag.html. You will need to go through it and manually insert what you need into moveSymbol.js. But everything works with it... Thank god
  • Good website for learning about viewBox here
  • Check out this old pen you wrote about multiple conditions for switches here This is less than 30 lines of JS and could potentially replace the needless complexity of RRSwitches class


  • Fixed a bug with the animateSymbol class. Previously when a user changed a symbol and then hovered over it the zoom in animation would work. But when they hover-out the '.animateSymbol' class would run the drop in animation. This was fixed by adding the addAndRemoveSymbolPanelAnimation function.
  • Fixed a potential performance bug in the addSymbolsAndModsToList function. For some reason 'selectSymbol.foundation_.setSelectedIndex(0)' was running again and again depending on the number of elements in the selectSymbol dropdown. This was fixed by replacing it with the following following:


  • Added a Bottom App Bar in HTML and SCSS. I kind of just copied the CSS for the Top App Bar but added a property of bottom: 0; I made a CodePen of a more intricate bottom app bar here I am not sure if this is even worth incorporating but it looks nice.

  • Added moveable.js. Huge issues with this one:
    • The hover animation on the symbol panel lags the shit out of the resize/scale/drag/rotate functions. Disabling it is a temporary fix.
    • The bounding box is off center on the symbol
    • The symbol should be cloned and then the target is attached to it
    • When selecting a new symbol the entire functionality fails
    • 92k file size (wtf)
    • Only works when I put a setTimeout function on it (total hack)
    • When placing the symbol down, if you minimize the pushbar, the symbol moves along with it (note: this does not happen when I set it to work on the red ball. I think cloning the dom node is what will fix these issues)
    • I think if I clone the symbol in the panel, I won't have to worry about the animations lagging, or the pushbar fucking things up...
    • is a good resource that shows how to drag and clone an object. However it requires an additional dependency called Scene.js
    • At this point you need to start looking into tree-shaking because Moveable+Scene is about 125k in size.
  • Added bounceInAnimation() to Activity, Installation and Task Force.
  • Also noted that Moveable.js requires SceneJs to run certain tasks like clone-and-drag.


  • Added menu open and closed icons for top app bar
  • Added more files to gitignore
  • Separated JS and CSS files into their own folders
  • Fixed bug with GCMs not showing up. This was due to an extra parameter in DisableInputs (because I moved the flying param logic to MilSym class)
  • Set symbol viewBox to new fixed attributes which should contain all elements in the panel
  • Added 50px to padding-bottom and reduced padding-top by 5px in the symbol panel
  • Reduced all command post flag staffs to a max length of 240
  • Fixed bug with Unique and Higher Formation text
  • Mathematically centered the unique identifier text >
    uniqueDesignationText.setAttribute('y', '107.493');
                   svg.getBBox().height + (24.5 - 2) * 0.333
                   // height = 100
                   // 24.5 = font size in pixels, 2 = half of the strokeWidth, 0.333 = 1/3rd of the symbol size; which gives you 7.493
  • Cleaned up and organized CSS files
  • Added hover animations to symbol panel and dismissible drawer icon
  • Added select menu icons and adjusted CSS styles
  • Fixed a bug where if a user types in the search field for an icon, the selectSymbol dropdown would compress. It wasn't an elegant fix but it technically works > = 'transform-origin: center top; top: 591.625px; max-height: 714.375px; right: 33.3438px;';
                   // Test this before production
  • Fixed CSS issues on switches
  • Added Surface Menu component to Top App Bar


  • Refactored DisableInputs
  • Smashed bugs with GCMs overriding DisableInputs (This took like 6 hours)
  • Refactored enableTaskForce, enableInstallation, enableActivity
  • Fixed bug where if you enabled Activity, Installation, and Task Force and THEN enabled flying, the amplifier switches wouldn't disappear. This was fixed inside adjustSymbolOutlineForFlying()
  • Would static methods on MilSym be a more efficient way to go about this? The purpose of static methods is that you can access generic properties on a class without having to create a class instance. Static methods don't have access to the this class instance, and therefore are really only there as utility functions and properties.
  • Added Pushbar.js
  • Added Top App Bar
  • Incorporated old Pushbar logic
  • Smashed bugs with flying switch. Previously if you enabled a flying symbol then switched to a non flying symbol it would keep the flying outline. This was fixed by adding this._flying = false in the flightCapable if statement in MilSym
  • Added z-elevation and other styles to elements to complete the skeleton


  • Messed around with async/await in MilSym
  • changed TransformModifiersOnEquipment from a class to a async function
  • Attempted to fix the bounceIn animation function for equipment icons but ran into roadblocks. Minor issue, will look again later
  • Refactored DisableInputs class into function IOT abide by ESLint "Disallow new for side effects"
  • Added a boolean switch to compare old and new affiliation values when the selectSymbol dropdown is clicked. If the old value and new value don't match up, then run a "new MilSym" if that dropdown is open IOT change the symbol outlines to the currently selected affiliation. This is a huge performance boost because previously I was creating all new symbols no matter if the dropdown was opened or if the current affiliation was not changed.
  • Bugs Smashed: Pending outline on equipment in the symbol dropdown not showing, Task Force button not working on page load, disableInputs not working, When Task Force amp is selected it was preventing users from searching for equipment (made the symbol panel go blank), Fixed an issue when a symbol is in flight and it was throwing Mod2 off center when a user switched affiliations, fixed a bug where the flying switch was disabled when activated, fixed a bug where if a user checks and unchecks flying they couldn't add a task force.
  • Cleaned up app.js and mdcComponents.js and moved some functions to helperFunctions.js
  • Reduced taskForceObject.js from 8.48 kb to 3.11 kb!
  • Added tacticalMissionTaskObject and all its related functions
  • Added graphicControlMeasuresObject and most of its related functions


  • Added the new MilSym class
  • Added setSelectBoxTextContent function on page load
  • Fixed inputDesignationFields()
  • Fixed Equipment Outline for friendly units
  • Fixed Task Force switch
  • Fixed Installation Switch
  • Fixed Activity Switch
  • Fixed equipment outline...again

September 2019


  • Decided against using setters on Activity, Installation, and Task Force switches because these switches are not mutating data, they are adding data. The Flying switch is mutating the affiliationOutlineObject data for the symbol so it makes more sense to use it there
  • Added Command Post object and functionality
  • Decided to use setters and getters for everything. Check MilSym_Refactored.js for big changes.


  • Removed RRSwitches class in favor of reinforcedReducedSwitchTest()
  • Added RRSwitches class back...
  • Moved enableFlyingOutline logic to MilSym class under "get affiliationOutlineData()"
  • Refactored enableFlyingOutline switch
  • Added Activity modifier
  • Added Installation modifier
  • Added DisableInputs class
  • Added Task Force Object and functions
  • Added Getter/Setter logic to MilSym and removed the old code.
  • File Sizes: (app - 36.29kb), (mdcComponents - 28.41kb), (unitSizeObject - 9.77kb), (taskForceObject - 7.59kb), (mod2Object - 6.89kb), (militarySymbolsObject - 5.51kb), (affiliationOutlineObject - 4.44kb), (mod1Object - 3.54kb)


  • Moved eslint, eslint-config-airbnb-base and eslint-plugin-import from dependencies to devDependencies
  • Added a Change log to track what I am doing. Commit notes are very sparse sometimes
  • Removed WebpackMonitor as it has not been maintained in 2 years
  • Installed webpack-bundle-analyzer plugin
  • Tried replacing the [selectSymbol, selectAffiliation, selectUnitSize, selectMod1, selectMod2] forEach loop with something better but got bogged down
  • Added disableInputsOnEquipment()
  • added flight capability modifier

1SEPT19 to 22SEPT19

  • Configured Modifier 1 dropdown
  • Configured Modifier 2 dropdown
  • Refactored MilSym class
  • Added equipment mobility indicator logic
  • Reinforced/Reduced/Reinforced and Reduced logic added
  • Fixed Modifier 1 and Modifier 2 on equipment symbols
  • Fixed animation errors on equipment
  • Fixed issue with equipment that is currently in flight
  • Fixed issue with inputs not being disabled when equipment icons are in flight
  • Added DisableInputs class
  • Added Activity modifiers
  • Added Task Force modifiers
  • Fixed Task Force modifier on certain echelon sizes
  • Added Command Post symbols
  • Moved eslint, eslint-config-airbnb-base and eslint-plugin-import from dependencies to devDependencies
  • Added a Change log to track what I am doing. Commit notes are very sparse sometimes
  • Removed WebpackMonitor as it has not been maintained in 2 years
  • Installed webpack-bundle-analyzer plugin
  • Tried replacing the [selectSymbol, selectAffiliation, selectUnitSize, selectMod1, selectMod2] forEach loop with something better but got bogged down
  • Added disableInputsOnEquipment()
  • added flight capability modifier
  • Removed RRSwitches class in favor of reinforcedReducedSwitchTest()
  • Added RRSwitches class back...
  • Moved enableFlyingOutline logic to MilSym class under "get affiliationOutlineData()"
  • Refactored enableFlyingOutline switch
  • Added Activity modifier
  • Added Installation modifier
  • Added DisableInputs class
  • Added Task Force Object and functions
  • Added Getter/Setter logic to MilSym and removed the old code.
  • File Sizes:
    • app - 36.29kb
    • mdcComponents - 28.41kb
    • unitSizeObject - 9.77kb
    • taskForceObject - 7.59kb
    • mod2Object - 6.89kb
    • militarySymbolsObject - 5.51kb
    • affiliationOutlineObject - 4.44kb
    • mod1Object - 3.54kb
  • Decided against using setters on Activity, Installation, and Task Force switches because these switches are not mutating data, they are adding data. The Flying switch is mutating the affiliationOutlineObject data for the symbol so it makes more sense to use it there
  • Added Command Post object and functionality
  • Decided to use setters and getters for everything. Check MilSym_Refactored.js for big changes.

August 2019

August (entire month)

  • Worked on symbol generating class
  • Added icon transitions
  • Added icon search field
  • Optimized search function
  • Added Equipment icon logic
  • Added unit echelon sizes
  • Added MilSym class for object construction
  • Imported all files into WebPack

July 2019

July (entire month)

  • Worked on symbol generating class

June 2019

June (entire month)

  • Worked on symbol generating class

May 2019

May (entire month)

  • Worked on symbol generating class

April 2019

April (entire month)

  • Worked on symbol generating class

March 2019

March (entire month)

  • Worked on symbol generating class

February 2019

February (entire month)

  • Giving up on MilSymbol.js. I don't know how it works nor how to add upon it. I'm going to create my own class that generates symbols

January 2019


  • Begin work on Version 2 of MGRS Mapper
  • Neat features I would like to incorporate
    • Have gridlines draw at standard intervals (1:20k, 1:50k etc) and give an option to lock them in place.
    • Create a feature that collapses the sidebar so the user gets more space to work with
    • Full page screen shot
    • Share map feature. This should enable the user to send his map to another person. I think you can do this with AJAX. and query string parameters. Need to look into this.
    • Video instruction modal. Some people don’t know how to use this app
  • Apply for Public Program on Google for free API access Understanding Public Programs | Google Maps Platform | Google Developers


September 2018


  • Added icon size lock (beta)
  • Stopped development for the rest of the year. Started thinking about redoing this entire application

August 2018


  • Initial configuration of MGRS Mapper
  • Completed version 1 with jQuery, MilSymbol.js, Google Maps, USNG GMAP3, and Material Design Components. Version 1 took about 4 weeks of development time.


Loading symbol cards...