{"id":14845520,"url":"https://github.com/mkeller3/mapbox-gl-ogc-feature-collection","last_synced_at":"2026-04-06T07:35:26.205Z","repository":{"id":59272403,"uuid":"535478953","full_name":"mkeller3/mapbox-gl-ogc-feature-collection","owner":"mkeller3","description":"A small package for requesting geojson from an OGC Feature API endpoint to serve tiles in MapBox/MapLibre.","archived":false,"fork":false,"pushed_at":"2022-09-13T11:18:16.000Z","size":6315,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-28T19:31:11.918Z","etag":null,"topics":["mapbox","mapbox-gl-js","maplibre-gl-js","ogc","ogc-features","ogc-services"],"latest_commit_sha":null,"homepage":"https://mkeller3.github.io/mapbox-gl-ogc-feature-collection/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mkeller3.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":"2022-09-12T01:57:23.000Z","updated_at":"2024-10-31T15:47:24.000Z","dependencies_parsed_at":"2022-09-22T00:00:14.584Z","dependency_job_id":null,"html_url":"https://github.com/mkeller3/mapbox-gl-ogc-feature-collection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mkeller3/mapbox-gl-ogc-feature-collection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller3%2Fmapbox-gl-ogc-feature-collection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller3%2Fmapbox-gl-ogc-feature-collection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller3%2Fmapbox-gl-ogc-feature-collection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller3%2Fmapbox-gl-ogc-feature-collection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkeller3","download_url":"https://codeload.github.com/mkeller3/mapbox-gl-ogc-feature-collection/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller3%2Fmapbox-gl-ogc-feature-collection/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31463163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"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":["mapbox","mapbox-gl-js","maplibre-gl-js","ogc","ogc-features","ogc-services"],"created_at":"2024-09-19T13:00:33.308Z","updated_at":"2026-04-06T07:35:26.181Z","avatar_url":"https://github.com/mkeller3.png","language":"JavaScript","funding_links":[],"categories":["Layer Types Plugins"],"sub_categories":["JavaScript"],"readme":"\n# mapbox-gl-ogc-feature-collection\n\nA small package for requesting geojson from an OGC Feature API endpoint to serve tiles in MapBox/MapLibre.\n\nBuilt with inspiration from [mapbox-gl-arcgis-featureserver](https://github.com/rowanwins/mapbox-gl-arcgis-featureserver).\n\n### Demo\n\nCheck out the demo at [this link](https://mkeller3.github.io/mapbox-gl-ogc-feature-collection/). This demo pulls\nin large lakes OGC Feature API collection at [https://demo.pygeoapi.io/stable](https://demo.pygeoapi.io/stable).\nIn the demo, we are using the collection `lakes`.\n\n![demo image](./images/demo.png)\n\n### Basic Usage\n````javascript\nimport OGCFeatureCollection from 'mapbox-gl-ogc-feature-collection'\n\nmap.on('load', () =\u003e {\n    const sourceId = 'collection-src'\n\n    new OGCFeatureCollection(sourceId, map, {\n        url: 'https://demo.pygeoapi.io/stable',\n        collectionId: 'lakes',\n        limit: 10000\n    })\n\n    map.addLayer({\n        'id': 'lyr',\n        'source': sourceId,\n        'type': 'fill',\n        'paint': {\n            'fill-color': '#B42222',\n            'fill-opacity': 0.7\n        }\n    })\n})\n````\n\n## API\nThis library exposes a single `OGCFeatureCollection` class \n\n### Constructor Options\n| Option | Type | Description |\n--- | --- | ---\n| `sourceId` | `String` **required** | A string  |\n| `map` | `Object` **required** | A `mapbox-gl` or `maplibre-gl` `map` instance. |\n| `collectionOptions` | `Object` **required** | A range of options which will be used to manage the collection. See below. |\n| `geojsonSourceOptions` | `Object` | A object which will be passed to the creation of the mapbox-gl [geojson source](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson) |\n\n\n#### Collection Options\n| Option | Type | Default | Description |\n--- | --- | --- | ---\n| `url` | `String` **required** | | The base url of the OGC Feature API. `https://demo.pygeoapi.io/covid-19`.|\n| `collectionId` | `String` **required** | | The name of the collection. `cases_country`.|\n| `limit` | `Number` | `5000` | Number of features to return in each tile. |\n| `properties` | `String` | | List of properties to return for each feature. |\n| `datetime` | `Date` | | Date or date range to filter items. |\n| `useStaticZoomLevel` | `Boolean` | `false` | Whether to only get tiles at a single zoom level. If true then set `minZoom` to the desired level. |\n| `minZoom` | `Number` | if `useStaticZoom` is `true` then `7`, otherwise `2` | The zoom level to start requesting tiles. |\n\n\n### Methods\n| Method  | Description |\n------- | -----------\n| destroySource() | **Important** The `destroySource()` method removes the source from the map and associated event listeners for retrieving data which request data as the map is panned, so it's important to call this method if removing the layer from the map completely. |\n| disableRequests() | **Important**  The `disableRequests()` method temporarily disables the associated event listeners for retrieving data which request data as the map is panned, you may want to call this if you toggle your layer off. |\n| enableRequests() | **Important**  The `enableRequests()` method enables the associated event listeners for retrieving data which request data as the map is panned. By default this is called by the constructor. |\n\n#### Example of disabling and enabling requests\nIt would be nice if disabling/enabling of requests happened automatically but unfortunately I haven't found a way to make that happen because of how `sources` and `layers` are managed in mapbox-gl.\n\n````javascript\nimport OGCFeatureCollection from 'mapbox-gl-ogc-feature-collection'\n\nmap.on('load', () =\u003e {\n    const sourceId = 'collection-src'\n    const lyrId = 'lyr'\n\n    const service = new OGCFeatureCollection(sourceId, map, {\n        url: 'https://demo.pygeoapi.io/stable',\n        collectionId: 'lakes',\n        limit: 10000\n    })\n\n    map.addLayer({\n        'id': 'lyr',\n        'source': sourceId,\n        'type': 'fill',\n        'paint': {\n            'fill-color': '#B42222',\n            'fill-opacity': 0.7\n        }\n    })\n})\n    \n    \nfunction hideFsLayer () {\n    map.setLayoutProperty(lyrId, 'visibility', 'none')\n    service.disableRequests()\n}\nfunction showFsLayer () {\n    map.setLayoutProperty(lyrId, 'visibility', 'visible')\n    service.enableRequests()\n}\nfunction removeFsCompletelyFromMap () {\n    map.removeLayer(lyrId)\n    service.destroySource()\n}\n````","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller3%2Fmapbox-gl-ogc-feature-collection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkeller3%2Fmapbox-gl-ogc-feature-collection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller3%2Fmapbox-gl-ogc-feature-collection/lists"}