Skip to content

Latest commit

 

History

History
122 lines (83 loc) · 4.32 KB

README.md

File metadata and controls

122 lines (83 loc) · 4.32 KB
Raw

MapICGC Logo

License Version X

MapICGC GL JS

🌠 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.


Documentation

Full documentation for this library is available here.

Check out the features through examples.


Getting Started

NPM

  1. Install the library: 
    npm i mapicgc-gl-js
  2. 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>

CDN

  1. Include the JavaScript and CSS files in the <head> of your HTML file.:

    <script src="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.js"></script>
<link href="https://eines.icgc.cat/recursos//mapicgc-gl-js/mapicgc-gl.css" rel="stylesheet" />

  2. 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:


Dependencies

MapICGC GL JS integrates the following libraries:


Developed by:

ICGC Logo

License

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