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 08:02]
johnnyz
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 24: Line 23:
  
 <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 30: 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 36: 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 60: 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>​
Line 76: Line 75:
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​raw.githubusercontent.com/​ThinkGeo/​VectorMap-js/​develop/​example/​image/​vector-map-commute.jpg|Commute Map}}]]+[[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 gallery_title>​Commute 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-imagerylabel.jpg|Imagery With labels}}]]+[[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 gallery_title>​Imagery With labels</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​find_nearby.png|Nearby POIs}}]]+[[https://vectormapsamples.thinkgeo.com/​#​FindNearbyPlaces|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​find_nearby.png|Nearby POIs}}]]
 <div gallery_title>​Nearby POIs</​div>​ <div gallery_title>​Nearby POIs</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​render_pois.png|POI Icons}}]]+[[https://vectormapsamples.thinkgeo.com/​#RenderPOIs|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​render_pois.png|POI Icons}}]]
 <div gallery_title>​POI Icons</​div>​ <div gallery_title>​POI Icons</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​precipitation_distribution.png|Precipitation Distribution}}]]+[[https://vectormapsamples.thinkgeo.com/​#​PrecipitationDistribution|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​precipitation_distribution.png|Precipitation Distribution}}]]
 <div gallery_title>​Precipitation Distribution</​div>​ <div gallery_title>​Precipitation Distribution</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​aqirader.png|AQI Rader}}]]+[[https://vectormapsamples.thinkgeo.com/​#AQIRadar|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​aqirader.png|AQI Rader}}]]
 <div gallery_title>​AQI Rader</​div>​ <div gallery_title>​AQI Rader</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​vector-map-gpx.jpg|GPS Tracking}}]]+[[https://vectormapsamples.thinkgeo.com/​#GPX|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​vector-map-gpx.jpg|GPS Tracking}}]]
 <div gallery_title>​GPS Tracking</​div>​ <div gallery_title>​GPS Tracking</​div>​
 </​div>​ </​div>​
  
 <div medialist gallery> <div medialist gallery>
-[[https://samples.thinkgeo.com/​cloud/|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​vector-map-stylelines.jpg| Drawing River}}]]+[[https://vectormapsamples.thinkgeo.com/​#​StylingLines|{{https://​vectormapsamples.thinkgeo.com/​example/​image/​vector-map-stylelines.jpg| Drawing River}}]]
 <div gallery_title>​Drawing River</​div>​ <div gallery_title>​Drawing River</​div>​
 </​div>​ </​div>​
thinkgeo_vector_map_javascript_library.1550131346.txt.gz · Last modified: 2019/02/14 08:02 by johnnyz