Import map with GEOJSON format.

Import an image to be background for the map.

Scale factor : image demission factor for scaling up and scaling down, you can change the image scale by clicking on + or - buttons.

Position : changing the position of the image by clicking on Up or Down or Left or Right.

Opacity : changing map's transparency by clicking on + or - buttons.

Deleted Shape : restoring deleted map shapes by clicking on Undo button.

Creating GEOJSON format from the shapes.

Exporting and saving GEOJSON file into local machine.

It is highly recommended adding a name for the shape, the name will be used if there is a chart related to the shape (e.g: country name).

The shape fill color. The color value is hexadecimal (e.g: #000000).

Specifies a numerical value between 0.0 and 1.0 to determine the opacity of the fill's color.

The shape border color. The color value is hexadecimal (e.g: #000000).

Specifies a numerical value between 0.0 and 1.0 to determine the opacity of the stroke's color.

Specifies the width of the shape in pixels.

The zIndex compared to other shapes.

It is highly recommended adding a name for the line, the name will be used if there is a chart related to the line (e.g: river name).

The line color. The color value is hexadecimal (e.g: #000000).

Specifies a numerical value between 0.0 and 1.0 to determine the opacity of the line's color.

Specifies the width of the line in pixels.

The zIndex compared to other shapes.

It is highly recommended adding a name for the marker, the name will be used if there is a chart related to the line (e.g: place name).

Specifies the displayed text on the map and it has json format.

• "text": represents the displayed text.
• "color": the text color in hexadecimal (e.g: #C70E20).
• "fontWeight": how thick or thin characters in text should be displayed (e.g: regular or bold).
• "fontSize": text size in pixel (e.g: 11px).

{
    "text": "Sample Text",
    "color": "#C70E20",
    "fontWeight": "regular",
    "fontSize": "11px"
}
                                                                                             

Specifies the marker icon.

• "path": represents the icon shape (e.g: circle . in the below example).
• "scale": how big or small the icon is (e.g: small shape 1 in the below example).
• "fillColor": the fill icon color in hexadecimal(e.g: #ff0000 in the below example).
• "fillOpacity": specifies a numerical value between 0.0 and 1.0 to determine the opacity of the fill's color.
• "strokeColor": the icon border color. The color value is hexadecimal (e.g: #008000 or transparent).
• "strokeWeight": specifies the width of the icon border.
• "strokeOpacity": specifies a numerical value between 0.0 and 1.0 to determine the opacity of the stroke's color.
• "labelOrigin" the position of the icon relative to the label by changing the value of x and y.

{
    "path": "M 1.8375 0 C 4.41 0 4.41 3.675 1.8375 3.675 C -0.735 3.675 -0.735 0 1.8375 0",
    "scale": 1,
    "fillColor": "#ff0000",
    "fillOpacity": 1,
    "strokeColor": "transparent",
    "strokeWeight": 0,
    "strokeOpacity": 0,
    "labelOrigin": {
        "x": 22,
        "y": 2
    }
}
                                                                                            

The zIndex compared to other shapes.