Example settings for this map
const nodeMap = document.getElementById('map');
const baloonTheme = {
colorBG: '#eeeeee', // Baloon background color
colorTitle: '#000000', // Baloon title color
colorDescription: '#000000', // Baloon description color
isPositionFixed: false, // Baloon position fixed
top: 100, // Baloon top position
left: 200, // Baloon left position
}
const dataShops2 = [
{
id: '0',
idmap: 'SvgjsRect1009',
title: 'Bruen - Kessler',
slug: 'https://soulful-racism.info',
description: 'Focused bi-directional middleware',
image: 'https://loremflickr.com/128/128/abstract?73275',
},
...
];
const map1 = new ClientSVGEditor(
nodeMap, // node - dom element to insert svg
dataShops2, // dataItems - data to render in Baloon when hover on Item
{
title: 'Пример карты', // Head Title this map
urlmap: './public/Shelkovsky-float-0.svg', // Path to map svg
isRemoveUnuseItem: false, // Remove unuse item from map?
funcClick: gotoURLClick, // Function for click on item
funcParams: 'https://www.google.com', // Params for function click on item
mapTheme: {
// Theme for map
colorBG: '#ffdd3d', // Background color this map
colorItem: '#aaa', // Fill Color for item
colorHoverItem: '#9e3232', // Fill Color for item on hover
colorSelectItem: '#0000ff', // Fill Color for item on select
opacityItem: 0.0, // Opacity for item
opacityHoverItem: 0.3, // Opacity for item on hover
opacitySelectItem: 1, // Opacity for item on select
colorBorderItem: '#000000', // Border color for item
colorBorderHoverItem: '#ffffff', // Border color for item on hover
colorBorderSelectItem: '#ffffff', // Border color for item on select
isBorderItem: false, // Is set Border for item
isBorderHoverItem: false, // Is set Border for item on hover
isBorderSelectItem: false, // Is set Border for item on select
widthBorderItem: 2, // Width for border item
widthBorderHoverItem: 2, // Width for border item on hover
widthBorderSelectItem: 2, // Width for border item on select
},
},
baloonTheme // Theme for baloon
)
const startMap = map1.start(); // Start map
function gotoURLClick(dataelement) {
window.open(dataelement.slug, '_self')
}
Example settings for this map
const nodeMap = document.getElementById('map');
const baloonTheme = {
colorBG: '#eeeeee', // Baloon background color
colorTitle: '#000000', // Baloon title color
colorDescription: '#000000', // Baloon description color
isPositionFixed: false, // Baloon position fixed
top: 100, // Baloon top position
left: 200, // Baloon left position
}
const dataShops = [
{
id: '0',
idmap: 'item-0',
title: 'Cronin, Bayer and Halvorson',
slug: 'http://brief-function.tech',
description: 'Optimized 3rd generation paradigm',
image: 'https://loremflickr.com/128/128/abstract?48284',
},
...
];
const map2 = new ClientSVGEditor(
nodeMap2, // node - dom element to insert svg
dataShops, // // dataItems - data to render in Baloon when hover on Item
{
urlmap: './public/floor-1_1-adaptive.svg', // Path to map svg
isRemoveUnuseItem: true, // Remove unuse item from map?
funcClick: gotoURLClick, // Function for click on item
funcParams: 'https://www.google.com',// Params for function click on item
mapTheme: {
// Theme for map
colorBG: '#ffffff', // Background color this map
colorItem: '#a55', // Fill Color for item
colorHoverItem: '#9e3232', // Fill Color for item on hover
colorSelectItem: '#0000ff', // Fill Color for item on select
opacityItem: 0.7, // Opacity for item
opacityHoverItem: 0.3, // Opacity for item on hover
opacitySelectItem: 1, // Opacity for item on select
colorBorderItem: '#000000', // Border color for item
colorBorderHoverItem: '#ffffff', // Border color for item on hover
colorBorderSelectItem: '#ffffff', // Border color for item on select
isBorderItem: true, // Is set Border for item
isBorderHoverItem: false, // Is set Border for item on hover
isBorderSelectItem: false, // Is set Border for item on select
widthBorderItem: 2, // Width for border item
widthBorderHoverItem: 2, // Width for border item on hover
widthBorderSelectItem: 2, // Width for border item on select
},
},
baloonTheme
)
const startMap2 = map2.start(); // Start map
function gotoURLClick(dataelement) {
window.open(dataelement.slug, '_self')
}
Example settings for this map
const nodeMap = document.getElementById('map');
const baloonTheme = {
colorBG: '#eeeeee', // Baloon background color
colorTitle: '#000000', // Baloon title color
colorDescription: '#000000', // Baloon description color
isPositionFixed: false, // Baloon position fixed
top: 10, // Baloon top position
left: 20, // Baloon left position
}
const dataShops3 = [
{
id: '0',
idmap: 'item-terrasa',
title: 'Терраса',
slug: '/terrasa',
description: 'Терраса паред домом. 28,31 м2',
image: 'https://loremflickr.com/128/128/abstract?8225',
},
...
];
const map3 = new ClientSVGEditor(
nodeMap3, // node - dom element to insert svg
dataShops3, // // dataItems - data to render in Baloon when hover on Item
{
title: 'Пример карты 3 ', // Head Title this map
urlmap: './public/plan-house-1.svg', // Path to map svg
isRemoveUnuseItem: true, // Remove unuse item from map?
funcClick: gotoURLClick, // Function for click on item
funcParams: 'https://www.google.com',// Params for function click on item
mapTheme: {
// Theme for map
colorBG: '#ffffff', // Background color this map
colorItem: '#a55', // Fill Color for item
colorHoverItem: '#9e3232', // Fill Color for item on hover
colorSelectItem: '#0000ff', // Fill Color for item on select
opacityItem: 0.1, // Opacity for item
opacityHoverItem: 0.6, // Opacity for item on hover
opacitySelectItem: 1, // Opacity for item on select
colorBorderItem: '#000000', // Border color for item
colorBorderHoverItem: '#ffff00', // Border color for item on hover
colorBorderSelectItem: '#ffffff', // Border color for item on select
isBorderItem: true, // Is set Border for item
isBorderHoverItem: true, // Is set Border for item on hover
isBorderSelectItem: false, // Is set Border for item on select
widthBorderItem: 2, // Width for border item
widthBorderHoverItem: 12, // Width for border item on hover
widthBorderSelectItem: 2, // Width for border item on select
},
isCustomBalloon: true, // Is custom baloon?
nodeCustomBalloon: document.getElementById('cartoonballoon'), // Node for custom baloon
dataStructureCustomBalloon: {
title: '.balloon__title', // Selector for title
description: '.balloon__description', // Selector for description
},
},
baloonTheme
)
const startMap3 = map3.start(); // Start map
function gotoURLClick(dataelement) {
window.open(dataelement.slug, '_self')
}
<div id="cartoonballoon" class="hidden">
<div class="baseballoon">
<div class="baseballoon_svg">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 488.6 382.2"
style="enable-background: new 0 0 488.6 382.2"
xml:space="preserve"
>
<polygon
style="fill: #231f20"
points="0,33.3 17.5,275.9 96.1,281.9 150.2,382.2 182.8,288.6 437.2,308.1 488.6,0 "
/>
<polyline
style="fill: #ffffff"
points="40.2,264.8 24.7,49.2 475.1,20.6 429,294.7 176,275.3 149.9,354.6 115.2,270.6 40.2,264.8
"
/>
</svg>
<div class="ctballoon">
<div class="ctballoon__title">Title</div>
<div class="ctballoon__description">Description</div>
</div>
</div>
</div>
</div>