JSPM

  • Created
  • Published
  • Downloads 313
  • Score
    100M100P100Q108760F

mapicgc-gl-js

Package Exports

  • mapicgc-gl-js

Readme


Version 0.0.26

What and why?

The MapICGC GL JS library builds upon the MapLibre GL JS framework, 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.

Why did we develop a new library? 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. While the SDK is opinionated, being closely tied to MapICGC Cloud data, its MapLibre core ensures 100% compatibility with other data sources..

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.

📣 Note: If you only need the API Client library for headless usage without map display, consider exploring the MapICGC Client JS library for both browser and NodeJS.

Install

npm install --save @mapicgc-gl-js

API documentation

In addition to the details and examples provided in this readme, check out:

First steps

  1. Import the library:
  • NPM

    npm i mapicgc-gl-js
  • CDN

    <script src="https://betaserver.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.js"></script>
    <link href="https://betaserver.icgc.cat/cdn/mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />
  1. In the document body script, declare the map as follows:

     <div id="map"></div>
     <script>
       import { Map } from 'mapicgc-gl-js'; 
    
       const map = Map({
         container: 'map',
         style: "Style.Topografic", // style from mapicgc library
         center: [2.1464, 41.306], // starting position [lng, lat]
         zoom: 7.4, //starting zoom 
       });
     </script>

    See the Pen example-map-001 by unitatgeostart (@unitatgeostart) on CodePen.

Documentation

Full documentation for this library is available here.

Check out the features through examples.

License

MAPICGC GL JS is licensed under the 3-Clause BSD license.