Navigation :

addShapesFromJSON

addShapesFromJSON Method

Description

Adds shapes to the diagram based on the provided JSON data. See example below.

.addShapesFromJSON(/* String */ json, /* Function */ onSuccess, /* Function */ onError)

Parameters

json String

A JSON string containing shape data. See below.

onSuccess Function

This function will be called if the request completes successfully, either after the shapes are added or after the street layer has been recomputed if applicable.

onError Function

A function that accepts one parameter, an Error object. This function will be called if the method does not complete successfully. The passed Error object indicates the nature of the failure. TODO: not implemented yet

Example

editor = new window.__editor(undefined, document.getElementById('editor-node'));
 
/* set editor properties here */
 
editor.startup();
 
// Set the diagram location.
editor.set('diagramLocation', {
    'latitude': 43.61579132,
    'longitude': -116.20157623,
    'description': 'Boise, ID'
});
// Add sample shapes to diagram.

const json = `{
    "source":"OSM Data Source",
    "streets":[
        {
            "surfaceType":"paved",
            "laneCount":"3",
            "name":"West Idaho Street",
            "path":[
                {"lat":43.615199,"lon":-116.200394},
                {"lat":43.615257,"lon":-116.2005128},
                {"lat":43.6156006,"lon":-116.2012099},
                {"lat":43.615739,"lon":-116.2014892},
                {"lat":43.6157971,"lon":-116.2016054}
            ],
            "hints":{
                "oneway":true
            }
        }
    ],
    "symbols":[
        {
            "symbolName":"Fire_Hydrant",
            "point":{"lat":43.61569,"lon":-116.2012439},
            "data":[
                {"name":"Serial No.","value":"x-123"}
            ]
        }
    ],
    "linearSymbols":[
        {
            "symbolName":"Sidewalk",
            "path":[
                {"lat":43.6158307,"lon":-116.2014332},
                {"lat":43.6158197,"lon":-116.2014066},
                {"lat":43.6158127,"lon":-116.2014121},
                {"lat":43.6157911,"lon":-116.2014293}
            ]
        },
        {
            "symbolName":"Sidewalk",
            "path":[
                {"lat":43.6158197,"lon":-116.2014066},
                {"lat":43.616122,"lon":-116.2011119},
                {"lat":43.6164296,"lon":-116.2008122},
                {"lat":43.6159492,"lon":-116.1998734},
                {"lat":43.615933,"lon":-116.1998625},
                {"lat":43.6156356,"lon":-116.2001526},
                {"lat":43.6153259,"lon":-116.2004548}
            ]
        },
        {
            "symbolName":"Sidewalk",
            "path":[
                {"lat":43.6150324,"lon":-116.2020971},
                {"lat":43.6145687,"lon":-116.2011817},
                {"lat":43.6151761,"lon":-116.2005968},
                {"lat":43.6156579,"lon":-116.2015523},
                {"lat":43.615654,"lon":-116.2015854},
                {"lat":43.6150998,"lon":-116.2021223},
                {"lat":43.6150553,"lon":-116.202135},
                {"lat":43.6150324,"lon":-116.2020971}
            ]
        },
        {
            "symbolName":"Sidewalk",
            "path":[
                {"lat":43.6153197,"lon":-116.2004197},
                {"lat":43.6153259,"lon":-116.2004548},
                {"lat":43.6156733,"lon":-116.2011381},
                {"lat":43.6158127,"lon":-116.2014121}
            ]
        }
    ],
    "shapes":[],
    "crosswalks":[],
    "structures":[
        {
            "outerWallPath":[
                {"lat":43.6154678,"lon":-116.2013641},
                {"lat":43.6154665,"lon":-116.2013804},
                {"lat":43.6154458,"lon":-116.2013997},
                {"lat":43.6154791,"lon":-116.2014645},
                {"lat":43.6154775,"lon":-116.2014836},
                {"lat":43.6150417,"lon":-116.2019082},
                {"lat":43.6150218,"lon":-116.2019029},
                {"lat":43.6149913,"lon":-116.2018386},
                {"lat":43.6149726,"lon":-116.2018561},
                {"lat":43.6149602,"lon":-116.2018533},
                {"lat":43.6149045,"lon":-116.2017475},
                {"lat":43.6149073,"lon":-116.2017277},
                {"lat":43.614927,"lon":-116.2017092},
                {"lat":43.6148711,"lon":-116.2016001},
                {"lat":43.614972,"lon":-116.2015032},
                {"lat":43.6151255,"lon":-116.2013546},
                {"lat":43.6153221,"lon":-116.2011675},
                {"lat":43.6153309,"lon":-116.2011709},
                {"lat":43.6153813,"lon":-116.2012753},
                {"lat":43.6154013,"lon":-116.2012566},
                {"lat":43.6154146,"lon":-116.2012593},
                {"lat":43.6154678,"lon":-116.2013641}
            ]
        },
        {
            "outerWallPath":[
                {"lat":43.6153221,"lon":-116.2011675},
                {"lat":43.6154066,"lon":-116.2010895},
                {"lat":43.6151728,"lon":-116.2006263},
                {"lat":43.6148972,"lon":-116.2008874},
                {"lat":43.6150746,"lon":-116.2012517},
                {"lat":43.6151255,"lon":-116.2013546},
                {"lat":43.6153221,"lon":-116.2011675}
            ]
        },
        {
            "outerWallPath":[
                {"lat":43.6157349,"lon":-116.2012155},
                {"lat":43.6160049,"lon":-116.2009549},
                {"lat":43.6160923,"lon":-116.201129},
                {"lat":43.6158199,"lon":-116.2013933},
                {"lat":43.6157349,"lon":-116.2012155}
            ],
            "name":"Adleman Building",
            "houseNumber":"202"
        },
        {
            "outerWallPath":[
                {"lat":43.6161144,"lon":-116.2002267}
                ,{"lat":43.6159295,"lon":-116.2004042}
                ,{"lat":43.6159144,"lon":-116.2003742}
                ,{"lat":43.6158218,"lon":-116.2004642}
                ,{"lat":43.6161359,"lon":-116.2010835}
                ,{"lat":43.616412,"lon":-116.2008184},
                {"lat":43.6161144,"lon":-116.2002267}
            ]
        },
        {
            "outerWallPath":[
                {"lat":43.6154283,"lon":-116.2006084},
                {"lat":43.6155679,"lon":-116.2008771},
                {"lat":43.6157812,"lon":-116.2006702},
                {"lat":43.6158007,"lon":-116.2007103},
                {"lat":43.6158517,"lon":-116.2006623},
                {"lat":43.6158644,"lon":-116.20065},
                {"lat":43.6157057,"lon":-116.2003447},
                {"lat":43.6154283,"lon":-116.2006084}
            ],
            "name":"Western Proper",
            "houseNumber":"610"
        },
        {
            "outerWallPath":[
                {"lat":43.6155679,"lon":-116.2008771},
                {"lat":43.6156427,"lon":-116.2010212},
                {"lat":43.6159016,"lon":-116.2007645},
                {"lat":43.6158517,"lon":-116.2006623},
                {"lat":43.6158007,"lon":-116.2007103},
                {"lat":43.6157812,"lon":-116.2006702},
                {"lat":43.6155679,"lon":-116.2008771}
            ],
            "houseNumber":"620"
        },
        {
            "outerWallPath":[
                {"lat":43.6157057,"lon":-116.2003447},
                {"lat":43.615617,"lon":-116.200174},
                {"lat":43.6153434,"lon":-116.2004453},
                {"lat":43.6154283,"lon":-116.2006084},
                {"lat":43.6157057,"lon":-116.2003447}
            ],
            "name":"Eagles Center",
            "houseNumber":"223"
        }
    ],
    "textShapes":[],
    "bbox":{
        "MinLongitude":-116.2014099865603,
        "MinLatitude":43.61521758021085,
        "MaxLongitude":-116.20056438592589,
        "MaxLatitude":43.61595367716303
    }
}`;
editor.addShapesFromJSON(json, ()=>{console.log('done');}, ()=>{});

JSON Data Format

Note: all points are in lat/lon format as above. Streets and crosswalks are added to the street layer, structures and associated text to the structure layer, and everything else goes on the symbol layer.

bbox: most shapes will be cropped to fit this box if specified.

source: optional string added to the shape metadata

streets: array of streets to add

surfaceType: ‘paved’, ‘grave’, or ‘dirt’
laneCount: assumed to be 2 if ommitted
name: optional street name
path: array of points that form the path of the street in lat/lon
hints: object with street hints
- oneway: one way street in the direction the path is drawn
- lanes_forward: number of lanes traveling in the direction the path is drawn
- lanes_backward: number of lanes traveling in the opposite direction
- bikelane_right: add a bike lane on the right (facing the direction the path is drawn)
- bikelane_left: add a bike lane on the left
- bridge: this section of street is a bridge and any intersections will be overpasses
- tunnel: this section of street is a tunnel and any intersections will be overpasses

Note: streets are processed to connect segments with the same name and lane arrangement and add street transitions where appropriate

symbols: array of symbols to be added

symbolName: name of the symbol
point: point to place it
name: text to be applied to the symbol
rotation: rotation to be applied in degrees (counterclockwise, 0 is facing east for vehicles)
data: array of data row objects to attach to the symbol
- name: name of the row item
- value: value of the row item
- locked: makes the row item read-only and hides the delete button for that row
- show: shows the item on the shape callout when the “Show Callout” checkbox is active

linearSymbols: array of linear symbols to be added

symbolName: name of the symbol
path: array of points that form the path use to draw the symbol

connectedLines: array of connected line shapes to be added

path: array of points that form the path use to draw the shape
name: text to be applied to the shape

closedShapes: array of closed shapes to be added

path: array of points that form the path use to draw the shape
name: text to be applied to the shape

crosswalks: array of crosswalks to be added

path: array of points that form the path use to draw the symbol

Note: we attempt to simplify multi-segment crosswalks into one straight segment

structures: array of structures to be added

outerWallPath: array of points
name: text to add to a text box inside the structure
houseNumber: will be added to the text on a second line

textShapes: array of textboxes to be added

path: array containing a single point indicating the center of the text box
name: text content

Note: text size is 5 feet. Overlapping text boxes are shifted somewhat.