map_suite_vectormap_js_quick_start_guide
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
map_suite_vectormap_js_quick_start_guide [2019/02/14 03:01] johnnyz [How to use] |
map_suite_vectormap_js_quick_start_guide [2019/02/18 10:50] (current) johnnyz [Download the sample] |
||
|---|---|---|---|
| Line 8: | Line 8: | ||
| ===== Download the sample ===== | ===== Download the sample ===== | ||
| - | [[https://github.com/ThinkGeo/VectorMap-js/blob/develop/example/Hello%20World.html|Sample Code From GitHub]] | + | [[https://github.com/ThinkGeo/VectorMap-js/blob/develop/Hello%20World.html|Sample Code From GitHub]] |
| Line 53: | Line 53: | ||
| </code> | </code> | ||
| - | Development Version | ||
| - | <code JavaScript> | + | * Use it in HTML page: |
| - | npm i vectormap-js-dev | + | |
| - | </code> | + | |
| - | + | ||
| - | + | ||
| - | * Install the package: | + | |
| <code JavaScript> | <code JavaScript> | ||
| Line 119: | Line 113: | ||
| **NOTE:** | **NOTE:** | ||
| - | * **ThinkGeo Cloud Service key** | + | * **ThinkGeo Cloud Service key**<div>Access to ThinkGeo Cloud services, including Vector Tile data, requires an `API Key` that connects API requests to your account, Please check [[thinkgeo_cloud_quick_start_guide|here]] on how to create your own `ThinkGeo Cloud Service key` **FOR FREE**.</div> |
| - | Access to ThinkGeo Cloud services, including Vector Tile data, requires an `API Key` that connects API requests to your account, Please check [here](thinkgeo_cloud_quick_start_guide) on how to create your own `ThinkGeo Cloud Service key` **FOR FREE**. | + | |
| - | * **World Streets Styles** | + | * **World Streets Styles**<div>`StyleJSON` is a syntax of map styling language, similar to CSS. It's define the styles of your vector data. `Map Suite World Streets Styles` is professionally designed map styles from ThinkGeo experts, you can use it in your application without any changes, if you are consuming the Vector Tile data from ThinkGeo Cloud Service.</div> |
| - | `StyleJSON` is a syntax of map styling language, similar to CSS. It's define the styles of your vector data. `Map Suite World Streets Styles` is professionally designed map styles from ThinkGeo experts, you can use it in your application without any changes, if you are consuming the Vector Tile data from ThinkGeo Cloud Service. | + | |
| - | **Step 5 (Option).** If `Map Suite World Streets Styles` is referenced in your demo, please load __[ThinkGeo Map Icons](https://github.com/ThinkGeo/VectorMap-icons)__ as an requirement, as all icons are drawn with. | + | **Step 5 (Option).** If `Map Suite World Streets Styles` is referenced in your demo, please load [[https://github.com/ThinkGeo/VectorMap-icons|ThinkGeo Map Icons]] as an requirement, as all icons are drawn with. |
| - | ``` | + | <code JavaScript> |
| <script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"></script> | <script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"></script> | ||
| <script> | <script> | ||
| Line 138: | Line 130: | ||
| }); | }); | ||
| </script> | </script> | ||
| - | ``` | + | </code> |
| After all the above steps completed, your HTML page should be: | After all the above steps completed, your HTML page should be: | ||
| - | ```html | + | <code html> |
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html> | <html> | ||
| Line 184: | Line 176: | ||
| </body> | </body> | ||
| </html> | </html> | ||
| - | ``` | + | </code> |
| **Step 6**. Run "index.html" page and a beautiful map is there. | **Step 6**. Run "index.html" page and a beautiful map is there. | ||
| - | |||
| - |  | ||
| + | [[https://github.com/ThinkGeo/VectorMap-js|{{https://thinkgeo.gitbooks.io/map-suite-vector-map-js/content/assets/GettingStartedMap.jpg|?nolink&500*300}}]] | ||
map_suite_vectormap_js_quick_start_guide.1550113304.txt.gz · Last modified: 2019/02/14 03:01 by johnnyz