{"id":15284709,"url":"https://github.com/thinkgeo/vectormap-js","last_synced_at":"2025-08-15T00:41:05.400Z","repository":{"id":57391343,"uuid":"138856179","full_name":"ThinkGeo/VectorMap-js","owner":"ThinkGeo","description":"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. ","archived":false,"fork":false,"pushed_at":"2021-01-07T03:06:09.000Z","size":60277,"stargazers_count":20,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-08-11T22:31:46.449Z","etag":null,"topics":["map","openlayers","openstreetmap","stylejson","vector-map","vector-map-javascript","vector-tile","webgl-map"],"latest_commit_sha":null,"homepage":"https://samples.thinkgeo.com/cloud/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThinkGeo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-27T08:59:52.000Z","updated_at":"2025-07-13T09:41:48.000Z","dependencies_parsed_at":"2022-08-25T18:42:12.935Z","dependency_job_id":null,"html_url":"https://github.com/ThinkGeo/VectorMap-js","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ThinkGeo/VectorMap-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkGeo%2FVectorMap-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkGeo%2FVectorMap-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkGeo%2FVectorMap-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkGeo%2FVectorMap-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThinkGeo","download_url":"https://codeload.github.com/ThinkGeo/VectorMap-js/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkGeo%2FVectorMap-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270505993,"owners_count":24596506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["map","openlayers","openstreetmap","stylejson","vector-map","vector-map-javascript","vector-tile","webgl-map"],"created_at":"2024-09-30T14:59:30.338Z","updated_at":"2025-08-15T00:41:05.337Z","avatar_url":"https://github.com/ThinkGeo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# VectorMap.js [![Build Status](https://travis-ci.org/ThinkGeo/VectorMap-js.svg?branch=develop)](https://travis-ci.org/ThinkGeo/VectorMap-js) \u003ca href=\"https://npmcharts.com/compare/vectormap-js?minimal=true\u0026interval=7\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vectormap-js.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/vectormap-js\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vectormap-js.svg\" alt=\"Version\"\u003e\u003c/a\u003e\nHTML5, 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. \n\nWith 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.\n\n## Documentation:\n\n* [Getting Started](https://github.com/ThinkGeo/VectorMap-js/wiki)\n* [Community \u0026 Support](https://github.com/ThinkGeo/VectorMap-js/issues)\n* [API Documentation](https://thinkgeo.gitbooks.io/map-suite-vector-map-js/api-reference.html)\n* [Vector StyleJSON Specification](https://thinkgeo.gitbooks.io/map-suite-stylejson-specification/)\n* [World Streets Vector Tile Schema](https://thinkgeo.gitbooks.io/map-suite-world-streets-data-schema)\n* [Wolrd Street Styles Predefined](https://github.com/ThinkGeo/WorldStreets-Styles/tree/develop)\n\n## Examples - [View It Online](https://vectormapsamples.thinkgeo.com/):\n\n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#VectorMaps\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/LightMap.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#RasterMaps\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/DarkMap.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#HybridMaps\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/HybridMap.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#RoadCongestionHeatmap\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/vector-map-heatmap.jpg\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e \n\t\n\n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#AverageRoundTripCommuteTime\"\u003e\n   \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/vector-map-commute.jpg\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#ImagerywithLabels\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/vector-map-imagerylabel.jpg\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#FindNearbyPlaces\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/find_nearby.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#RenderPOIs\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/render_pois.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e \n\t\n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#PrecipitationDistribution\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/precipitation_distribution.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#AQIRadar\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/aqirader.png\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#GPX\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/vector-map-gpx.jpg\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e  \n\u003ca href=\"https://vectormapsamples.thinkgeo.com/#StylingLines\"\u003e\n    \u003cimg src=\"https://vectormapsamples.thinkgeo.com/example/image/vector-map-stylelines.jpg\" width=\"210\" height=\"210\" alt=\"\"\u003e\n\u003c/a\u003e \n\t\n \n\t\n\n\n\n## Install\n\n\u003e 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.\n\n### CDN\nLoad from CDN in your project:\n\n```html\n\u003c!-- style sheet for vectormap.js --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.css\"\u003e\u003c/link\u003e\n\t\n\u003c!-- latest minified version of vectormap.js --\u003e\n\u003cscript src=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.js\"\u003e\u003c/script\u003e\n```\n\n### NPM\n\n- Install the package:\n```\nnpm i vectormap-js\n``` \n\nDevelopment Version\n```\nnpm i vectormap-js-dev\n``` \n- Include it to your page:\n```html\n\u003c!-- style sheet for vectormap.js --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/dist/vectormap.css\"\u003e\u003c/link\u003e\n\t\n\u003c!-- latest minified version of vectormap.js --\u003e\n\u003cscript src=\"path/to/dist/vectormap.js\"\u003e\u003c/script\u003e\n```\n \n## How to use\nSet up a basic map with VectorMap.js in 6 steps (here take [Visual Studio Code](https://code.visualstudio.com/) for example).\n\n__Step 1__. Create a html page with name \"index.html \"\n\n__Step 2__. In the `\u003chead\u003e`of your HTML page, import the vectormap.js and related css file.\n\n```html\n\u003c!-- style sheet for vectormap.js --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.css\"\u003e\u003c/link\u003e\n\t\n\u003c!-- latest minified version of vectormap.js --\u003e\n\u003cscript src=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.js\"\u003e\u003c/script\u003e\n```\n \n__Step 3__. In the `\u003cbody\u003e` of your HTML page, add a div with \"id=`\"map\"`\".\n```html\n\u003cdiv id=\"map\" style=\"width:800px;height:600px;\"\u003e\u003c/div\u003e\n```\n\n__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. \n```javascript\n\u003cscript\u003e\n    var worldstreetsStyle = \"https://cdn.thinkgeo.com/worldstreets-styles/3.0.0/light.json\";    \n    var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, \n        {\n            apiKey:'your-ThinkGeo-Cloud-Service-key'\n        });\n    let map =  new ol.Map({                         \n        layers: [worldstreets],\n        target: 'map',\n        view: new ol.View({\n            center: ol.proj.fromLonLat([-96.79620, 32.79423]),\n            zoom: 4,\n        }),\n\trenderer: 'webgl'\n    });\n\u003c/script\u003e\n```\n \n__NOTE:__\n \n * __ThinkGeo Cloud Service key__\n \n 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__.\n \n * World Streets Styles\n \n`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.\n\n__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.\n\n\n```\n\u003cscript src=\"https://cdn.thinkgeo.com/vectormap-icons/3.0.0/webfontloader.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    WebFont.load({\n        custom: {\n            families: [\"vectormap-icons\"],\n            urls: [\"https://cdn.thinkgeo.com/vectormap-icons/3.0.0/vectormap-icons.css\"]\n        },\n        active: initMapFuntion\n    });\n\u003c/script\u003e\n```\n\nAfter all the above steps completed, your HTML page should be:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eVector World Map\u003c/title\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n        \u003c!-- style sheet for vectormap.js --\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.css\"\u003e\u003c/link\u003e\n        \n        \u003c!-- latest minified version of vectormap.js --\u003e\n       \u003cscript src=\"https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.js\"\u003e\u003c/script\u003e\n\n        \u003c!-- option: Map Suite World Streets Styles --\u003e\n        \u003cscript src=\"https://cdn.thinkgeo.com/vectormap-icons/3.0.0/webfontloader.js\"\u003e\u003c/script\u003e\n        \u003cscript\u003e\n            WebFont.load({\n                custom: {\n                    families: [\"vectormap-icons\"],\n                    urls: [\"https://cdn.thinkgeo.com/vectormap-icons/3.0.0/vectormap-icons.css\"]\n                }\n            });\n        \u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"map\" style=\"width:800px;height:600px;\"\u003e\u003c/div\u003e\n        \u003cscript\u003e\n            var worldstreetsStyle = \"https://cdn.thinkgeo.com/worldstreets-styles/3.0.0/light.json\";    \n            var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, \n            {\n                apiKey:'your-ThinkGeo-Cloud-Service-key'      // please go to https://cloud.thinkgeo.com to create\n            });\n            let map =  new ol.Map({                        \n                layers: [worldstreets],\n                target: 'map',\n                view: new ol.View({\n                    center: ol.proj.fromLonLat([-96.79620, 32.79423]),\n                    zoom: 4,\n                }),\n\t\trenderer: 'webgl'\n            });\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n__Step 6__. Run the page and a beautiful map is there.\n\n## ThinkGeo Map Icons\n\n__[ThinkGeo Map Icons](https://github.com/ThinkGeo/VectorMap-icons)__ is a pack of more than 200 beautifully crafted Open Source icons for common mapping. \n\n## Vector Data Supported\n\nBesides loading the traditional KML, GeoJSON, bitmap tiles etc., __`VectorMap.js`__ can work with [Vector Tiles](https://en.wikipedia.org/wiki/Vector_tiles). \n\n[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.\n\n## Styling\n\nMap 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/. \n\n\n## Browser Support\n__VectorMap.js__ is officially supported and tested on the last two versions of these browsers:\n\n* __Mac OS__: Chrome, Firefox, and Safari\n* __Windows__: Chrome, Firefox, IE11, and IE Edge\n* __iOS__: Safari, Chrome, Firefox\n* __Android__: Chrome\n\n__VectorMap.js__ should also run in any brower with HTML5 support.\n\n## License\n__VectorMap.js__ is licensed under the [Apache 2.0](https://github.com/ThinkGeo/MapSuiteGisEditor/blob/master/LICENSE). \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkgeo%2Fvectormap-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthinkgeo%2Fvectormap-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkgeo%2Fvectormap-js/lists"}