Map JSON generator

Map JSON Generator allows to quickly draw markers, polylines and shapes on Google Map, get coordinates, measures and generate JSON objects to use in your applications.
The generator provides the following features:

  • Draw markers and get their coordinates
  • Draw a list of marker (polylines) and get an array of coordinates
  • Draw shapes (circles, rectangles and polygons)
  • and of course it includes some utilities like cleaning map, get center, go to LatLng, copy to clipboard, dran’n’drop and more…
  • FEATURES

    Draw Shapes with JSON preview

    After drawing a shape a preview of its JSON is automatically generated on the right side of the screen.

    NOTE: Use double click to stop drawing a shape (i.e. polylines and polygons)

    mapjson_element_preview

    Following a quick preview of the generated objects:

    Markers:

    Circles:

    Rectangle:

    Polylines and Polygons:

    About the id

    The id property is a timestamp.
    When you create more than one element, the first id represents the current timestamp, while the following items will use the format id + 1000 millisecond, so you can use the ID as a “date” and each element will have a different one.


    JSON Generator

    Click the GENERATE JSON button to generate a completed version of the JSON. It will include the whole content you drawn on the map.

    mapjson_generateJson


    Select and update Shapes

    Select the Hand tool (SELETION MODE), click any element on the map to get a quick JSON preview and update its position/anchors if needed.

    NOTE: only circles and markers can be moved! You can only change anchor positions of rectangles, circles, polylines and polygons

    mapjson_updateShapes


    Map center

    Jump to different locations by using the Google Map tools (zoom and pan) or filling the input fields you find in the footer with the coordinates you’re looking for.

    NOTE: the coordinates are always in sync with the map, so they will be updated each time you move the center of your map

    mapjsoncenter_change


    Copy to Clipboard

    One click to copy the JSON in your clipboard!

    mapjsoncopyToClipboardAll


    Update marker position

    Are your markers in wrong positions? Don’t worry. You can drag them everywhere.

    mapjsonmarkerPosition


    Clean all, remove selected markers and shapes

    mapjson_deleteElements


    EXPERIMENTAL: JSON preview selecting multiple markers (working in progress)

    When you are in SELECTION MODE
    Currently multiple selections are not supported. Working in progress ;

    mapjson_selectionMarker

    TODO

  • Improve multiple selections
  • Support several JSON formata and structure (and probably CSV)
  • Save and restore your maps (probably in another life 😉 )
  • Any advice is welcome (please add a comment in the blog post)
  • TECHNOLOGIES

    Map JSON Generator has been created using the following libraries and tools:

  • React
  • Google Map Javascript API
  • Materialize CSS
  • WebPack

  • It’s just an alpha version but should cover all the basic needs.
    Add a comment if it’s useful. Enjoy 😉

    Try it. It’s completely free.