SK
хмм
Size: a a a
2019 October 24
SK
Ты можешь вешать обработчик на маркеры
A
SK
На контент маркера
SK
Типа
<Marker><div onClick={this.click} /></Marker>A
понял, спасибо за идею
A
На контент маркера
не, тогда мне придет нативное событие клика вместо мабоксовского
A
толку от него мало, мне же нужны проперти фичи, хотябы кординаты ее на карте
2019 October 25
A
мабокс не умеет в векторные иконки T.T
A
как грузить векторные иконки в мапбокс
export function ImageLoader({ id, image }) {
const svgPathToImage = ({ path, width, height }) => new Promise(resolve => {
const image = new Image(width, height);
image.addEventListener('load', () => resolve(image));
image.setAttribute('crossOrigin', '');
image.src = path;
});
const [rasterImage, setRasterImage] = useState();
useEffect(() => {
if (image) svgPathToImage({ path: image, width: 15, height: 15 }).then(setRasterImage);
}, [image]);
return rasterImage ? <UrbicaImage id={id} image={rasterImage} /> : null;
}DS
можно же еще и на канвасе генерить их
A
да ну, оверкил
DS
еще есть метод загрузить в стиль )
DS
маки сделать )
A
тут фишка в том что иконки тянутся откуда-то из s3
A
ссылка на иконку приодит в проперти фичи
A
глобально я пытаюсь сделать кликабельный кластер в котором будут по кругу расположены иконки входящие в его состав
DS
супер динамика кароч )
DS
я типо чтото такого делал
export const addImage = (type, map) => {
const rgb = colors[type];
const canvasEl = document.createElement('canvas');
canvasEl.width = width;
canvasEl.height = height;
const context = canvasEl.getContext('2d');
const radius = (size / 2) * 0.3;
const outerRadius = (size / 2) * 0.7 * 1 + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(width / 2, height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = `rgba(${rgb.join(',')}, 0.3)`;
context.fill();
const data = context.getImageData(0, 0, width, height).data;
map.addImage(prefix + type, { width: width, height: width, data: data });
};DS
такой штукой в основном анимации делают )