Skip to content
Integrates Google Maps with an MGRS overlay and NATO military map symbols
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

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. MGRS Mapper Screenshot

Live Demo

Click Here See it in Action


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.


git clone

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

Libraries, Plugins and Repositories Used


  • 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


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

You can’t perform that action at this time.