Introduction to Zhupiter CoString

:

"Zhupiter CoString" is a format for describing the objects on the coordinates by a text string.

The Zhupiter CoString currently defined eight string re-presenting formats respectively for Marker, InfoWindow, Polyline, Line, Polygon, Triangle, Rectangle and Circle objects in the two-dimensional space, and provided the object DrawingManager and re-presenting library. By using the JavaScript API of CoString library, the users can easily draw various objects in their web page and encode the drawn objects to produce the corresponding Zhupiter CoString. The users also can easily decode the Zhupiter CoString by using the library API and re-present the string-described objects on the coordinates.

The currently supported two-dimensional space platforms are: Google Maps and HTML5 2D Canvas.

In other words, to produce the various objects on the map/canvas, you can:

  • Use the API to create a DrawingManager in the web page and use the WYSIWYG (What You See Is What You Get) way to instantly draw the various objects; or
  • Use the each object corresponding API in your JavaScript programs to draw the various objects on the map/canvas.
Then, you can use the library's map/canvas getCostring() function call to generate the Zhupiter CoString; or use the setCostring() function call to decode the Zhupiter CoString and to re-present the information on the coordinates.

  • Zhupiter CoString Format Overview
  • Zhupiter CoString format overview

    Above figure shows the overview of Zhupiter CoString format. The figure shows the Zhupiter CoString is composed by one or a plurality of 'setting' or 'object' and the 'setting' or the 'object' has its own sub string-described format. The 'setting' or the 'object' is composed by one 'setting/object code' plus one or more 'attribute'.


The string describing formats of 'map/canvas settings' and 'objects' are introduced as the follows:

From the examples above, we can see that the 'setting/object code' and the 'attributes' within one setting or one object are segmented by the comma characters ("," ).


  • Several 'settings' and 'objects' within one Zhupiter CoString
  • The 'map/canvas settings' and the 'objects' within one Zhupiter CoString are segmented by the ampersand characters ("&"). Its format is as follows:

    Setting/Object 1&Setting/Object 2&...&Setting/Object N

    Map example: o,24.88065,121.065427&z,12&c,2,ef1568,1,61ed04,0.3,24.902922352868245,121.0441019087184,733.1808524466962

    Canvas example: o,109.72328593151204,214.0909703111111&z,12&c,2,ef1568,1,61ed04,0.3,37.72328593151204,152.0909703111111,21

  • Ordering
  • The Zhupiter CoString is decoded to the settings/objects and the attributes from left to right.

    • The overwritting of 'setting'
    • For the 'map/canvas settings' with the same 'code' within one Zhupiter CoString, the setting result of the last right side 'map/canvas setting' (the latter) will overwrite the left ones (other formers).

    • The layers of 'object' in presentation
    • The 'object' sequences within the Zhupiter CoString are corresponding to the object layers when re-presenting. The 'object' in the left side within a CoString is re-presented in the lower layer than those right side ones.


  • Special Attributes Descriptions
    • "Y-axis coordinate" : It means the GPS latitude coordinate in the 'Google Maps' mode; and it means Y-axis coordinate in the HTML5 canvas mode (The same as the HTML5 Y-axis configuration).
    • "X-axis coordinate" : It means the GPS longitude coordinate in the 'Google Maps' mode; and it means X-axis coordinate in the HTML5 canvas mode.
    • "Window opening state" : 1 indicates the InfoWindow is opened; 0 indicates on the contrary.
    • "Title" or "Message" : It is an urlencode string.
    • "Stroke weight" : It is a number value in pixel (px).
    • "Stroke color" or "Fill color" : It is six hexadecimal values without "#" character prefix. Every two hexadecimal values is a set and these three sets are respectively corresponding to the RGB three primary colors.
    • "Stroke opacity" or "Fill opacity" : It is a floating-point value of 0.0 ~ 1.0.

  • Format Summary Table
  • CodeSetting/Object (With API link)Format
    oMap/Canvas Centero,Y-axis coordinate,X-axis coordinate
    zZoomz,Zoom level number
    mMarkerm,Y-axis coordinate,X-axis coordinate [,Number of characters,Title]
    iInfoWindowi,Y-axis coordinate,X-axis coordinate,Reserved,Reserved,Window opening state,Number of characters,Message [,Number of characters,Title]
    ePolylinee,Stroke weight,Stroke color,Stroke opacity,Number of segments,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2,...,Y-axis coordinate N,X-axis coordinate N
    lLinel,Stroke weight,Stroke color,Stroke opacity,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2
    gPolygong,Stroke weight,Stroke color,Stroke opacity,Fill color,Fill opacity,Number of edges,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2,...,Y-axis coordinate N,X-axis coordinate N
    aTrianglea,Stroke weight,Stroke color,Stroke opacity,Fill color,Fill opacity,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2,Y-axis coordinate 3,X-axis coordinate 3
    rRectangler,Stroke weight,Stroke color,Stroke opacity,Fill color,Fill opacity,Y-axis coordinate of southwest corner,X-axis coordinate of southwest corner,Y-axis coordinate of northeast corner,X-axis coordinate of northeast corner
    cCirclec,Y-axis coordinate,X-axis coordinate,Radius
facebook twitter plurk

CoString