36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
// creates pins
|
||
import { Feature } from "ol";
|
||
import { Icon, Style } from "ol/style";
|
||
import Point from "ol/geom/Point.js";
|
||
|
||
const makePin = (lon, lat, storeName, cheapest, flozPrice) => {
|
||
// define pin graphics (since this is all inline)
|
||
const pinSVG = `<svg width="32px" height="32px" viewBox="-0.12 -0.12 12.24 12.24" enable-background="new 0 0 12 12" id="Слой_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000" stroke-width="0.12000000000000002"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6,0C3.2385864,0,1,2.2385864,1,5s2.5,5,5,7c2.5-2,5-4.2385864,5-7S8.7614136,0,6,0z M6,7 C4.8954468,7,4,6.1045532,4,5s0.8954468-2,2-2s2,0.8954468,2,2S7.1045532,7,6,7z" fill="#ed333b"></path></g></svg>`;
|
||
const pinSVGBlob = new Blob([pinSVG], {
|
||
type: "image/svg+xml",
|
||
});
|
||
const pinImageURL = URL.createObjectURL(pinSVGBlob);
|
||
|
||
// define style for all pins
|
||
const pinStyle = new Style({
|
||
image: new Icon({
|
||
src: pinImageURL,
|
||
anchor: [0.5, 1],
|
||
}),
|
||
});
|
||
|
||
// create pin as feature
|
||
const pin = new Feature({
|
||
geometry: new Point([lon, lat]),
|
||
store: storeName,
|
||
cheapestItem: cheapest,
|
||
pricePerOz: flozPrice,
|
||
});
|
||
|
||
// set style for pin
|
||
pin.setStyle(pinStyle);
|
||
|
||
return pin;
|
||
};
|
||
|
||
export default makePin;
|