Vector World Map

====== Quick Start Guide For VectorMap.js======

The Map Suite VectorMap.js illustrated "GettingStarted" Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite SDKs. It will show you how to create a beautiful map embedded in a HTML page using VectorMap.js.

===== Download the sample ===== [[https://github.com/ThinkGeo/VectorMap-js/blob/develop/Hello%20World.html|Sample Code From GitHub]] ===== HTML Text Editor ===== You can use any text editor that allows you to edit plain text files; such as Notepad on Windows or TextEdit on Mac. An editor which has the helpful indentations, code coloring, autocomplete and text alignment options would be optimal. Here are a few suggested editors: * [[https://www.sublimetext.com/|Sublime Text]] (Mac, Windows, Linux) * [[https://atom.io/|Atom]] (Mac, Windows, Linux) * [[https://code.visualstudio.com/|Visual Studio Code]] (Mac, Windows, Linux) * [[http://www.jetbrains.com/webstorm/|WebStorm]] (Mac, Windows, Linux) ===== Create a map ===== ==== Install ====

>The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript, and have some experience of any front-end development editor, such as Visual Studio Code, Webstorm, Sublime Text or some similars. if you are totally new to frontend development, the easiest way to try out this library which is the "Hello World" example on CodePen. Feel free to open it in another tab and follow along as we go through some features.

==== CDN ==== Load from CDN in your project:

==== NPM ==== * Install the package:


npm i vectormap-js

* Use it in HTML page:

===== How to use ===== Set up a basic map with VectorMap.js in 6 steps (here take [[https://code.visualstudio.com/|Visual Studio Code]] for example). **Step 1.** Create a html page with name "index.html" **Step 2.** In the "****" of your HTML page, import the VectorMap.js and related css file.

**Step 3.** In the "****" of your HTML page, add a div with "id="map"".

**Step 4.** At the bottom of the html page, add a JavaScript section to create an instance of map control with one vector layer created.

**NOTE:** * **ThinkGeo Cloud Service key**

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**.

* **World Streets Styles**

`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 [[https://github.com/ThinkGeo/VectorMap-icons|ThinkGeo Map Icons]] as an requirement, as all icons are drawn with.

After all the above steps completed, your HTML page should be:





Vector World Map

**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}}]]