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.
====== VectorMap.js JavaScript Library ======

<div msgbox>
The ThinkGeo VectorMap.js illustrated "GettingStarted" Guide will guide you through the process of creating a sample application and will help you become familiar with ThinkGeo libraries. It will show you how to create a beautiful map embedded in a HTML page using VectorMap.js. </div>

HTML5, WebGL Vector map JavaScript library with any vector data – EsriJSON, GML, GPX, GeoJSON, KML, Vector Tile (MVT), WFS, WKT or WMS, can be beautifully rendered with CSS similar style file –TODO: Refine the schema link. [[https://wiki.thinkgeo.com/wiki/thinkgeo_stylejson/v2|StyleJSON]] schema. It’s an extension of [[https://openlayers.org/|OpenLayers]], and fits any requirements in browsers and mobile devices.

With ThinkGeo VectorMap.js, you will have full access to [[https://openlayers.org/|OpenLayers]] as well as any plugins or extensions created based on [[https://openlayers.org/|OpenLayers]]. For example, the "[[http://openlayers.org/3rd-party/|3rd party libraries]]" published on https://openlayers.org. With these samples you can easily create any styled map and put it anywhere. Additionally users can build a customized geocoding or routing apps from other providers.

===== Getting Started =====


You can start building via ThinkGeo samples on GitHub or start by creating a new application in your Visual Studio. 

<div dokuteaser>
>[[Map Suite VectorMap_js Quick Start Guide|Quick Start Guide]]
Helps you get you up to speed with integrating the ThinkGeo VectorMap.js JavaScript into your your GIS software.
</div>



===== Product Guides =====

<div dokuteaser>
> [[thinkgeo_cloud_client_keys_guideline|API Keys Creation Guide]]
Guide on how to create your own credentials to easily consume map tiles, geocode and reverse geocode, perform spatial operations and other GIS services from [[thinkgeo cloud|Cloud Service]].
</div>


<div dokuteaser>
> [[thinkgeo_stylejson|StyleJson Guide]]
A describable cartographic styling language in the JSON format, which is similar to working with a Cascading Style Sheet for styling web pages.
</div>


<div dokuteaser>
> [[thinkgeo_iconfonts|Map Icon Fonts Guide]]
A font family set for point of interest or POI.  It can be used in VectorMap.js as icons. 
</div>



===== Code Samples =====


Browse the demo applications to see the power of ThinkGeo VectorMap.js and how it can be utilized to build professional grade mapping applications.

<div #learningmore>[[https://samples.thinkgeo.com/cloud/|Explore and Study "All Learning Sample" now →]]</div>


<div newline></div>
<div items>

<div medialist gallery>
[[https://samples.thinkgeo.com/cloud/|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/LightMap.png|Light Map}}]]
<div gallery_title>Light Map</div>
</div>


<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#RasterMaps|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/DarkMap.png|Dark Map}}]]
<div gallery_title>Dark Map</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#HybridMaps|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/HybridMap.png|Hybrid Map}}]]
<div gallery_title>Hybrid Map</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#RoadCongestionHeatmap|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/vector-map-heatmap.jpg|HeatMap}}]]
<div gallery_title>HeatMap</div>
</div>


<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#AverageRoundTripCommuteTime|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/vector-map-commute.jpg|Commute Map}}]]
<div gallery_title>Commute Map</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#FindNearbyPlaces|{{https://raw.githubusercontent.com/ThinkGeo/VectorMap-js/develop/example/image/vector-map-imagerylabel.jpg|Imagery With labels}}]]
<div gallery_title>Imagery With labels</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#FindNearbyPlaces|{{https://vectormapsamples.thinkgeo.com/example/image/find_nearby.png|Nearby POIs}}]]
<div gallery_title>Nearby POIs</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#RenderPOIs|{{https://vectormapsamples.thinkgeo.com/example/image/render_pois.png|POI Icons}}]]
<div gallery_title>POI Icons</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#PrecipitationDistribution|{{https://vectormapsamples.thinkgeo.com/example/image/precipitation_distribution.png|Precipitation Distribution}}]]
<div gallery_title>Precipitation Distribution</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#AQIRadar|{{https://vectormapsamples.thinkgeo.com/example/image/aqirader.png|AQI Rader}}]]
<div gallery_title>AQI Rader</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#GPX|{{https://vectormapsamples.thinkgeo.com/example/image/vector-map-gpx.jpg|GPS Tracking}}]]
<div gallery_title>GPS Tracking</div>
</div>

<div medialist gallery>
[[https://vectormapsamples.thinkgeo.com/#StylingLines|{{https://vectormapsamples.thinkgeo.com/example/image/vector-map-stylelines.jpg| Drawing River}}]]
<div gallery_title>Drawing River</div>
</div>


</div>
<div newline></div>

===== API Documentation =====

  * [[Vector Map JS API Documentation|API Documentation]]<div>The API documentation covers the **ol.thinkgeo** namespace which resides in the VectorMap.js JavaScript library. It contains all of VectorMap.js specific classes such as the map control itself, layers etc.</div>


===== Change Logs =====

  * [[https://github.com/ThinkGeo/VectorMap-js/releases|Release History & Change Logs]]<div>This change log details the new features and bug fixes applied to the product for each major release cycle.</div>
User Tools

Site Tools

Page Tools
