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.example	String