User Tools

Site Tools


thinkgeo_vector_map_javascript_library

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
thinkgeo_vector_map_javascript_library [2019/02/14 07:43]
johnnyz [Code Samples]
thinkgeo_vector_map_javascript_library [2019/04/29 15:44] (current)
sacha [Getting Started]
Line 1: Line 1:
-====== ​Vector Map JavaScript Library ======+====== ​VectorMap.js ​JavaScript Library ======
  
 +<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 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 – [[https://​thinkgeo.gitbooks.io/​map-suite-stylejson-specification/​content/​|StyleJSON]] schema. It’s an extension of [[https://​openlayers.org/​|OpenLayers]],​ and fits any requirements in browsers and mobile devices. 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 – [[https://​thinkgeo.gitbooks.io/​map-suite-stylejson-specification/​content/​|StyleJSON]] schema. It’s an extension of [[https://​openlayers.org/​|OpenLayers]],​ and fits any requirements in browsers and mobile devices.
  
-With Map Suite 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 the help of them, you can easily create any styled map and put it anywhere, and build a customized geocoding or routings ​from other providers.+With Map Suite 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 ===== ===== Getting Started =====
  
-<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 libraries. It will show you how to create a beautiful map embedded in a HTML page using VectorMap.js. </​div>​ 
  
- +You can start building via ThinkGeo ​samples ​on GitHub or start by creating a new application in your Visual Studio. ​
-It's very easy to get started. ​You can start from getting the samples ​from GitHubor start from creating a new application in your Visual Studio. Please have a quick look at the following short videos+
  
 <div dokuteaser>​ <div dokuteaser>​
Line 18: Line 17:
 Helps you get you up to speed with integrating the Map Suite VectorMap.js JavaScript into your your GIS software. Helps you get you up to speed with integrating the Map Suite VectorMap.js JavaScript into your your GIS software.
 </​div>​ </​div>​
 +
 +
  
 ===== Product Guides ===== ===== Product Guides =====
  
 <div dokuteaser>​ <div dokuteaser>​
-> [[thinkgeo_cloud_quick_start_guide|API Key Creation Guide]]+> [[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]]. 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>​
Line 28: Line 29:
  
 <div dokuteaser>​ <div dokuteaser>​
-> [[Map Suite Mobile Data Format Guide|StyleJson Guide]]+> [[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. 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>​
Line 34: Line 35:
  
 <div dokuteaser>​ <div dokuteaser>​
-> [[Map Suite Style Guide New|Map Icons Font Guide]]+> [[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. ​ A font family set for point of interest or POI.  It can be used in VectorMap.js as icons. ​
 </​div>​ </​div>​
  
- 
- 
-===== API Documentation ===== 
- 
-  * [[Vector Map JS API Documentation|API Documentation]]<​div>​The API documentation covers the **ol.mapsuite** 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>​ 
  
  
Line 68: Line 59:
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​raw.githubusercontent.com/​ThinkGeo/​VectorMap-js/​develop/​example/​image/​DarkMap.png|Dark Map}}]]+[[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 gallery_title>​Dark Map</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​raw.githubusercontent.com/​ThinkGeo/​VectorMap-js/​develop/​example/​image/​HybridMap.png|Hybrid Map}}]]+[[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 gallery_title>​Hybrid Map</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​raw.githubusercontent.com/​ThinkGeo/​VectorMap-js/​develop/​example/​image/​vector-map-heatmap.jpg|HeatMap}}]]+[[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 gallery_title>​HeatMap</​div>​
 </​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>​
 +
 +<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.mapsuite** 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>​
  
thinkgeo_vector_map_javascript_library.1550130233.txt.gz · Last modified: 2019/02/14 07:43 by johnnyz