ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Quick Start Guide For VectorMap.js======


<div msgbox>
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.
</div>

===== Download the sample =====

[[https://github.com/ThinkGeo/VectorMap-js/blob/develop/example/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 ====

<div>

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

</div>

==== CDN ====

Load from CDN in your project:

<code JavaScript>

<!-- style sheet for vectormap.js -->
<link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.css"></link>
<!-- latest minified version of vectormap.js -->
<script src="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.js"></script>

</code>

==== NPM ====

  * Install the package:

<code JavaScript>
npm i vectormap-js
</code>

Development Version

<code JavaScript>
npm i vectormap-js-dev
</code>


  * Install the package:

<code JavaScript>
<!-- style sheet for vectormap.js -->
<link rel="stylesheet" href="path/to/dist/vectormap.css"></link>
<!-- latest minified version of vectormap.js -->
<script src="path/to/dist/vectormap.js"></script>
</code>


===== 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 "**<head>**" of  your HTML page, import the VectorMap.js and related css file.

<code javascript>

<!-- style sheet for vectormap.js -->
<link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.css"></link>
<!-- latest minified version of vectormap.js -->
<script src="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.js"></script>

</code>

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

<code javascript>

<div id="map" style="width:800px;height:600px;"></div>

</code>

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

<code javascript>

<script>
var worldstreetsStyle = "http://cdn.thinkgeo.com/worldstreets-styles/1.0.0/light.json";
var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle,
{
    apiKey:'your-ThinkGeo-Cloud-Service-key'
});
let map = new ol.Map({
    layers: [worldstreets],
    target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([-96.79620, 32.79423]),
    zoom: 4,
}),
});
</script>

</code>

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


<code JavaScript>
<script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"></script>
<script>
WebFont.load({
custom: {
families: ["vectormap-icons"],
urls: ["https://cdn.thinkgeo.com/vectormap-icons/1.0.0/vectormap-icons.css"]
}
});
</script>
</code>

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

<code html>
<!DOCTYPE html>
<html>
<head>
<title>Vector World Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style sheet for vectormap.js -->
<link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.css"></link>
<!-- latest minified version of vectormap.js -->
<script src="https://cdn.thinkgeo.com/vectormap-js/2.0.0/vectormap.js"></script>

<!-- option: Map Suite World Streets Styles -->
<script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"></script>
<script>
WebFont.load({
custom: {
families: ["vectormap-icons"],
urls: ["https://cdn.thinkgeo.com/vectormap-icons/1.0.0/vectormap-icons.css"]
}
});
</script>
</head>
<body>
<div id="map" style="width:800px;height:600px;"></div>
<script>
var worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/1.0.0/light.json";
var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle,
{
apiKey:'your-ThinkGeo-Cloud-Service-key' // please go to https://cloud.thinkgeo.com to create
});
let map = new ol.Map({
layers: [worldstreets],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-96.79620, 32.79423]),
zoom: 4,
}),
});
</script>
</body>
</html>
</code>

**Step 6**. Run "index.html" page and a beautiful map is there.



[[https://thinkgeo.gitbooks.io/map-suite-vector-map-js/content/assets/GettingStartedMap.jpg|Getting Started Map]]
User Tools

Site Tools

Page Tools
