API

IdlyGL Store

IdlyGl uses a store object which is the central source of truth.

Jump to All Properties to see the list of all the possible values that you can read/write to the store.

Head over to the wiki for more examples.

Providing initial values to the store

// providing a mapbox-gl layer id to render idly-gl layers
// below it
const initialValue = {
  map: {
    beforeLayer: 'my-layer',
  },
};
const idly = new IdlyGl(initialValue);
mapboxgl.addControl(idly);

Getting current value of the store

const store = idly.getStore();
console.log(store.interaction.selectedId); // prints the currently selected ID.

Warning: Do not update the store or any of its property directly, treat the store as readonly!

Updating the store

// selecting a node
const nodeId = 'n1234';
idly.updateStore({
  interaction: {
    selectedId: nodeId,
  },
});

// updating multiple things
idly.updateStore({
  tab: {
    active: 'tree',
  },
  interaction: {
    selectedId: 'r123',
  },
});

idly.updateStore takes a partial store and automatically merges it with the existing store, which means you do not have to provide the entire store every time you want to update it.

Warning: Do not directly set a value to store object, instead use updateStore instead.

let store = idly.getStore();
store.interaction.selectedId = 'r123'; // DO NOT DO THIS!

// Do this instead!
idly.updateStore({
  interaction: {
    selectedId: 'r123',
  },
});

Listening for changes

idly.onChange(store => {
  console.log(store.interaction.selectedId); // n1234
});

Warning: Do not directly set a value to store object, use updateStore instead.

Get tags, attributes and other data for an OSM ID

let store = idly.getStore();
const entityId = store.interaction.selectedId;
const dataPromise = idly.getEntity(entityId);

dataPromise.then(data => console.log(data)); // prints all of the associated OSM data

Note: It can be possible that the data is undefined

All Properties

Property	Description	Type
tab.active	Current value of the active tab.	Info , Tags , Tree , Layers
interaction.hoverId	The entity which is currently hovered. The hovering effect can be seen as an orange highlight around an entity.	String (OSM iD prepended with n, w & r)
interaction.selectedId	The entity which is currently selected. The selection effect can be seen as blue highlight around an entity.	String (OSM iD prepended with n, w & r)
map.loading	The current data loading state of idly.	Boolean
map.layers	All of the mapbox-gl layers of idly.	Array<Mapboxgl layers>
map.featureCollection	The geojson representation of all the osm entities in current view.	FeatureCollection
map.layerOpacity	The opacity of idly-gl layers.	Number
map.quadkeys	The current quadkeys of the current view.	Array<String>
map.beforeLayer	The layer id to render all of the idly-gl layers under it. Use it when you want to prevent idly-gl's layer from hiding your apps layer. Make sure the layer is already rendered on the map.	String