ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
ThinkGeo Cloud
ThinkGeo UI Controls
ThinkGeo Open Source
Help and Support
External Resources
This is an old revision of the document!
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.
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:
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.
Load from CDN in your project:
<!-- 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>
npm i vectormap-js
Development Version
npm i vectormap-js-dev
<!-- 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>
Set up a basic map with VectorMap.js in 6 steps (here take 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.
<!-- 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>
Step 3. In the “<body>” of your HTML page, add a div with “id=“map””.
<div id="map" style="width:800px;height:600px;"></div>
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.
<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>