Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thinkgeo/vectormap-js
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 – StyleSJON schema. It’s an extension of OpenLayers, and fits any requirements in browsers and mobile devices.
https://github.com/thinkgeo/vectormap-js
map openlayers openstreetmap stylejson vector-map vector-map-javascript vector-tile webgl-map
Last synced: about 1 month ago
JSON representation
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 – StyleSJON schema. It’s an extension of OpenLayers, and fits any requirements in browsers and mobile devices.
- Host: GitHub
- URL: https://github.com/thinkgeo/vectormap-js
- Owner: ThinkGeo
- License: apache-2.0
- Created: 2018-06-27T08:59:52.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2021-01-07T03:06:09.000Z (almost 4 years ago)
- Last Synced: 2024-10-29T23:56:44.851Z (about 2 months ago)
- Topics: map, openlayers, openstreetmap, stylejson, vector-map, vector-map-javascript, vector-tile, webgl-map
- Language: JavaScript
- Homepage: https://samples.thinkgeo.com/cloud/
- Size: 57.5 MB
- Stars: 18
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VectorMap.js [](https://travis-ci.org/ThinkGeo/VectorMap-js) 
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 – [StyleJSON](https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/content/) schema. It’s an extension of [OpenLayers](https://openlayers.org/ "OpenLayers"), and fits any requirements in browsers and mobile devices.
With Map Suite VectorMap.js, you will have full access to [OpenLayers](https://openlayers.org/ "OpenLayers"), as well as any plugins or extensions created based on [OpenLayers](https://openlayers.org/ "OpenLayers"), for example, the "[3rd party libraries](http://openlayers.org/3rd-party/)" 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.
## Documentation:
* [Getting Started](https://github.com/ThinkGeo/VectorMap-js/wiki)
* [Community & Support](https://github.com/ThinkGeo/VectorMap-js/issues)
* [API Documentation](https://thinkgeo.gitbooks.io/map-suite-vector-map-js/api-reference.html)
* [Vector StyleJSON Specification](https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/)
* [World Streets Vector Tile Schema](https://thinkgeo.gitbooks.io/map-suite-world-streets-data-schema)
* [Wolrd Street Styles Predefined](https://github.com/ThinkGeo/WorldStreets-Styles/tree/develop)
## Examples - [View It Online](https://vectormapsamples.thinkgeo.com/):
## Install
> The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript, and have some experience of any front-end development editor, such as [Visual Studio Code](https://code.visualstudio.com/), [Webstorm](https://www.jetbrains.com/webstorm/), [Sublime Text](https://www.sublimetext.com/) or some similars. if you are totally new to frontend development, the easiest way to try out this library which is the "[Hello World](https://codepen.io/thinkgeo/pen/BGjbRG)" example on CodePen. Feel free to open it in another tab and follow along as we go through some features.
### CDN
Load from CDN in your project:
```html
```
### NPM
- Install the package:
```
npm i vectormap-js
```
Development Version
```
npm i vectormap-js-dev
```
- Include it to your page:
```html
```
## How to use
Set up a basic map with VectorMap.js in 6 steps (here take [Visual Studio Code](https://code.visualstudio.com/) for example).
__Step 1__. Create a html page with name "index.html "
__Step 2__. In the ``of your HTML page, import the vectormap.js and related css file.
```html
```
__Step 3__. In the `` of your HTML page, add a div with "id=`"map"`".
```html
```
__Step 4__. At the bottom of the html page, add a JavaScript section to create an instance of map control with one vector layer created.
```javascript
var worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/3.0.0/light.json";
var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle,
{
apiKey:'your-ThinkGeo-Cloud-Service-key'
});
let map = new ol.Map({
layers: [worldstreets],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-96.79620, 32.79423]),
zoom: 4,
}),
renderer: 'webgl'
});
```
__NOTE:__
* __ThinkGeo Cloud Service key__
Access to ThinkGeo Cloud services, including Vector Tile data, requires an `API Key` that connects API requests to your account, Please check [here](https://thinkgeo.gitbooks.io/map-suite-vector-map-js/content/sign-up-thinkgeo-account.html) on how to create your own `ThinkGeo Cloud Service key` __FOR FREE__.
* World Streets Styles
`World Streets Style` is a syntax of map styling language, similar to CSS. It's define the styles of your vector data. `Map Suite World Streets Styles` is professionally designed map styles from ThinkGeo experts, you can use it in your application without any changes, if you are consuming the Vector Tile data from ThinkGeo Cloud Service.
__Step 5 (Option)__. If `Map Suite World Streets Styles` is referenced in your demo, please load __[ThinkGeo Map Icons](https://github.com/ThinkGeo/VectorMap-icons)__ as an requirement, as all icons are drawn with. Once the Icon Fonts have been completely downloaded, the `initMapFuntion` will be called to init map.
```
WebFont.load({
custom: {
families: ["vectormap-icons"],
urls: ["https://cdn.thinkgeo.com/vectormap-icons/3.0.0/vectormap-icons.css"]
},
active: initMapFuntion
});
```
After all the above steps completed, your HTML page should be:
```html
Vector World Map
WebFont.load({
custom: {
families: ["vectormap-icons"],
urls: ["https://cdn.thinkgeo.com/vectormap-icons/3.0.0/vectormap-icons.css"]
}
});
var worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/3.0.0/light.json";
var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle,
{
apiKey:'your-ThinkGeo-Cloud-Service-key' // please go to https://cloud.thinkgeo.com to create
});
let map = new ol.Map({
layers: [worldstreets],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-96.79620, 32.79423]),
zoom: 4,
}),
renderer: 'webgl'
});
```
__Step 6__. Run the page and a beautiful map is there.
## ThinkGeo Map Icons
__[ThinkGeo Map Icons](https://github.com/ThinkGeo/VectorMap-icons)__ is a pack of more than 200 beautifully crafted Open Source icons for common mapping.
## Vector Data Supported
Besides loading the traditional KML, GeoJSON, bitmap tiles etc., __`VectorMap.js`__ can work with [Vector Tiles](https://en.wikipedia.org/wiki/Vector_tiles).
[Map Suite Cloud Service](https://Cloud.thinkgeo.com) provides a free vector tile service (*.mvt) based on open data from [OpenStreetMap](https://openstreetmap.org/), [Natural Earth](http://www.naturalearthdata.com/) and some other data providers, with global coverage updated continuously. - sign up for an [API Key](https://cloud.thinkgeo.com) for free.
## Styling
Map Suite vector styling schema - [Vector StyleJSON](https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/content/) is designed for you to specify data sources, layers and how to define and apply styles to layers. Please check the demo from "[Predefined open source styles](https://github.com/ThinkGeo/WorldStreets-Styles)" or check related documentation at https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/content/.
## Browser Support
__VectorMap.js__ is officially supported and tested on the last two versions of these browsers:
* __Mac OS__: Chrome, Firefox, and Safari
* __Windows__: Chrome, Firefox, IE11, and IE Edge
* __iOS__: Safari, Chrome, Firefox
* __Android__: Chrome
__VectorMap.js__ should also run in any brower with HTML5 support.
## License
__VectorMap.js__ is licensed under the [Apache 2.0](https://github.com/ThinkGeo/MapSuiteGisEditor/blob/master/LICENSE).