Differences

This shows you the differences between two versions of the page.

--- map_suite_vectormap_js_quick_start_guide [2019/02/14 02:29]
johnnyz [Create a map]
+++ map_suite_vectormap_js_quick_start_guide [2019/02/18 10:50] (current)
johnnyz [Download the sample]
@@ Line 8: / Line 8: @@
 ===== 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 35: / Line 35: @@
 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>
+  * Use it in HTML page:
+<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**<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>
+  * **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>
+**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://github.com/ThinkGeo/VectorMap-js|{{https://thinkgeo.gitbooks.io/map-suite-vector-map-js/content/assets/GettingStartedMap.jpg|?nolink&500*300}}]]

User Tools

Site Tools

Differences

Page Tools