Mixing
How to avoid autoClose in Popup component?
Is there anyway to avoid autoClose property on Popup component?
I would like something like this, but autoClose prop does not exist in react-leaflet.
<Marker position={coords}>
<Popup autoClose={false}>
Some text
</Popup>
</Marker>
reactjs leaflet react-leaflet
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
add a comment |
Is there anyway to avoid autoClose property on Popup component?
I would like something like this, but autoClose prop does not exist in react-leaflet.
<Marker position={coords}>
<Popup autoClose={false}>
Some text
</Popup>
</Marker>
reactjs leaflet react-leaflet
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
add a comment |
Is there anyway to avoid autoClose property on Popup component?
I would like something like this, but autoClose prop does not exist in react-leaflet.
<Marker position={coords}>
<Popup autoClose={false}>
Some text
</Popup>
</Marker>
reactjs leaflet react-leaflet
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
Is there anyway to avoid autoClose property on Popup component?
I would like something like this, but autoClose prop does not exist in react-leaflet.
<Marker position={coords}>
<Popup autoClose={false}>
Some text
</Popup>
</Marker>
reactjs leaflet react-leaflet
reactjs leaflet react-leaflet
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
asked Nov 21 '18 at 16:41
Ruben PerezRuben Perez
3881411
3881411
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.
The following solution could be considered to assign those properties:
Introduce a callback function to access Leaflet Popup via popup.leafletElement:
<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
Melbourne
</Popup>
and then update directly Leaflet Popup options:
assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
Here is a demo and a source code
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
add a comment |
I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:
<Map center={position} zoom="12" closePopupOnClick={false}>
<Marker position={coords}>
<Popup autoClose={false}>
I'm a popup
</Popup>
</Marker>
</Map>
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
add a comment |
Your Answer
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%2f53416776%2fhow-to-avoid-autoclose-in-popup-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.
The following solution could be considered to assign those properties:
Introduce a callback function to access Leaflet Popup via popup.leafletElement:
<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
Melbourne
</Popup>
and then update directly Leaflet Popup options:
assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
Here is a demo and a source code
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
add a comment |
Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.
The following solution could be considered to assign those properties:
Introduce a callback function to access Leaflet Popup via popup.leafletElement:
<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
Melbourne
</Popup>
and then update directly Leaflet Popup options:
assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
Here is a demo and a source code
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
add a comment |
Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.
The following solution could be considered to assign those properties:
Introduce a callback function to access Leaflet Popup via popup.leafletElement:
<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
Melbourne
</Popup>
and then update directly Leaflet Popup options:
assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
Here is a demo and a source code
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
Indeed, a few Leaflet Popup options are not exposed via Popup component props in react-leaflet library.
The following solution could be considered to assign those properties:
Introduce a callback function to access Leaflet Popup via popup.leafletElement:
<Popup ref={popupEl => this.assignPopupProperties(popupEl)}>
Melbourne
</Popup>
and then update directly Leaflet Popup options:
assignPopupProperties(popup) {
popup.leafletElement.options.autoClose = false;
popup.leafletElement.options.closeOnClick = false;
}
Here is a demo and a source code
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
answered Nov 23 '18 at 13:05
Vadim GremyachevVadim Gremyachev
36.1k771114
36.1k771114
add a comment |
add a comment |
I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:
<Map center={position} zoom="12" closePopupOnClick={false}>
<Marker position={coords}>
<Popup autoClose={false}>
I'm a popup
</Popup>
</Marker>
</Map>
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
add a comment |
I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:
<Map center={position} zoom="12" closePopupOnClick={false}>
<Marker position={coords}>
<Popup autoClose={false}>
I'm a popup
</Popup>
</Marker>
</Map>
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
add a comment |
I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:
<Map center={position} zoom="12" closePopupOnClick={false}>
<Marker position={coords}>
<Popup autoClose={false}>
I'm a popup
</Popup>
</Marker>
</Map>
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
I found the way to do it. You hove to set both properties autoClose and closePopupOnClick:
<Map center={position} zoom="12" closePopupOnClick={false}>
<Marker position={coords}>
<Popup autoClose={false}>
I'm a popup
</Popup>
</Marker>
</Map>
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
answered Nov 23 '18 at 9:28
Ruben PerezRuben Perez
3881411
3881411
add a comment |
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%2f53416776%2fhow-to-avoid-autoclose-in-popup-component%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
