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 06:58]
johnnyz [Release History & Change Logs]
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>​ 
  
  
-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+You can start building via ThinkGeo ​samples ​on GitHub or start by creating a new application in your Visual Studio. ​
  
 <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>​
Line 40: Line 41:
  
  
-===== API Documentation ​=====+===== Code Samples ​=====
  
-  * [[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>​ 
  
 +Browse the demo applications to see the power of ThinkGeo VectorMap.js and how it can be utilized to build professional grade mapping applications.
  
-===== Release History & Change Logs =====+<div #​learningmore>​[[https://​samples.thinkgeo.com/​cloud/​|Explore and Study "All Learning Sample"​ now →]]</​div>​
  
-  * [[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>​ 
  
 +<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>​
  
-===some notes:===+<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>​
  
  
-1. Move https://​thinkgeo.gitbooks.io/map-suite-vector-map-js/contentto this page. It is linked from maps.thinkgeo.com. need to update that link once done. +<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>
  
-2. It's open sourced here: https://github.com/​ThinkGeo/​VectorMap-js ​+<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>​
  
-3we provide both the dev and production version on ThinkGeo CDN and NPM+<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>​
  
- ​• Dev version for example: ​https://cdn.thinkgeo.com/​vectormap-js/1.0.1/mapsuite-vectormap-dev.js +<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>​
  
-• Production version for example: ​https://cdn.thinkgeo.com/​vectormap-js/1.0.1/mapsuite-vectormap.js  ​+<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>​
  
-• It’s added to autobuildWe pull the changes from GitHub, build the new package and update CDN and NPM daily, if there’s any changes+<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>​
  
-4. We also published the css file: https://cdn.thinkgeo.com/​vectormap-js/1.0.0/mapsuite-vectormap.css +<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>​
  
-• That’s ​the styles for the map resources, ​such as pan zoom bar, overview, marker, popup, etc.  ​+<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 itselflayers ​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>​
  
-5. more? 
thinkgeo_vector_map_javascript_library.1550127498.txt.gz · Last modified: 2019/02/14 06:58 by johnnyz