🌠 Based on MapLibre GL JS version: 4.5.0
The MapICGC GL JS library builds upon the open-source library MapLibre GL JS, exposing its existing capabilities while introducing new features specific to the MapICGC ecosystem. This library is tailored to seamlessly integrate with the MapICGC Cloud service, offering a comprehensive set of data to enhance web mapping experiences, including vector tiles, satellite raster tiles, DEM with Terrain RGB, and customizable styles with an editor.
Our goal is to simplify the development process for MapICGC developers! With MapICGC GL JS, you won't need to load external plugins for basic functionalities, deal with complex data source URLs, or search for syntax to enable 3D terrain every time you embark on a project. All these features are either built-in, loaded dynamically when necessary, or accessible through straightforward functions.
Moreover, MapICGC GL JS provides well-documented and user-friendly wrapper functions for MapICGC Cloud API services, including geocoding, static maps, geolocation, and a coordinate reference system search engine for transforming coordinates between different CRSs.
Full documentation for this library is available here.
Check out the features through examples.
- Install the library:
npm i mapicgc-gl-js
- Import the library:
<script> import { Map, Config } from "mapicgc-gl-js"; //import * as mapicgcgl from "mapicgc-gl-js"; async function initMap() { const data = await Config.getConfigICGC(); //load config const map = new Map({ container: "map", style: data.Styles.LIGHT, center: [1.808, 41.618], zoom: 10, maxZoom: 19, hash: true, pitch: 0, }); } initMap(); </script>
-
Include the JavaScript and CSS files in the
<head>of your HTML file.:<script src="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js"></script> <link href="https://tilemaps.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
-
Include the following code in the
<body>of your HTML file.:<div id="map"></div> <script> async function initMap() { const data = await mapicgcgl.Config.getConfigICGC(); const map = new mapicgcgl.Map({ container: "map", style: data.Styles.TOPO, // <-- add style basemap here center: [2.1464, 41.306], zoom: 7.4, maxZoom: 19, hash: true, pitch: 0, }); </script>
Result:
MapICGC GL JS integrates the following libraries:
MAPICGC GL JS is licensed under the 3-Clause BSD license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent