@govflanders/vl-ui-layer-map
Advanced tools
Use the Layer Map to add markers, pins, WMS (Web Map Service protocol), WMTS (Web Map Tile Service protocol) or other map layers to an OpenLayers map.
Other options to add to the OpenLayers map include borders of municipalities, provinces and the region of Flanders.
Install:
npm i @govflanders/vl-ui-layer-map
or:
or
```bash
yarn add @govflanders/vl-ui-layer-map
@import "~@govflanders/vl-ui-layer-map/dist/css/style.css";
import '@govflanders/vl-ui-core';
import LayerMap from '@govflanders/vl-ui-layer-map';
Place the following 2 divs in your HTML:
<div class="vl-map">
<div id="map-container"
class="js-vl-map vl-map__container"
tabindex="0">
</div>
</div>
</div>
vl.layerMap = new LayerMap();
vl.layerMap.dressAll();
If you want to initialize with a custom element, then use:
vl.layerMap.dress(document.querySelector('.your-custom-class', {//settings }));
There are 2 ways to pass settings to the component: through HTML or through JavaScript.
<div id="map-container"
class="js-vl-map vl-map__container"
data-vlmap='{
"zoomLevel": 9,
"showControls" : false,
"interaction" : false,
"baseLayers": [],
"extraLayers": [
{
"type" :"MUNICIPALITY_BORDERS",
"description" : "gemeente grenzen",
"settings": {
"id": "municipality",
"zIndex": "14",
"opacity": "1",
"visible": true,
"interaction" : false,
"provincesToShow": ["Oost_vlaanderen", "AnTWerpen", "limburg"],
"selectedNisCodes": ["41081", "42008", "12035"]
}
}
]
}'
></div>
vl.layerMap.dress(document.querySelector('.js-vl-map'), {
"zoomLevel": 6,
"minZoom": 6,
"showControls" : false,
"interaction" : false,
"baseLayers": [],
"extraLayers": [
{
"type" :"MUNICIPALITY_BORDERS",
"description" : "gemeentegrenzen",
"settings": {
"id": "municipality",
"zIndex": "14",
"opacity": "1",
"visible": true,
"interaction" : false,
"provincesToShow": [ "limburg", "oost_vlaanderen", "antwerpen"],
"selectedNisCodes": ["41081", "42008", "12035"],
"zoomToFit" : true
}
}
]
});
The following settings are the base settings.
Note: You can overwrite all these settings by adding them to the component, as described in the section 'Passing settings'.
This sets the initial zoom level. The range for this setting is 0 - 28, where 0 will show the complete world and 28 is the maximum zoom level. For more info, refer to: https://wiki.openstreetmap.org/wiki/Zoom_levels
data-vlmap='{
"zoomLevel": 6
}'
The default value is 9.
This setting locks the minimum zoom out level. A zoom level of 0 shows the entire world.
Note: A minimum zoom level of 6 for example, will not allow the users to zoom out and see the whole world.
data-vlmap='{
"minZoom": 0
}'
The default value is 0.
This setting locks the maximum zoom in level.
Note: A maximum zoom level of 0 will not allow the users to zoom in to a country or street.
data-vlmap='{
"maxZoom": 28
}'
The default value is 28.
This setting shows/hides the following standard controls on a map: zoom in, zoom out and full screen.
data-vlmap='{
"showControls": false
}'
The default value is true.
This setting enables/disables the full screen control.
data-vlmap='{
"fullScreen": false
}'
The default value is true.
This setting enables/disables user interaction with elements and layers drawn on the map.
data-vlmap='{
"interaction": false
}'
The default value is true.
This setting enables/disables auto-panning when the tooltip is out of view. Enable this setting to make the map pan as much as necessary to bring the tooltip in view.
data-vlmap='{
"tooltipAutopan": false
}'
The default value is true.
This setting defines the center point of the map based on latitude and longitude coordinates.
data-vlmap='{
"center": {
"lat": 51.037861,
"lng": 4.240528,
}
}'
The default value is lat: 51.037861 and lng: 4.240528.
For more info, refer to the Geographical center of Flanders.
These are the 3 options for the base layers on the map:
These base layers are sent to the component through an array of objects:
data-vlmap='{
"baseLayers": [
{
"type": "OSM"
},
{
"type": "LUCHTFOTO"
},
{
"type": "GRBGRIJS"
}
]
}'
By default all 3 layers are active. In case you don't want base layers, for example because you only want to draw geometry, you can disable the layers by passing an empty array.
data-vlmap='{
"baseLayers": []
}'
This sets the active base layer. The options are:
data-vlmap='{
"activeBaseLayer": "LUCHTFOTO"
}'
The default value is OSM.
This sets the option to ask for a user's geolocation and display it on the map. Optionally you can zoom to the user's location.
data-vlmap='{
"userLocation": {
"showUserLocation": true,
"zoomToUserLocation": true
}
}'
The default values are:
This setting adds an Export/Download button to the map. When clicking this button, a png image of what is shown on the map, is downloaded.
data-vlmap='{
"showExportButton": true,
}'
The default value is false.
This setting adds a Print button to the map. When clicking the Print button, the user will get a Print dialog.
data-vlmap='{
"showPrintButton": true,
}'
The default value is false.
If you want to add a lot of information to the map with capaKey, you can pass an array with the capakeys you want to add. The map will automatically zoom and fit to the last drawn lot.
data-vlmap='{
"capaKeysToDraw": ["41081A0941/00R002"]
}'
You can also do this through a public function of the JavaScript instance.
vl.layerMap.drawCapaKeys(["41081A0941/00R002"]);
If you want to draw geometry on the map, you can pass an array of points to the map.
data-vlmap='{
"geometryToDraw": [[[[458070.429328,6598047.462965],
[457995.938307,6598084.53069],[457974.198495,6598095.348709],[457679.18105,6598242.145555],[457659.907108,6598243.764275],[457641.579362,6598245.303626],[457593.983076,6598249.300869],[457581.012811,6598250.389954],[457332.970614,6598271.213751],[457137.084304,6597725.313647],[457140.801571,6597650.230712],[457322.255314,6597463.149832],[458070.429328,6598047.462965]]]]
}'
You can also do this through a public function of the JavaScript instance.
vl.layerMap.drawGeometry([[[458070.429328,6598047.462965],[457995.938307,6598084.53069],[457974.198495,6598095.348709],[457679.18105,6598242.145555],[457659.907108,6598243.764275],[457641.579362,6598245.303626],[457593.983076,6598249.300869],[457581.012811,6598250.389954],[457332.970614,6598271.213751],[457137.084304,6597725.313647],[457140.801571,6597650.230712],[457322.255314,6597463.149832],[458070.429328,6598047.462965]]]);
The bounding box is an area enclosed and defined by 2 longitude and 2 latitude values, where latitude is a decimal number between - 90.0 and 90.0, and longitude is a decimal number between - 180.0 and 180.0. The standard format is: min Longitude, min Latitude, max Longitude, max Latitude.
data-vlmap='{
"boundingBox": [2.526855,49.525208,6.410522,51.498485]
}'
You can also set a bounding box through a public function of the JavaScript instance.
vl.layerMap.setBoundingBox([2.526855,49.525208,6.410522,51.498485]);
This setting adds a button with an external link in the top right corner of the component.
data-vlmap='{
"externalLink": "https://www.google.com/maps"
}'
If you want to use map listeners such as:
enable them through this setting:
data-vlmap='{
"enableListeners": true
}'
Adding extra layers is one of the most powerful features of the map component. You can add up to 8 extra layers to the map:
To add any of the above layers to the map, provide an array of those layers to the component:
data-vlmap='{
"extraLayers": [
{
"type": "NOISE_DISTURBANCE",
"description" : "geluidsoverlast"
},
{
"type" :"PLOTS",
"description" : "percelen"
},
]
}
Note: it is mandatory to add a description for each layer, which will be used for the overview of extra layers.
The extra layers can have the following settings:
This adds a layer that shows noise disturbance caused by transportation. This layer is limited to the Flanders territory.
data-vlmap='{
"extraLayers": [
{
"type": "NOISE_DISTURBANCE",
"description" : "geluidsoverlast"
},
]
}'
This setting shows plots on the map.
Note: This layer is only visible starting from zoom level 17.
data-vlmap='{
"extraLayers": [
{
"type" :"PLOTS",
"description" : "percelen"
},
]
}'
When adding a WMS layer it is mandatory to also provide extra settings and the parameters necessary for a WMS request.
These are the extra settings:
These are the default parameters:
These are the commonly used parameters for service from geopunt.
Note: The LAYERS parameter is empty and is mandatory.
This is an example where all the default parameters are set according to the service:
data-vlmap='{
"extraLayers": [
{
"type": "WMS_CUSTOM",
"description" : "Jacht - custom",
"settings": {
"id": "JACHT_CUSTOM",
"zIndex": "12",
"opacity": "0.6",
"visible": false,
"url": "https://geo.api.vlaanderen.be/Jacht/wms",
"params" : {
"layers": "Jachtterr"
}
}
},
]
}'
This is a more complex example where all url parameters are provided.
data-vlmap='{
"extraLayers": [
{
"type": "WMS_CUSTOM",
"description" : "Jacht - custom",
"settings": {
"id": "JACHT_CUSTOM",
"zIndex": "12",
"opacity": "0.6",
"visible": false,
"url": "https://geo.api.vlaanderen.be/Jacht/wms",
"params" : {
"layers": "Jachtterr",
"version": "1.3.0",
"service": "WMS",
"request": "GetMap",
"version": "1.3.0",
"transparent": "TRUE",
"format": "image/png",
"styles": "default",
"crs": "EPSG:3857",
"bbox": "263599.75531354814,6575977.681976722,348827.0418514047,6628566.357436852",
"width": "256",
"height": "256"
}
}
},
]
}'
In many cases, the WMS service provider can give you all necessary settings.
The WMTS service is similar to the WMS service above. The only difference is that the WMTS service returns tiles instead of a single image.
One additional setting is required: numberOfZoomLevels. This setting calculates the correct tile matrix. You can get it from the service provider.
An example:
data-vlmap='{
"extraLayers": [
{
"type": "WMTS_CUSTOM",
"description" : "geluidsoverlast - custom",
"settings": {
"id": "Geluidsoverlast_CUSTOM",
"zIndex": "12",
"opacity": "0.6",
"visible": false,
"numberOfZoomLevels": "8",
"url": "https://www.mercator.vlaanderen.be/raadpleegdienstenmercatorgeocachepubliek/service/wmts",
"params" : {
"version": "1.0.0",
"layer": "hh:hh_weg_lden_2011",
"matrixSet": "EPSG:900913",
"style": "_null"
}
}
}
]
}'
Use the markers layer to display points on the map. You can provide these points with:
An example with a single marker:
data-vlmap='{
"singleMarker":
{
"title": "item 1",
"lat": 50.748983899999996,
"long": 3.670188,
"data": "item 1 content"
}
}'
In case you want more than one marker, you need to provide an extra layer.
An example with an external json file:
data-vlmap='{
"extraLayers": [
{
"type" :"MARKERS",
"description" : "markers",
"settings": {
"id": "schools",
"opacity": "1",
"visible": true,
"interaction" : true,
"data_url": "./json/schools.json",
"clustered": true ,
"cluster_distance": 50
}
}
]
}'
An example with a data setting:
data-vlmap='{
"extraLayers": [
{
"type" :"MARKERS",
"description" : "markers",
"settings": {
"id": "schools",
"opacity": "1",
"visible": true,
"interaction" : true,
"data": {
"name": "scholen",
"items": [
{
"coordinates": {
"lat": 50.748983899999996,
"long": 3.670188
},
"title": "item 1",
"data": "item 1 content"
},
{
"coordinates": {
"lat": 50.948983899999996,
"long": 3.270188
},
"title": "item 2",
"data": "item 2 content"
}
]
},
"clustered": true ,
"cluster_distance": 50
}
}
]
}'
These are the extra default settings:
The json is structured as follows:
{
"name": "",
"items": []
}
You can place the following 3 types of markers in the items array:
{
"coordinates": {
"lat": 50.748983899999996,
"long": 3.670188
},
"title": "item 1",
"data": "item 1 content"
}
For this marker, add the extra style setting "pin".
{
"coordinates": {
"lat": 50.978983899999996,
"long": 3.520188
},
"title": "item 2",
"data": "item 2 content",
"style": "pin"
}
For this marker, add the extra custom_style attribute object with the following settings:
An example:
{
"coordinates": {
"lat": 50.868981,
"long": 3.820112
},
"title": "item 3",
"data": "item 3 content",
"custom_style": {
"icon_src": "../images/marker-alt.png",
"anchor": [0.5, 1],
"opacity": 1,
"imgSize": [28,40]
}
}
Use the markers_styled layer to display points on the map through a service and give all the returned markers the same style. This layer uses a loading strategy that will update the markers according to the visible bounding box. The normal Markers layer displays all markers at once.
For example:
<div id="map-container"
class="js-vl-map vl-map__container"
tabindex="0"
data-vlmap='{
"activeBaseLayer": "OSM",
"extraLayers":
[
{
"type" :"MARKERS_STYLED",
"description" : "markers",
"settings": {
"id": "hinder",
"opacity": "0.5",
"visible": true,
"interaction" : true,
"dataUrl": "http://api.gipod.vlaanderen.be/ws/v1/manifestation?startdate=2018-08-20&enddate=2018-08-30&crs=EPSG3857&limit=100&offset=0",
"clustered": true ,
"clusterDistance": 50,
"markerStyle": {
"anchor": [0.5, 1],
"icon_src": "../../../images/terras.svg",
"size": [31, 37]
},
"clusterStyle": {
"anchor": [0.5, 0.5],
"icon_src": "../../../images/cluster-terras.svg",
"size": [48 , 48],
"textColor": "#000000"
}
}
},
{
"type" :"MARKERS_STYLED",
"description" : "markers",
"settings": {
"id": "hinder",
"opacity": "1",
"visible": true,
"interaction" : true,
"dataUrl": "http://api.gipod.vlaanderen.be/ws/v1/manifestation?startdate=2018-09-01&enddate=2018-09-28&crs=EPSG3857&limit=100&offset=0",
"clustered": true ,
"clusterDistance": 50,
"markerStyle": {
"anchor": [0.5, 1],
"icon_src": "../../../images/party.svg",
"size": [31, 37]
},
"clusterStyle": {
"anchor": [0.5, 0.5],
"icon_src": "../../../images/cluster-party.svg",
"size": [48 , 48],
"textColor": "#FFF"
}
}
}
]
}'
></div>
These are the extra default settings:
In case you want to overwrite the styling of the markers and clusters on this layer you can do so by providing:
for example:
"markerStyle": {
"anchor": [0.5, 1],
"icon_src": "../../../images/party.svg",
"size": [31, 37]
},
"clusterStyle": {
"anchor": [0.5, 0.5],
"icon_src": "../../../images/cluster-party.svg",
"size": [48 , 48],
"textColor": "#FFF"
}
The service should return an array of objects, which can contain anything. However, take into account that the coordinates are mandatory.
This is the minimum object structure:
coordinate: {
coordinates: [
469704.6433704976,
6619771.116372223,
],
type: "Point",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
Use borders layers to draw the borders for the Flanders region, the provinces and the municipalities of Flanders.
Note: In 2019, 15 Flemish municipalities merge into seven. Up until version 3.7.1 of the Maps component, the borders for the municipalities reflect those prior to the mergers of 2019. As of version 3.8.0, the borders for the municipalities show the most recent merged state.
There are 4 types of layers:
The borders layers share the following default settings:
Use this borders layer type to show the borders of the municipalities in Flanders. This layer type will always show the most recent borders since the municipal mergers. This border type has one extra setting:
provincesToShow: By default all municipalities in each province are shown. Here you can configure which provinces you want to show. The options are:
An example:
data-vlmap='{
"extraLayers": [
{
"type" :"MUNICIPALITY_BORDERS",
"description" : "gemeentegrenzen",
"settings": {
"id": "municipality",
"opacity": "1",
"visible": true,
"provincesToShow": ["oost_vlaanderen", "antwerpen", "limburg"],
"selectedNisCodes": ["41081", "42008", "12035"]
}
}
]
}'
Note: This example will render "oost_vlaanderen", "antwerpen" and "limburg" only. To display all municipalities, remove this setting.
Use this border layer type to add the borders for the municipalities in Flanders, from before the municipal mergers in 2019.
An example:
data-vlmap='{
"extraLayers": [
{
"type" :"MUNICIPALITY_BORDERS_2003",
"description" : "gemeentegrenzen",
"settings": {
"id": "municipality",
"opacity": "1",
"visible": true,
}
}
]
}'
##### PROVINCES_BORDERS
Use this border layer type to add the borders for the provinces of Flanders.
An example:
```json
data-vlmap='{
"extraLayers": [
{
"type" :"PROVINCES_BORDERS",
"description" : "Provincie grenzen",
"settings": {
"id": "provinces",
"opacity": "1",
"visible": true
}
}
]
}'
Use this border layer type to add the borders for the Flanders region.
An example:
data-vlmap='{
"extraLayers": [
{
"type" :"REGIONS_BORDERS",
"description" : "vlaanderen grenzen",
"settings": {
"id": "regions",
"opacity": "1",
"visible": false
}
}
]
}'
This setting allows listening to a click for interactive elements on the map and providing a callback. The listener returns an event with a detail on the clicked item.
An example:
vl.layerMap.listen('vl-map-click', callBack);
function callBack(e) {
console.log(e.detail);
console.log('you clicked on', e.detail.title);
}
This setting allows listening to the user location. To activate this, enable the userLocation setting or use the showUserLocation function.
An example:
vl.layerMap.listen('vl-map-user-location-change', callBack);
function callBack(e) {
console.log('the user location is:', e.detail);
}
For the position events setting, enable listeners in settings. Choose either of the following events:
An example:
data-vlmap='{
"enableListeners" : true
}'
This setting allows listening to map center changes and providing a callback. The listener returns an event with a detail of the current center in 2 different projections:
An example:
vl.layerMap.listen('vl-map-center-change', callBack);
function callBack(e) {
console.log("center changed", e.detail);
}
This setting allows listening to map bounding changes and providing a callback. The listener returns an event with a detail of the bounding box in 2 different projections:
An example:
vl.layerMap.listen('vl-map-bounding-change', callBack);
function callBack(e) {
console.log("boundig changed", e.detail);
}
This listener returns an event when a layer source starts to load, and returns your given ID of the layer.
**Note:** vl-map-layer-load-started is compatible with WMS and WMTS layers only, not with vector layers. An example:vl.layerMap.listen('vl-map-layer-load-started', callBackStarted);
function callBackStarted(e) {
console.log('layer load started', e.detail);
}
This listener returns an event when a layer source is loaded, and returns your given ID of the layer.
An example:
vl.layerMap.listen('vl-map-layer-load-ended', callBackEnded);
function callBackEnded(e) {
console.log('layer load ended', e.detail);
}
This listener returns an event when a layer source cannot be loaded due to a misconfiguration or a problem in the service, and returns your given ID of the layer.
An example:
vl.layerMap.listen('vl-map-layer-load-error', callBackError);
function callBackError(e) {
console.log('layer load error', e.detail);
}
These are the available public functions:
Use this function to draw a lot on the map with capaKey. You can pass an array with the capakeys you want to draw. The map will automatically zoom and fit to the last drawn lot.
vl.layerMap.drawCapaKeys(["41081A0941/00R002"]);
Use this function to draw geometry on the map. You can pass an array of points (lat,long coordinates) to the map.
vl.layerMap.drawGeometry([[[458070.429328,6598047.462965],[457995.938307,6598084.53069],[457974.198495,6598095.348709],[457679.18105,6598242.145555],[457659.907108,6598243.764275],[457641.579362,6598245.303626],[457593.983076,6598249.300869],[457581.012811,6598250.389954],[457332.970614,6598271.213751],[457137.084304,6597725.313647],[457140.801571,6597650.230712],[457322.255314,6597463.149832],[458070.429328,6598047.462965]]]);
Use this function to change the active extra layer, this can be a layer of every type.
vl.layerMap.switchExtraLayer('PROVINCES_BORDERS');
Use this function to change the map bounding box. You can set the bounding box in 2 projections:
You can add the projection as
vl.layerMap.setBoundingBox([2.526855,49.525208,6.410522,51.498485]);
example for EPSG:3857
vl.layerMap.setBoundingBox([10405060.258480843, -1670094.5047316249, 16373263.426987406, 1142788.1361628613], vl.layerMap.PROJ_EPSG_3857);
Use this function to change the map center passing lat and long values.
You can set the center in 2 projections:
vl.layerMap.setCenter(40.768608,-73.976704);
example for EPSG:3857
vl.layerMap.setCenter(6658200.2228,359101.1589, vl.layerMap.PROJ_EPSG_3857);
Use this function to change the map zoom level.
vl.layerMap.setZoom(15);
Use this function to show and zoom to the user location. The default parameters are:
An example showing the user location:
vl.layerMap.showUserLocation();
An example showing the user location and the zoom level:
vl.layerMap.showUserLocation(true, 17);
Use this function to draw custom-styled markers on the map.
Arguments:
This is the minimum object structure:
coordinate: {
coordinates: [
469704.6433704976,
6619771.116372223,
],
type: "Point",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
To use a custom style for the marker, define it in the markerStyle setting:
coordinate: {
coordinates: [
469704.6433704976,
6619771.116372223,
],
type: "Point",
markerStyle: {
"anchor": [0.5, 1],
"icon_src": "../../../images/terras.svg",
"size": [31, 37]
},
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
An example:
vl.layerMap.drawCustomStyleMarkers([
{
initiator: null,
eventType: "Andere ",
recurrencePattern: null,
status: "Vergund",
gipodId: 1581709,
owner: "Gemeente Merchtem",
description: "tijdens laden van kippen aan kippenbedrijf ",
startDateTime: "2016-08-08T00:00:00",
endDateTime: "2026-12-31T00:00:00",
importantHindrance: true,
coordinate: {
coordinates: [
469704.6433704976,
6619771.116372223,
],
type: "Point",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
detail: "http://api.gipod.vlaanderen.be/ws/v1/manifestation/1581709?crs=EPSG3857",
cities: [
"Buggenhout",
"Merchtem",
],
latestUpdate: "2017-10-30T07:40:26.247",
},
{
initiator: "Rosiers - De Ridder",
eventType: "Andere ",
recurrencePattern: null,
status: "Vergund",
gipodId: 2432697,
owner: "Gemeente Londerzeel",
description: "1840 Londerzeel, Kattestraat 3-5: parkeerverbod vanaf Burchtlaan tot brugje ",
startDateTime: "2017-06-26T08:00:00",
endDateTime: "2018-09-28T18:00:00",
importantHindrance: true,
coordinate: {
coordinates: [
478533.6473559841,
6621834.816873206,
],
type: "Point",
markerStyle: {
"anchor": [0.5, 1],
"icon_src": "../../../images/terras.svg",
"size": [31, 37]
},
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
detail: "http://api.gipod.vlaanderen.be/ws/v1/manifestation/2432697?crs=EPSG3857",
cities: [
"Londerzeel"
],
latestUpdate: "2018-06-18T23:30:23.793",
},
])
});
Use this function to draw custom-styled geometry on the map.
Arguments:
This is the minimum object structure:
location: {
geometry: {
coordinates: [
[
[
424141.9671588489,
6598389.504894879,
],
[
424143.44787715725,
6598389.76382406,
],
[
424146.8926351491,
6598371.950136661,
],
[
424145.7597099468,
6598371.446056371,
],
[
424141.9671588489,
6598389.504894879,
],
]
],
type: "Polygon",
styling: {
strokeColor: "#000000",
fillColor: "#FF0000"
},
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::3857"
},
},
},
},
To use a custom style for the geometry, define it in the strokeColor and fillColor settings.
Use this function to clear the custom-styled geometry
vl.layerMap.removeCustomStyleGeometry();
use this function to clear the custom-styled geometry
vl.layerMap.removeCustemStyleMarkers();
Use this function to redraw the map. This can be useful when changing the container size of the map.
vl.layerMap.redraw();
FAQs
Map component which can display open layers.
We found that @govflanders/vl-ui-layer-map demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Software Engineering Daily to discuss modern software supply chain attacks and rising AI-driven security risks.
Security News
GitHub has revoked npm classic tokens for publishing; maintainers must migrate, but OpenJS warns OIDC trusted publishing still has risky gaps for critical projects.
Security News
Rust’s crates.io team is advancing an RFC to add a Security tab that surfaces RustSec vulnerability and unsoundness advisories directly on crate pages.