Как сделать такое с помощью Open Street Map на сайте?
С картами OSM умеет работать например leafletjs.com
На близком зуме то что Вы видите называется кластеризацией (cluster) - пример https://www.mapbox.com/mapbox.js/example/v1.0.0/le... или любой другой плагин
На высоком зуме - тепловой картой (heatmap) - пример https://github.com/Leaflet/Leaflet.heat
В зависимости от уровня зума метки скрываются а слой с тепловой картой выводится и наоборот.
Это можно сделать с помощью API карт Яндекса https://tech.yandex.ru/maps/ или googl-a https://developers.google.com/maps/documentation/w...
Можно поискать темы wordpress, тоже бывают с такими фишками.