Differences

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

--- map_suite_vectormap_js_quick_start_guide [2019/02/14 02:40]
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 =====
-[[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>
-Development Version
-<code JavaScript>
+  * Use it in HTML page:
-npm i vectormap-js-dev
-</code>
-  * Install the package:
 <code JavaScript>
@@ Line 116: / Line 110: @@
 </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