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.
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'.
string describing formats of 'map/canvas settings' and 'objects'
are introduced as the follows:- CoString describing format for map/canvas settings
- Map/Canvas Center
- Zoom
- CoString describing format for objects
- Marker
- InfoWindow
- Polyline
- Line
- Polygon
- Triangle
- Rectangle
- Circle
Format:
o,Y-axis coordinate,X-axis coordinate
Map example: o,24.88065,121.065427
Canvas example: o,109.72328593151204,214.0909703111111
Format:
z,Zoom level number
Example: z,16
Format:
m,Y-axis coordinate,X-axis coordinate [,Number of characters,Title]
Where:
Attributes within the brackets are optional.
'Title' attribute is an urlencode string if present.
Map example: m,24.88065,121.065427
Canvas example: m,109.72328593151204,214.0909703111111
Format:
i,Y-axis coordinate,X-axis coordinate,Reserved,Reserved,Window opening state,Number of characters,Message [,Number of characters,Title]
Where:
Attributes within the brackets are optional.
'Reserved' = 0 .
'Window opening stat' = 1 indicates the InfoWindow is opened; otherwise 'Window opening stat' = 0.
'Message' attribute is an urlencode string.
'Title' attribute is an urlencode string if present.
Map example: i,24.8768105,121.05556490000004,0,0,1,16,HuKou%20Old%20Street
Canvas example: i,121.72328593151204,185.0909703111111,0,0,1,16,HuKou%20Old%20Street
Format:
e,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
'Line' is a specialized Polyine object and is a line segment with only two end points. The Line will be converted to be the Polyine in the Zhupiter CoString if the Line pulled with more than two endpoints in the 'Google Maps' mode.
Format:
l,Stroke weight,Stroke color,Stroke opacity,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2
Map example: l,8,ef1568,0.8,24.87673271183448,121.05517387390137,24.90289078044739,121.04405879974365
Canvas example: l,8,ef1568,0.8,121.72328593151204,184.0909703111111,37.72328593151204,151.0909703111111
Format:
g,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
'Isosceles Triangle' is a specialized Polygon object. And of course, you can use Polygon object to draw a triangle. The Triangle will be converted to be the Polygon in the Zhupiter CoString if the Triangle pulled with more than three endpoints or become to a non-isosceles triangle in the 'Google Maps' mode.
Format:
a,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
Canvas example: a,2,ef1568,0.8,61ed04,0.3,79.72328593151204,379.0909703111111,127.72328593151204,345.0909703111111,127.72328593151204,413.0909703111111
Format:
r,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
Map example: r,2,ef1568,1,61ed04,0.3,24.88227086962545,121.05922937393188,24.883789196412685,121.06319904327393
Canvas example: r,2,ef1568,1,61ed04,0.3,67.72328593151204,70.0909703111111,28.723285931512038,162.0909703111111
Format:
c,Y-axis coordinate,X-axis coordinate,Radius
Map example: c,2,ef1568,1,61ed04,0.3,24.902922352868245,121.0441019087184,733.1808524466962
Canvas example: c,2,ef1568,1,61ed04,0.3,37.72328593151204,152.0909703111111,21
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
- Ordering
- The overwritting of 'setting'
- The layers of 'object' in presentation
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
The Zhupiter CoString is decoded to the settings/objects and the attributes from left to right.
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 '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
Code | Setting/Object (With API link) | Format |
---|---|---|
o | Map/Canvas Center | o,Y-axis coordinate,X-axis coordinate |
z | Zoom | z,Zoom level number |
m | Marker | m,Y-axis coordinate,X-axis coordinate [,Number of characters,Title] |
i | InfoWindow | i,Y-axis coordinate,X-axis coordinate,Reserved,Reserved,Window opening state,Number of characters,Message [,Number of characters,Title] |
e | Polyline | e,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 |
l | Line | l,Stroke weight,Stroke color,Stroke opacity,Y-axis coordinate 1,X-axis coordinate 1,Y-axis coordinate 2,X-axis coordinate 2 |
g | Polygon | g,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 |
a | Triangle | a,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 |
r | Rectangle | r,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 |
c | Circle | c,Y-axis coordinate,X-axis coordinate,Radius |
CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K