barts83eu/mgrs-mapper

Integrates Google Maps with an MGRS overlay and NATO military map symbols

MGRS Mapper

---

🚨 As of 21MAR2020 I am stopping all development. My Army unit has been called up to fight the Coronavirus. I have no idea how long I will be gone for

Drag and drop custom generated NATO military symbols onto Google Maps with an MGRS overlay.

Live Demo

Click Here See it in Action

About

Special thanks for this project goes out to Måns Beckman's of Spatial Illusions MilSymbol Generator and Mike D's USNG-Gmap-V3. Without their open source contributions this project would have taken much longer.

MGRS Mapper is a replacement for the popular website Hawg View, but with added functionality. Users can search and select from hundreds of military map symbols for the MIL-STD 2525C standard. Once your unit is selected you can add more information to it, such as unit size, affiliation (friendly, enemy, templated/suspected, etc). When you have all the data you need for your unit you can drag and drop it onto Google Maps for operations planning. Click on the unit to display more information about it or delete it if you choose. Toggle the MGRS overlay at the top of the sidebar to create a highly detailed concept of operations.

Installing

git clone https://github.com/pistell/MGRS-Mapper.git

Open index.html in your text editor and replace Google Map's API key with your own

Libraries, Plugins and Repositories Used

• Material Design Components
• jQuery 3.3.1
• jQuery UI 1.11.1
• jQuery UI Touch Punch 0.2.3
• milsymbol.js
• USNG GMAP V3
• Google Maps API V3

TODO

• Symbols resize differently when there is unit information input from user. Need to find a way to keep symbol shapes uniform
• Download buttons are in a terrible position. Using position: absolute and hiding them in CSS when screen gets too small. This needs to be fixed
• Mobile view for this sucks. Although it is not supposed to be used in mobile, there has to be some type of solution to enable jQuery UI to interact with onscreen touch
• Add sidebar with popular choice icons (OP, Infantry, Cavalry, Enemy Infantry)
• Would be nice to have FabricJS integration. Need to find another way to be able to rotate and resize the symbols once they are on the map. As of now, only SVG markers can be rotated.
• No-fill icon toggle
• Remove Bootstrap if it is not necessary
• Unit search does not work unless user hits the magnifying glass, need to figure out why the input box event listener does not work
• Tidy up the icon presets, do we really need 15 Affiliation types? The entire Status drop down can be deleted.
• Icon preview window should be a fixed div to enable viewing when the user scrolls down
• Icon generator sidebar should be able to be hidden on command to enable more screen for the map
• MGRS grid lines might be too thin to notice, consider making them stand out more
• Minify JS
• Beautify HTML
• Add sreeenshot functionality to the Google Maps canvas
• Change Suspect on Affiliation to “Suspect/templated”
• Change Function ID to “Unit Type” and back to Function ID when Ground Installation is selected
• Remove Status from drop down
• Add project license.txt file
• Create a function to clone a map marker via the info window

Built With

• Atom
• Tears

Contributing

After cloning down the repository, run the following command within the root of the project:

npm install

This will install the project's development dependencies. To begin watching the files run:

npm start

Anytime changes are made to the js, scss, or main html file, browsersync will automatically reload the page.

If editing js/milsymbol-unit-generator.js, please be patient when saving as it will take a while for the file to compile because of it's size.

Note: Do no edit anything within the dist/ directory as it will be overwritten when building. All edits should be from within src/.

---

Creators and Contributors

• James Pistell
• Joseph Fusco