fegyi001 / mangol Goto Github PK
View Code? Open in Web Editor NEWMaps created with Angular & OpenLayers using Material design
Home Page: http://188.166.116.137/mangol/
Maps created with Angular & OpenLayers using Material design
Home Page: http://188.166.116.137/mangol/
When adding or removing layers with mangolService.layersSetLayers() , they are being added to a map, but not to layertree, so you can't control visibility later.
(node:338454) UnhandledPromiseRejectionWarning: Error: The target entry-point "mangol" has missing dependencies:
- ol/geom/GeometryType
at TargetedEntryPointFinder.findEntryPoints (file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:941:13)
at file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1264:33
at SingleProcessExecutorSync.doExecute (file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1573:23)
at file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1594:35
at SyncLocker.lock (file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1765:14)
at SingleProcessExecutorSync.execute (file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:1594:19)
at mainNgcc (file:/.../node_modules/@angular/compiler-cli/bundles/chunk-NALI3EFD.js:2103:19)
at Module.process (file:/.../node_modules/@angular/compiler-cli/bundles/ngcc/index.js:34:10)
at NgccProcessor.processModule (/.../node_modules/@ngtools/webpack/src/ngcc_processor.js:171:27)
at /.../node_modules/@ngtools/webpack/src/ivy/host.js:150:18
after upgrading from version 9.1.10-0.3 to 12.2.1
Hello.
I tried to use mangol with @angular/[email protected], but it got the following error.
ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /Users/me/git/study/blah-map/node_modules/mangol/node_modules/@angular/core/core.d.ts, resolving symbol MangolRootModule in /Users/me/git/study/blah-map/node_modules/mangol/src/lib/modules/_index.ts, resolving symbol MangolRootModule in /Users/me/git/study/blah-map/node_modules/mangol/src/lib/modules/_index.ts
webpack: Failed to compile.
It is too short for me. I tried the npm version,the height is changed by the window size ,but i need to do some changes.
Measure a line in Mangol and do the same in QGIS/Google Earth - the measurement in Mangol is much longer than in other softwares with the same projection.
Hello,When I use the 'ol.format.filter' to get spatial query,I got an error:"export 'default' (imported as 'filter2') was not found in 'ol/format/filter',has anyone got this error too?
Thank you for that great repo. Would love to see basic measurements like rectangle or lines
[at-loader] Checking finished with 3 errors
(node:50765) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
1243 modules
WARNING in ./node_modules/mangol/node_modules/@angular/core/esm5/core.js
6558:15-36 Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/mangol/node_modules/@angular/core/esm5/core.js
6578:15-102 Critical dependency: the request of a dependency is an expression
ERROR in [at-loader] ./node_modules/mangol/node_modules/@types/openlayers/index.d.ts:7307:48
TS2694: Namespace 'ol' has no exported member 'EventsListenerFunctionType'.
ERROR in [at-loader] ./node_modules/mangol/node_modules/@types/openlayers/index.d.ts:7319:50
TS2694: Namespace 'ol' has no exported member 'EventsListenerFunctionType'.
ERROR in [at-loader] ./node_modules/mangol/node_modules/@types/openlayers/index.d.ts:7329:48
TS2694: Namespace 'ol' has no exported member 'EventsListenerFunctionType'.
webpack: Failed to compile.
openlayers ^4.6.6
Hi, this is not a problem, I would like to know some way to dynamically display in console the visibility of the layers. Thanks for the answer.
When I try to use Mangol in a lazy loaded module I run into this issue:
ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded.
If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
The re-import is non-fatal when it does not happen in a lazy loaded module. However, in this case <mangol>
cannot be used in the template. of a lazy loaded module component. So as a workaround:
ComponentFactoryResolver
and add it to the ViewContainerRef
of the component.However, this is quite an ugly workaround, as far as I know, non-root Angular modules should never import the BrowserModule.
which angular version u use for this project. why not using latest angular version 4.0?
Hi!
this.config.map.getView() returns "it's not a function".
How to access getView() from config object to center the map after initialization.
E.g. center and zoom after markers have loaded.
Thanks!
I tried to follow the manual to install the plugin but end up with that plot of errors. I think I missed something pretty obvious but I do not know what I shall do to make it work properly.
Could anybody help?
ERROR in Error: Metadata version mismatch for module xxxxx/node_modules/mangol/node_modules/@angular/core/core.d.ts, found version 4, expec ted 3, resolving symbol MangolModule in xxxxx/node_modules/mangol/src/lib/modules/_index.ts, resolving symbol MangolModule in xxxxxx/node_modules/mangol/src/lib/modules/_index.ts at Error (native) at syntaxError (xxxxx\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) at simplifyInContext (xxxx\node_modules\@angular\compiler\bundles\compiler.umd.js:25111:23) at StaticReflector.simplify (xxxx\node_modules\@angular\compiler\bundles\compiler.umd.js:25123:13) at StaticReflector.annotations (xxxx\node_modules\@angular\compiler\bundles\compiler.umd.js:24553:41) at _getNgModuleMetadata (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at includeLazyRouteAndSubRoutes (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:66:25) at Array.reduce (native) at Object.listLazyRoutesOfModule (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_impl.js:54:36) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (xxxxx\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (xxxx\node_modules\@ngtools\webpack\src\plugin.js:212:44) at _donePromise.Promise.resolve.then.then.then.then.then (xxxxx\node_modules\@ngtools\webpack\src\plugin.js:448:24) at process._tickCallback (internal/process/next_tick.js:109:7)
We're facing all kind of strange errors after upgrading from Mangol v0.3.6 to v0.7.9.
I suspect it is because our application needs to stay in Angular4 and Mangol moved to Angular5.
Which version of Mangol moved to Angular5? So we can get its previous version?
Hello
I am trying to setup mangol in our angular2 project. We are using webpack to build clientside bundles. But we don't ue angular-cli, so there is no angular-cli.json file.
In vendor.browser.ts I have added lines:
import "openlayers/dist/ol.js";
import "proj4/dist/proj4.js";
import "jspdf/dist/jspdf.min.js";
And I see it in rendered vendor.js : https://www.screencast.com/t/Gweemn0oquW6
However I am getting this exception:
error_handler.js:46 EXCEPTION: Uncaught (in promise): ReferenceError: ol is not defined ErrorHandler.handleError @ error_handler.js:46 next @ application_ref.js:298 schedulerFn @ async.js:89 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:81 onError @ ng_zone.js:123 onHandleError @ ng_zone_impl.js:65 ZoneDelegate.handleError @ zone.js:207 Zone.runGuarded @ zone.js:113 _loop_1 @ zone.js:379 drainMicroTaskQueue @ zone.js:386 error_handler.js:51 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:51 next @ application_ref.js:298 schedulerFn @ async.js:89 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:81 onError @ ng_zone.js:123 onHandleError @ ng_zone_impl.js:65 ZoneDelegate.handleError @ zone.js:207 Zone.runGuarded @ zone.js:113 _loop_1 @ zone.js:379 drainMicroTaskQueue @ zone.js:386 error_handler.js:52 Error: Uncaught (in promise): ReferenceError: ol is not defined at resolvePromise (http://localhost:53490/polyfills.bundle.js:7444:31) at http://localhost:53490/polyfills.bundle.js:7421:13 at ZoneDelegate.invoke (http://localhost:53490/polyfills.bundle.js:7218:28) at Object.onInvoke (http://localhost:53490/vendor.bundle.js:36760:37) at ZoneDelegate.invoke (http://localhost:53490/polyfills.bundle.js:7217:34) at Zone.run (http://localhost:53490/polyfills.bundle.js:7111:43) at http://localhost:53490/polyfills.bundle.js:7477:57 at ZoneDelegate.invokeTask (http://localhost:53490/polyfills.bundle.js:7251:37) at Object.onInvokeTask (http://localhost:53490/vendor.bundle.js:36751:37)
Do you have any ideas?
Thanks. Renat
I added mangol to an angular2/typescript project with webpack but not with angular_cli. I added
import 'openlayers/dist/ol.js';
import 'proj4/dist/proj4.js';
import 'jspdf/dist/jspdf.min.js';
to vendor.ts which is specified as an entry point in the webpack.config.json.
After building I'm getting the following errors:
.//mangol/src/lib/modules/_index.ts/mangol/src/lib/_index.ts 2:0-33
Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/modules/_index.ts Unexpected character '@' (21:0)
You may need an appropriate loader to handle this file type.
| ];
|
| @NgModule({
| imports: [
| MangolMapModule.forRoot(),
@ ./
@ .//mangol/index.ts/mangol/src/lib/core/map.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts
errors
./
Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/map.ts Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| export class MangolMap extends ol.Map {
|
| options: any;
|
| layers: MangolLayer[];
@ .//mangol/src/lib/core/_index.ts 1:0-22/mangol/src/lib/_index.ts
@ ./
@ .//mangol/index.ts/mangol/src/lib/core/layergroup.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts
errors
./
Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/layergroup.ts Unexpected token (3:8)
You may need an appropriate loader to handle this file type.
| export class MangolLayergroup {
|
| name: string;
| children: any[];
| expanded: boolean;
@ .//mangol/src/lib/core/_index.ts 2:0-29/mangol/src/lib/_index.ts
@ ./
@ .//mangol/index.ts/mangol/src/lib/core/layer.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts
errors
./
Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/core/layer.ts Unexpected token (3:8)
You may need an appropriate loader to handle this file type.
| export class MangolLayer {
|
| name: string;
| layer: any;
| opacity: number;
@ .//mangol/src/lib/core/_index.ts 3:0-24/mangol/src/lib/_index.ts
@ ./
@ .//mangol/index.ts/mangol/src/lib/services/map.service.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts
errors
./
Module parse failed: /zaalzoeker_web_aspnetcore/src/ZaalzoekerWeb/node_modules/mangol/src/lib/services/map.service.ts Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
| import { MangolMap } from '../core/_index';
|
| @Injectable()
| export class MangolMapService {
| maps: MangolMap[];
@ .//mangol/src/lib/services/_index.ts 1:0-30/mangol/src/lib/_index.ts
@ ./
@ ./~/mangol/index.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/main.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./ClientApp/main.ts
If you need any other info, shoot!
Fullscreen mode does not have same layers settings (on/off, opacity settings) as it's 'parent' component and vice versa. It would have been nice to keep state between those modes intact.
Thank you anyway for this great project.
I'm trying to add a new tile layer to the map, which seems a very basic function and I believe mangol supports that (correct?), but so far I haven't found any documentation on how to do that. I've tried:
mangolConfig
filemanglService.setconfig()
manglService.layersSetLayers()
but I don't know how to use it, there is zero documentation for this function and its signature makes no sense, why it expects MangoLayer[]
? I think it should respect the layers definition from mangolConfig
where you can have MangoLayer
and/or MangolLayerGroup
. Nonetheless I tried a few times (including pass in a MangolLayer object) using this function but it is not working.Any ideas would be appreciated!
I tried to show popups with the coordinates on the mangol map when clicking but I could not. Do you know any way to do it?
Hello,
I'm having strange styling issue, wonder if you can help. When I'm importing mangol styles in my root styles (i'm using angular-cli project) it then messes up with my other Material Design components. If I'm trying to import mangol styles in component where I'm actually using mangol, it has no effect.
I set "noImplicitAny": true
in my tsconfig.json
to enforce type declarations.
Line 45 of node_modules/mangol/src/lib/modules/print/print.component.ts
Error: TS7006: Parameter 'event' implicitly has an 'any' type.
map.once('postcompose', function (event)
Should be:
map.once('postcompose', function (event: any)
After running the example in angular 6, I get this error:
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'mangol' in '/Users/{{userName}}/workspace/mangol/example_project/src/app'
any ideas how to solve this ?
Hi there,
When attempting to add mangol to my projects ngmodule imorts i get an "Error encountered resolving symbol values statically whilst import Mangol"
This only happens when doing the ng module import, and just doing import { MangolModule } from 'mangol'; at the top has no issue running my application.
Running using angular cli and ng server
Package.json dependencies
"dependencies": { "@angular/animations": "^4.2.4", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "d3-ng2-service": "^1.16.1", "mangol": "^0.4.3", "ng-bootstrap": "^1.6.3", "ngx-bootstrap": "^1.9.3", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }
Output
...
Date: 2017-09-15T15:14:11.777Z
Hash: e26aa810aacbd2de6b7f
Time: 3265ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 162 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]
ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /repositories/saas_stack/test-online/node_modules/mangol/node_modules/@angular/core/core.d.ts, resolving symbol MangolModule in /repositories/saas_stack/test-online/node_modules/mangol/src/lib/modules/_index.ts, resolving symbol MangolModule in /repositories/saas_stack/test-online/node_modules/mangol/src/lib/modules/_index.ts
at positionalError (/repositories/saas_stack/test-online/node_modules/@angular/compiler/bundles/compiler.umd.js:25104:35)
at simplifyInContext (/repositories/saas_stack/test-online/node_modules/@angular/compiler/bundles/compiler.umd.js:24947:27)
at StaticReflector.simplify (/repositories/saas_stack/test-online/node_modules/@angular/compiler/bundles/compiler.umd.js:24961:13)
at StaticReflector.annotations (/repositories/saas_stack/test-online/node_modules/@angular/compiler/bundles/compiler.umd.js:24391:41)
at _getNgModuleMetadata (/repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (/repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
at /repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27
at Array.reduce (native)
at _extractLazyRoutesFromStaticModule (/repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (/repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/repositories/saas_stack/test-online/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (/repositories/saas_stack/test-online/node_modules/@ngtools/webpack/src/plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (/repositories/saas_stack/test-online/node_modules/@ngtools/webpack/src/plugin.js:443:24)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.
Unfortunately new to angular so this may be a dumb issue, if so i apologise in advance.
Hi!
Using angular-cli and running ng build --prod will give error:
ERROR in Internal error: unknown identifier {}
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/usr/Projects/mangol/src'
@ ./src/main.ts 5:0-81
@ multi ./src/main.ts
It doesn't happen with ng build --aot=false --prod
Any solutions?
Hi,
After installing the library and inserting the tags I get an error like the one below. I believe it is due to the state not being retrieved/ posted into the ngrx store. In the application there is already an ngrx store so I would expect to have to integrate the reducers into the application wide store. I cannot see any guidance as to whether this is possible and if it is then how it could be done.
Can anyone help/ advise?
ERROR TypeError: Cannot read property 'hasSidebar' of undefined
at vendor.js:363364
at MapSubscriber.project (vendor.js:278976)
Thanks,
Paul
When I try to compile in Angular 8 with Ivy I get these messages:
WARNING in Entry point 'mangol' contains deep imports into './node_modules/ol/layer/Base', './node_modules/ol/Feature', './node_modules/ol/geom/Point', './node_modules/ol/layer/Vector', './node_modules/ol/source/Vector', './node_modules/ol/style/Fill', './node_modules/ol/style/Style', './node_modules/ol/style/Text', './node_modules/ol/control/ScaleLine', './node_modules/ol/Map', './node_modules/ol/layer/Tile', './node_modules/ol/source/OSM', './node_modules/ol/View', './node_modules/ol/style/Stroke', './node_modules/ol/style/Circle', './node_modules/ol/interaction/Draw', './node_modules/ol/format/GeoJSON', './node_modules/ol/geom/GeometryType'.
This is probably not a problem, but may cause the compilation of entry points to be out of order.
ERROR in Node does not exist: ./node_modules/mangol
When I do not compile using Ivy, the problem does not occur.
Is there any solution/workaround for this? What are your plans regarding Ivy support?
Can you please provide me an example of the implementation?
Thanks in advance!
Angular: 5.1.1
get this error when run ng serve after following "Use as npm library"
found this on angular/angular-cli#8284
... have TS files in your node_modules. This really goes against how libraries should be packaged: libraries should never ship their source .ts files.
The reason for this rule is that the TypeScript version your app isn't necessarily the same as the TS version your library uses. Different versions of TS can produce different output, and give different errors for the same input. They don't even support the same language features. So packaging libraries with TS sources will always break someone's project. ...
maybe this is the problem ?!?
angular-cli: 1.4.9 fixed problem
I think Mangol uses these deprecated dependencies:
Would be good if the next version would use the newer dependencies.
Error: Unexpected value 'MangolModule' imported by the module 'MapModule'. Please add a @NgModule annotation.
Hi, in previous versions I was definitely able to create multiple instances of mangol on same page. It seems like you can't do it anymore in recent version. Is that correct?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.