Mixing
OpenLayers 5: Multiple map viewports when multiple maps are defined with same target
OpenLayers 5.3
Update: Please see my answer below. I think this is a red-herring question not at all related to OpenLayers
I encountered some unexpected behavior when I defined but did not import a second map using the same target div.
Unexpectedly, within the 'map' div, the viewport was duplicated and the second map appeared, even though I did not import the second map into my index.js:
maps.js
import {Map} from 'ol';
export var map0 = new Map({
layers: some_layers,
view: some_view,
target: 'map'
});
export var map1 = new Map({
layers: other_layers,
view: someother_view,
target: 'map'
});
index.js
import {map0 as map} from maps;
// note that map1 is NOT imported
Expected behavior:
Because I only imported a single map in index.js, I expected that I would only have a single map viewport in
<div id='map'>
and that map1, being NOT imported, would NOT be included.
Actual behavior:
Within the map div, there were two viewports, one containing map0 and one containing map1.
Work-around
In maps.js, omit the 'target' parameter, and then, in index.js:
map.setTarget('map')
Is this a bug, or expected behavior, or does it reflect a lack of understanding on my part of the behavior of exports and imports?
node.js webpack openlayers
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
add a comment |
OpenLayers 5.3
Update: Please see my answer below. I think this is a red-herring question not at all related to OpenLayers
I encountered some unexpected behavior when I defined but did not import a second map using the same target div.
Unexpectedly, within the 'map' div, the viewport was duplicated and the second map appeared, even though I did not import the second map into my index.js:
maps.js
import {Map} from 'ol';
export var map0 = new Map({
layers: some_layers,
view: some_view,
target: 'map'
});
export var map1 = new Map({
layers: other_layers,
view: someother_view,
target: 'map'
});
index.js
import {map0 as map} from maps;
// note that map1 is NOT imported
Expected behavior:
Because I only imported a single map in index.js, I expected that I would only have a single map viewport in
<div id='map'>
and that map1, being NOT imported, would NOT be included.
Actual behavior:
Within the map div, there were two viewports, one containing map0 and one containing map1.
Work-around
In maps.js, omit the 'target' parameter, and then, in index.js:
map.setTarget('map')
Is this a bug, or expected behavior, or does it reflect a lack of understanding on my part of the behavior of exports and imports?
node.js webpack openlayers
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
add a comment |
OpenLayers 5.3
Update: Please see my answer below. I think this is a red-herring question not at all related to OpenLayers
I encountered some unexpected behavior when I defined but did not import a second map using the same target div.
Unexpectedly, within the 'map' div, the viewport was duplicated and the second map appeared, even though I did not import the second map into my index.js:
maps.js
import {Map} from 'ol';
export var map0 = new Map({
layers: some_layers,
view: some_view,
target: 'map'
});
export var map1 = new Map({
layers: other_layers,
view: someother_view,
target: 'map'
});
index.js
import {map0 as map} from maps;
// note that map1 is NOT imported
Expected behavior:
Because I only imported a single map in index.js, I expected that I would only have a single map viewport in
<div id='map'>
and that map1, being NOT imported, would NOT be included.
Actual behavior:
Within the map div, there were two viewports, one containing map0 and one containing map1.
Work-around
In maps.js, omit the 'target' parameter, and then, in index.js:
map.setTarget('map')
Is this a bug, or expected behavior, or does it reflect a lack of understanding on my part of the behavior of exports and imports?
node.js webpack openlayers
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
OpenLayers 5.3
Update: Please see my answer below. I think this is a red-herring question not at all related to OpenLayers
I encountered some unexpected behavior when I defined but did not import a second map using the same target div.
Unexpectedly, within the 'map' div, the viewport was duplicated and the second map appeared, even though I did not import the second map into my index.js:
maps.js
import {Map} from 'ol';
export var map0 = new Map({
layers: some_layers,
view: some_view,
target: 'map'
});
export var map1 = new Map({
layers: other_layers,
view: someother_view,
target: 'map'
});
index.js
import {map0 as map} from maps;
// note that map1 is NOT imported
Expected behavior:
Because I only imported a single map in index.js, I expected that I would only have a single map viewport in
<div id='map'>
and that map1, being NOT imported, would NOT be included.
Actual behavior:
Within the map div, there were two viewports, one containing map0 and one containing map1.
Work-around
In maps.js, omit the 'target' parameter, and then, in index.js:
map.setTarget('map')
Is this a bug, or expected behavior, or does it reflect a lack of understanding on my part of the behavior of exports and imports?
node.js webpack openlayers
node.js webpack openlayers
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
edited Nov 21 '18 at 3:00
Steve W
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
asked Nov 20 '18 at 23:51
Steve WSteve W
17617
17617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I believe this was not at all an OpenLayers issue.
Furthermore, I believe my question didn't even touch on the underlying issue.
I think this is a webpack-related issue.
I think I need to better understand the concept of 'TreeShaking' and use of the sideEffects parameter in webpack.config.
Though I haven't yet tried this, I think that learning from the link below should help me resolve the issue:
https://webpack.js.org/guides/tree-shaking/
A quote from the above is directly responsive to my original question:
Note that we did not import the square method from the src/math.js
module. That function is what's known as "dead code", meaning an
unused export that should be dropped.
Thus, even though the export is 'unused' it still ends up in the webpack bundle, hence, in the case here, it did add the second map to the same div, as experienced.
I will update this answer with confirmation when/if I achieve that.
Sorry for the false alarm.
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
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%2f53403350%2fopenlayers-5-multiple-map-viewports-when-multiple-maps-are-defined-with-same-ta%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
I believe this was not at all an OpenLayers issue.
Furthermore, I believe my question didn't even touch on the underlying issue.
I think this is a webpack-related issue.
I think I need to better understand the concept of 'TreeShaking' and use of the sideEffects parameter in webpack.config.
Though I haven't yet tried this, I think that learning from the link below should help me resolve the issue:
https://webpack.js.org/guides/tree-shaking/
A quote from the above is directly responsive to my original question:
Note that we did not import the square method from the src/math.js
module. That function is what's known as "dead code", meaning an
unused export that should be dropped.
Thus, even though the export is 'unused' it still ends up in the webpack bundle, hence, in the case here, it did add the second map to the same div, as experienced.
I will update this answer with confirmation when/if I achieve that.
Sorry for the false alarm.
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
add a comment |
I believe this was not at all an OpenLayers issue.
Furthermore, I believe my question didn't even touch on the underlying issue.
I think this is a webpack-related issue.
I think I need to better understand the concept of 'TreeShaking' and use of the sideEffects parameter in webpack.config.
Though I haven't yet tried this, I think that learning from the link below should help me resolve the issue:
https://webpack.js.org/guides/tree-shaking/
A quote from the above is directly responsive to my original question:
Note that we did not import the square method from the src/math.js
module. That function is what's known as "dead code", meaning an
unused export that should be dropped.
Thus, even though the export is 'unused' it still ends up in the webpack bundle, hence, in the case here, it did add the second map to the same div, as experienced.
I will update this answer with confirmation when/if I achieve that.
Sorry for the false alarm.
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
add a comment |
I believe this was not at all an OpenLayers issue.
Furthermore, I believe my question didn't even touch on the underlying issue.
I think this is a webpack-related issue.
I think I need to better understand the concept of 'TreeShaking' and use of the sideEffects parameter in webpack.config.
Though I haven't yet tried this, I think that learning from the link below should help me resolve the issue:
https://webpack.js.org/guides/tree-shaking/
A quote from the above is directly responsive to my original question:
Note that we did not import the square method from the src/math.js
module. That function is what's known as "dead code", meaning an
unused export that should be dropped.
Thus, even though the export is 'unused' it still ends up in the webpack bundle, hence, in the case here, it did add the second map to the same div, as experienced.
I will update this answer with confirmation when/if I achieve that.
Sorry for the false alarm.
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
I believe this was not at all an OpenLayers issue.
Furthermore, I believe my question didn't even touch on the underlying issue.
I think this is a webpack-related issue.
I think I need to better understand the concept of 'TreeShaking' and use of the sideEffects parameter in webpack.config.
Though I haven't yet tried this, I think that learning from the link below should help me resolve the issue:
https://webpack.js.org/guides/tree-shaking/
A quote from the above is directly responsive to my original question:
Note that we did not import the square method from the src/math.js
module. That function is what's known as "dead code", meaning an
unused export that should be dropped.
Thus, even though the export is 'unused' it still ends up in the webpack bundle, hence, in the case here, it did add the second map to the same div, as experienced.
I will update this answer with confirmation when/if I achieve that.
Sorry for the false alarm.
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
answered Nov 21 '18 at 2:55
Steve WSteve W
17617
17617
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%2f53403350%2fopenlayers-5-multiple-map-viewports-when-multiple-maps-are-defined-with-same-ta%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
