This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
thinkgeo_vector_map_javascript_library [2019/02/14 08:01] 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> | ||
- | It's very easy to get started. You can start from getting the samples from GitHub, or 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 ===== | ||
+ | |||
+ | <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> | ||
+ | |||
Line 38: | 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 54: | 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> | ||
Line 96: | Line 117: | ||
</div> | </div> | ||
<div newline></div> | <div newline></div> | ||
- | |||
- | |||
- | ===== Product Guides ===== | ||
- | |||
- | <div dokuteaser> | ||
- | > [[thinkgeo_cloud_quick_start_guide|API Key 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> | ||
- | > [[Map Suite Mobile Data Format Guide|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> | ||
- | > [[Map Suite Style Guide New|Map Icons Font Guide]] | ||
- | A font family set for point of interest or POI. It can be used in VectorMap.js as icons. | ||
- | </div> | ||
- | |||
- | |||
===== API Documentation ===== | ===== API Documentation ===== |