Use openlayers extent with angular












0















I use angular 6 with openlayers 5.1.3. I try to combine the extent of two vector layers and then fit the view of the map.



I do the following



import Extent from 'ol/interaction/Extent.js';

olextent: Extent;

//then in ngOnInit

ngOnInit() {

  this.olextent = new Extent();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then create an empty extent and extent it with the layer extents



ext = this.olextent.createEmpty(); 

ext.extend(this.olextent, relatedext);

ext.extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(ext, {size:size, duration: 1500});


This code looks normal to me, but I get this.olextent.createEmpty is not a function and it does not work.



How can I fix this?






angular openlayers extent







share|improve this question


















  • 1





    You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

    – Mike
    Nov 19 '18 at 21:59











  • Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

    – codebot
    Nov 20 '18 at 12:41
















0















I use angular 6 with openlayers 5.1.3. I try to combine the extent of two vector layers and then fit the view of the map.



I do the following



import Extent from 'ol/interaction/Extent.js';

olextent: Extent;

//then in ngOnInit

ngOnInit() {

  this.olextent = new Extent();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then create an empty extent and extent it with the layer extents



ext = this.olextent.createEmpty(); 

ext.extend(this.olextent, relatedext);

ext.extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(ext, {size:size, duration: 1500});


This code looks normal to me, but I get this.olextent.createEmpty is not a function and it does not work.



How can I fix this?






angular openlayers extent







share|improve this question


















  • 1





    You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

    – Mike
    Nov 19 '18 at 21:59











  • Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

    – codebot
    Nov 20 '18 at 12:41














0












0








0








I use angular 6 with openlayers 5.1.3. I try to combine the extent of two vector layers and then fit the view of the map.



I do the following



import Extent from 'ol/interaction/Extent.js';

olextent: Extent;

//then in ngOnInit

ngOnInit() {

  this.olextent = new Extent();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then create an empty extent and extent it with the layer extents



ext = this.olextent.createEmpty(); 

ext.extend(this.olextent, relatedext);

ext.extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(ext, {size:size, duration: 1500});


This code looks normal to me, but I get this.olextent.createEmpty is not a function and it does not work.



How can I fix this?






angular openlayers extent







share|improve this question














I use angular 6 with openlayers 5.1.3. I try to combine the extent of two vector layers and then fit the view of the map.



I do the following



import Extent from 'ol/interaction/Extent.js';

olextent: Extent;

//then in ngOnInit

ngOnInit() {

  this.olextent = new Extent();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then create an empty extent and extent it with the layer extents



ext = this.olextent.createEmpty(); 

ext.extend(this.olextent, relatedext);

ext.extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(ext, {size:size, duration: 1500});


This code looks normal to me, but I get this.olextent.createEmpty is not a function and it does not work.



How can I fix this?






angular openlayers extent




angular openlayers extent






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 19 '18 at 21:30









codebotcodebot

14711




14711








  • 1





    You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

    – Mike
    Nov 19 '18 at 21:59











  • Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

    – codebot
    Nov 20 '18 at 12:41














  • 1





    You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

    – Mike
    Nov 19 '18 at 21:59











  • Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

    – codebot
    Nov 20 '18 at 12:41








1




1





You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

– Mike
Nov 19 '18 at 21:59





You are importing from the wrong module. See this example openlayers.org/en/latest/examples/earthquake-clusters.html for the correct import and use of createEmpty and extend.

– Mike
Nov 19 '18 at 21:59













Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

– codebot
Nov 20 '18 at 12:41





Thanks but if I import from import extent from 'ol/extent.js'; I get a warning "export 'default' (imported as 'extent') was not found in 'ol/extent.js

– codebot
Nov 20 '18 at 12:41












1 Answer
1






active

oldest

votes


















1














I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)



import {createEmpty, extend} from 'ol/extent.js';



//then in ngOnInit

ngOnInit() {

  this.olextent = createEmpty();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then extent empty extent with the layer extents



extend(this.olextent, relatedext);

extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});





share|improve this answer
























  • Thanks Mike, clean and self-explanatory code. It worked.

    – codebot
    Nov 20 '18 at 15:23











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
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382916%2fuse-openlayers-extent-with-angular%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









1














I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)



import {createEmpty, extend} from 'ol/extent.js';



//then in ngOnInit

ngOnInit() {

  this.olextent = createEmpty();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then extent empty extent with the layer extents



extend(this.olextent, relatedext);

extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});





share|improve this answer
























  • Thanks Mike, clean and self-explanatory code. It worked.

    – codebot
    Nov 20 '18 at 15:23
















1














I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)



import {createEmpty, extend} from 'ol/extent.js';



//then in ngOnInit

ngOnInit() {

  this.olextent = createEmpty();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then extent empty extent with the layer extents



extend(this.olextent, relatedext);

extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});





share|improve this answer
























  • Thanks Mike, clean and self-explanatory code. It worked.

    – codebot
    Nov 20 '18 at 15:23














1












1








1







I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)



import {createEmpty, extend} from 'ol/extent.js';



//then in ngOnInit

ngOnInit() {

  this.olextent = createEmpty();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then extent empty extent with the layer extents



extend(this.olextent, relatedext);

extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});





share|improve this answer













I think this is what you may be trying to achieve (unless you have some interaction processing elsewhere in your code)



import {createEmpty, extend} from 'ol/extent.js';



//then in ngOnInit

ngOnInit() {

  this.olextent = createEmpty();

}



//then get the extent of the 2 layers

let relatedext = this.relatedsource.getExtent();

let vectorext = this.vectorsource.getExtent(); 

//then extent empty extent with the layer extents



extend(this.olextent, relatedext);

extend(this.olextent, vectorext); 



//also create a size and use it with the extent to fit the map view



this.olmap.getView().fit(this.olextent, {size:size, duration: 1500});






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 20 '18 at 13:35









MikeMike

1,26327




1,26327













  • Thanks Mike, clean and self-explanatory code. It worked.

    – codebot
    Nov 20 '18 at 15:23



















  • Thanks Mike, clean and self-explanatory code. It worked.

    – codebot
    Nov 20 '18 at 15:23

















Thanks Mike, clean and self-explanatory code. It worked.

– codebot
Nov 20 '18 at 15:23





Thanks Mike, clean and self-explanatory code. It worked.

– codebot
Nov 20 '18 at 15:23


















draft saved

draft discarded




















































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.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382916%2fuse-openlayers-extent-with-angular%23new-answer', 'question_page');
}
);

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







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I have successfully enabled authorization on MongoDB and I have created an account on the admin database and then I created an account for my database called test. The following connection string to connect to my test database works successfully: mongo --host 192.168.17.52 --port 27017 -u user1 -p password --authenticationDatabase test Only problem I have now is, I cannot execute commands such as: show dbs. I get the following error when I try to do so: "errmsg" : "not authorized on admin to execute command { listDatabases: 1.0, lsid: { id: UUID("a1d5bc0d-bc58-485e-b232-270758a89455") }, $db: "admin...
Read more

How to fix TextFormField cause rebuild widget in Flutter

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I've got the same issue at #9280. I tried all solutions from that topic with/without GlobalKey for Scaffold and Form but the problem wasn't fixed. I tried to build a authentication form with login and signup. But the keyboard doesn't show when I tap the TextFormField at the first time. Then I try to input some letter from physical keyboard, the widget is rebuilt. Like this: login screen Nothing to be log when I run flutter run --verbose, so I logged manually. Every tapping on field, the widget called dispose -> init -> build. [√] Flutter (Channel beta, v1.0.0, on Microsoft Windows [Version 10.0.17763.195], ...
Read more

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

Image
1 I tried to upgrade a yummy sandwich made of two test slices (@JsonTest and @JdbcTest in my case, crunchy test code in between) adding spring boot 2.1 flavour to it. But it seems it was not much of a success. I cannot annotate my tests with many @...Test since they are now each bringing their own XxxTestContextBootstrapper. It used to work when they all used same SpringBootTestContextBootstrapper. @RunWith(SpringRunner.class) @JdbcTest @JsonTest public class Test { @Test public void test() { System.out.printn("Hello, World !"); } } The error I get from BootstrapUtils is illegalStateException : Configuration error: found multiple declarations of @BootstrapWith for test class I understand I might be doing something wrong here but is there an easy way I could load both Json and Jdbc contex...
Read more