clickMapObject method in amCharts V4 maps
I need a hand to find a way to to replicate the following functionality from amcharts v3 in v4 without success:
In V3: map.clickMapObject(map.getObjectById('CA'));
In V4: chart.METHOD???(polygonSeries.getPolygonById("CA"))
What I'm looking to achieve here is to open the area modal from a click on an element outside the map.
Thank you
amcharts
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
add a comment |
I need a hand to find a way to to replicate the following functionality from amcharts v3 in v4 without success:
In V3: map.clickMapObject(map.getObjectById('CA'));
In V4: chart.METHOD???(polygonSeries.getPolygonById("CA"))
What I'm looking to achieve here is to open the area modal from a click on an element outside the map.
Thank you
amcharts
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
add a comment |
I need a hand to find a way to to replicate the following functionality from amcharts v3 in v4 without success:
In V3: map.clickMapObject(map.getObjectById('CA'));
In V4: chart.METHOD???(polygonSeries.getPolygonById("CA"))
What I'm looking to achieve here is to open the area modal from a click on an element outside the map.
Thank you
amcharts
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
I need a hand to find a way to to replicate the following functionality from amcharts v3 in v4 without success:
In V3: map.clickMapObject(map.getObjectById('CA'));
In V4: chart.METHOD???(polygonSeries.getPolygonById("CA"))
What I'm looking to achieve here is to open the area modal from a click on an element outside the map.
Thank you
amcharts
amcharts
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
asked Nov 23 '18 at 9:41
florinescuflorinescu
253
253
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:
// Open modal on click
polygonTemplate.events.on("hit", function(event) {
// chart.closeAllPopups(); // <-- if using an amCharts Popup
chart.openModal(
"The id for " +
event.target.dataItem.dataContext.name +
" is <strong>" +
event.target.dataItem.dataContext.id +
"</strong>."
);
// if using an amCharts popup, replace openModal with openPopup
});
Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/
To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:
// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
$button.style.display = "inline-block";
$button.addEventListener("click", function(event) {
event.preventDefault();
polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
});
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011
Let us know if this is making sense and is along the lines of what you were looking to do.
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444085%2fclickmapobject-method-in-amcharts-v4-maps%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:
// Open modal on click
polygonTemplate.events.on("hit", function(event) {
// chart.closeAllPopups(); // <-- if using an amCharts Popup
chart.openModal(
"The id for " +
event.target.dataItem.dataContext.name +
" is <strong>" +
event.target.dataItem.dataContext.id +
"</strong>."
);
// if using an amCharts popup, replace openModal with openPopup
});
Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/
To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:
// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
$button.style.display = "inline-block";
$button.addEventListener("click", function(event) {
event.preventDefault();
polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
});
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011
Let us know if this is making sense and is along the lines of what you were looking to do.
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
add a comment |
In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:
// Open modal on click
polygonTemplate.events.on("hit", function(event) {
// chart.closeAllPopups(); // <-- if using an amCharts Popup
chart.openModal(
"The id for " +
event.target.dataItem.dataContext.name +
" is <strong>" +
event.target.dataItem.dataContext.id +
"</strong>."
);
// if using an amCharts popup, replace openModal with openPopup
});
Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/
To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:
// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
$button.style.display = "inline-block";
$button.addEventListener("click", function(event) {
event.preventDefault();
polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
});
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011
Let us know if this is making sense and is along the lines of what you were looking to do.
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
add a comment |
In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:
// Open modal on click
polygonTemplate.events.on("hit", function(event) {
// chart.closeAllPopups(); // <-- if using an amCharts Popup
chart.openModal(
"The id for " +
event.target.dataItem.dataContext.name +
" is <strong>" +
event.target.dataItem.dataContext.id +
"</strong>."
);
// if using an amCharts popup, replace openModal with openPopup
});
Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/
To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:
// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
$button.style.display = "inline-block";
$button.addEventListener("click", function(event) {
event.preventDefault();
polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
});
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011
Let us know if this is making sense and is along the lines of what you were looking to do.
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:
// Open modal on click
polygonTemplate.events.on("hit", function(event) {
// chart.closeAllPopups(); // <-- if using an amCharts Popup
chart.openModal(
"The id for " +
event.target.dataItem.dataContext.name +
" is <strong>" +
event.target.dataItem.dataContext.id +
"</strong>."
);
// if using an amCharts popup, replace openModal with openPopup
});
Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/
To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:
// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
$button.style.display = "inline-block";
$button.addEventListener("click", function(event) {
event.preventDefault();
polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
});
});
Here's a demo with all that thrown together:
https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011
Let us know if this is making sense and is along the lines of what you were looking to do.
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
answered Nov 26 '18 at 21:53
notacouchnotacouch
1,89611024
1,89611024
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
add a comment |
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
1
1
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
excelent, dispatchImmediately("hit"); was the method I was looking for.
– florinescu
Nov 29 '18 at 12:02
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444085%2fclickmapobject-method-in-amcharts-v4-maps%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
