---
title: "Get POIs information on click | JavaScript maps SDK"
description: "Get POI information by clicking the map."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Get POIs information on click
Get POI information from MapTiler, OpenStreetMap (OSM), and Wikidata data by clicking on the map.
Click on any POI on the map to get the information.
### NPM module setup
```bash
npm install --save @maptiler/sdk blueimp-md5
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import md5 from 'blueimp-md5';
import queryString from 'https://cdn.jsdelivr.net/npm/query-string@8.1.0/+esm'
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const center = [-73.986281, 40.74241];
const map = new Map({
container: 'map',
zoom: 16,
center: center,
style: MapStyle.STREETS
});
const marker = new maptilersdk.Marker();
function toggleSidebar(id) {
const elem = document.getElementById(id);
const classes = elem.className.split(' ');
const collapsed = classes.indexOf('collapsed') !== -1;
const padding = {};
if (collapsed) {
// Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
classes.splice(classes.indexOf('collapsed'), 1);
padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
map.easeTo({
padding: padding,
duration: 1000 // In ms, CSS transition duration property for the sidebar matches this value
});
} else {
padding[id] = 0;
// Add the 'collapsed' class to the class list of the element
classes.push('collapsed');
map.easeTo({
padding: padding,
duration: 1000
});
}
// Update the class list on the element
elem.className = classes.join(' ');
}
function showSidebar(id) {
const elem = document.getElementById(id);
const classes = elem.className.split(' ');
const collapsed = classes.indexOf('collapsed') !== -1;
const padding = {};
if (collapsed) {
// Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
classes.splice(classes.indexOf('collapsed'), 1);
padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
map.easeTo({
padding: padding,
duration: 1000 // In ms, CSS transition duration property for the sidebar matches this value
});
// Update the class list on the element
elem.className = classes.join(' ');
}
}
map.on('load', function () {
toggleSidebar('left');
map.on('click', async function(e) {
const features = map.queryRenderedFeatures(e.point, {
layers: ['Public', 'Sport', 'Tourism', 'Culture', 'Education', 'Shopping', 'Food',
'Transport', 'Park', 'Healthcare', 'Station']
});
if (features.length > 0) {
getInfoFromLngLat(e.lngLat, features[0]);
}
});
});
async function getInfoFromLngLat(lngLat, feature) {
marker.setLngLat(lngLat).addTo(map);
const osmInfo = await getOMSInfo(feature.id);
const wikidata = await getWikidata(osmInfo?.tags);
showPoiInfo(feature, osmInfo, wikidata);
}
async function getOMSInfo(id) {
const query = queryString.stringify({
data: `[out:json][timeout:25];
node(${id/10});
out tags;`
});
const response = await fetch(`https://overpass-api.de/api/interpreter?${query}`, {
redirect: 'follow',
headers: {
accept: 'application/json'
},
});
const info = await response.json();
return info?.elements[0] ? info.elements[0] : null;
}
function getWikidataId(tags) {
if (!tags) return null;
const regexWikidata = /(\w*:)?wikidata/;
const key = Object.keys(tags).find(key => key.match(regexWikidata));
return tags[key] ? tags[key] : null;
}
function getWikidataImageHash(name) {
const imageHash = md5(name);
return imageHash;
}
function getWikidataImagePath(image_name) {
const name = image_name.replace(/\s+/g, '_');
const hash = getWikidataImageHash(name);
return `https://upload.wikimedia.org/wikipedia/commons/${hash.substring(0,1)}/${hash.substring(0,2)}/${name}`;
}
async function getWikidata(tags) {
const id = getWikidataId(tags);
if (!id) return null;
const response = await fetch(`https://www.wikidata.org/wiki/Special:EntityData/${id}.json?flavor=simple`);
const info = await response.json();
let image;
if (info.entities[id].claims.P154) {
image = getWikidataImagePath(info.entities[id].claims.P154[0].mainsnak.datavalue.value);
}else if (info.entities[id].claims.P18) {
image = getWikidataImagePath(info.entities[id].claims.P18[0].mainsnak.datavalue.value);
}
return image ? {...info.entities[id], ...{image}} : info.entities[id];
}
function showPoiInfo(feature, osmInfo, wikidata) {
const textHtml = [];
if (wikidata?.image) {
textHtml.push(``);
}
textHtml.push(`
${feature.properties.name}
`);
if (feature.properties.class !== feature.properties.subclass) {
textHtml.push(`
```
## Related examples
### [Geocoding search for POIs near the user's location](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-types/)
Examples
Filter geocoding search results by specific place types.
### [Display a popup on click](https://docs.maptiler.com/sdk-js/examples/popup-on-click/)
Examples
Display a popup when a user clicks a symbol.
### [Point filtering by property](https://docs.maptiler.com/sdk-js/examples/point-filtering/)
Examples
Filter features in real time by property.
### [Offset the vanishing point using padding](https://docs.maptiler.com/sdk-js/examples/offset-vanishing-point-with-padding/)
Examples
Offset the map vanishing point using padding.