Can't display the map about angular.io.mapviewer HOT 5 CLOSED

Your code is not formatted so, I can make easily sense of what you are doing exactly but it seems you have a service that loads the geojson file. I don't think this is going to work to be honest, thats why in the example I am using a resolver.

in theory it could work if you had an empty geojson object and then update it through the subscription. But I haven't implemented anything like that for the geojson object, only for the line and polygon object can be automatically be updated.

you can extend the geojson component with the functionality. And in the mean time i can put it on do to.

from angular.io.mapviewer.

Thanks, i implemented the resolver just like in the example and it works. Have two questions now:

1. The only thing that i see, are the countries outlines. How can i see the complete map just like in the example, with streets and things like that ?

2. Is there any chance to use OpenStreetMaps or other maps using the links to the servers ? Just like: http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer or 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', ?

Thanks a lot for your efforts !

from angular.io.mapviewer.

Sorry for the late response but yeah you can used openstreetmaps like I am doing in my other examples

<layer-element [slippyLayer]="'http://{s}.tile.osm.org/{z}/{x}/{y}.png'"></layer-element>

or just a wms service

<layer-element [wmsLayer]="'http://192.168.1.52:8080/geoserver/wms'" [name]="'cnt:post_codes'" [opacity]=0.3></layer-element>

I have written anything to support a MapServer Layer

from angular.io.mapviewer.

I'm getting errors with both codes. Maybe if you can make a example, because i can't figure out yours of Angular 4 and wms. With the wmsLayer line of code, i'm getting this.

ERROR Error: Uncaught (in promise): TypeError: map is undefined
addTo@http://localhost:4200/vendor.bundle.js:19702:3
LayerElement.prototype.ngOnInit@http://localhost:4200/vendor.bundle.js:98720:17
checkAndUpdateDirectiveInline@http://localhost:4200/vendor.bundle.js:11338:9
checkAndUpdateNodeInline@http://localhost:4200/vendor.bundle.js:12717:17
checkAndUpdateNode@http://localhost:4200/vendor.bundle.js:12685:16
debugCheckAndUpdateNode@http://localhost:4200/vendor.bundle.js:13314:38
debugCheckDirectivesFn@http://localhost:4200/vendor.bundle.js:13255:13
View_MapComponent_0/<@ng:///AppModule/MapComponent.ngfactory.js:37:5
debugUpdateDirectives@http://localhost:4200/vendor.bundle.js:13240:12
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12652:5
callViewAction@http://localhost:4200/vendor.bundle.js:12967:17
execComponentViewsAction@http://localhost:4200/vendor.bundle.js:12913:13
checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12658:5
callWithDebugContext@http://localhost:4200/vendor.bundle.js:13640:39
debugCheckAndUpdateView@http://localhost:4200/vendor.bundle.js:13180:12
ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.bundle.js:10749:54
RouterOutlet.prototype.activateWith@http://localhost:4200/vendor.bundle.js:48277:9
ActivateRoutes.prototype.placeComponentIntoOutlet@http://localhost:4200/vendor.bundle.js:47457:9
ActivateRoutes.prototype.activateRoutes@http://localhost:4200/vendor.bundle.js:47438:21
ActivateRoutes.prototype.activateChildRoutes/<@http://localhost:4200/vendor.bundle.js:47374:52
ActivateRoutes.prototype.activateChildRoutes@http://localhost:4200/vendor.bundle.js:47374:9
ActivateRoutes.prototype.activate@http://localhost:4200/vendor.bundle.js:47348:9
Router.prototype.runNavigate/</<@http://localhost:4200/vendor.bundle.js:46964:17
Observable.prototype.forEach/</subscription<@http://localhost:4200/vendor.bundle.js:115:21
SafeSubscriber.prototype.__tryOrSetError@http://localhost:4200/vendor.bundle.js:398:13
SafeSubscriber.prototype.next@http://localhost:4200/vendor.bundle.js:340:22
Subscriber.prototype._next@http://localhost:4200/vendor.bundle.js:278:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:53734:13
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:131616:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
ScalarObservable.prototype._subscribe@http://localhost:4200/vendor.bundle.js:53129:13
Observable.prototype._trySubscribe@http://localhost:4200/vendor.bundle.js:62:20
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:50:22
MapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:49560:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
subscribeToResult@http://localhost:4200/vendor.bundle.js:14669:20
MergeMapSubscriber.prototype._innerSub@http://localhost:4200/vendor.bundle.js:53721:18
MergeMapSubscriber.prototype._tryNext@http://localhost:4200/vendor.bundle.js:53718:9
MergeMapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:53701:13
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:53734:13
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:131616:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
ReduceSubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:51028:13
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
MergeMapSubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:53726:13
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
ArrayObservable.prototype._subscribe@http://localhost:4200/vendor.bundle.js:31114:13
Observable.prototype._trySubscribe@http://localhost:4200/vendor.bundle.js:62:20
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:50:22
MergeMapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:53676:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
ReduceOperator.prototype.call@http://localhost:4200/vendor.bundle.js:50983:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
MapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:49560:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
subscribeToResult@http://localhost:4200/vendor.bundle.js:14669:20
MergeMapSubscriber.prototype._innerSub@http://localhost:4200/vendor.bundle.js:53721:18
MergeMapSubscriber.prototype._tryNext@http://localhost:4200/vendor.bundle.js:53718:9
MergeMapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:53701:13
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:53734:13
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:131616:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:53734:13
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:131616:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
EverySubscriber.prototype.notifyComplete@http://localhost:4200/vendor.bundle.js:60240:9
EverySubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:60257:9
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
MergeMapSubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:53726:13
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
ArrayObservable.prototype._subscribe@http://localhost:4200/vendor.bundle.js:31114:13
Observable.prototype._trySubscribe@http://localhost:4200/vendor.bundle.js:62:20
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:50:22
MergeMapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:53676:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
EveryOperator.prototype.call@http://localhost:4200/vendor.bundle.js:60220:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
subscribeToResult@http://localhost:4200/vendor.bundle.js:14669:20
MergeMapSubscriber.prototype._innerSub@http://localhost:4200/vendor.bundle.js:53721:18
MergeMapSubscriber.prototype._tryNext@http://localhost:4200/vendor.bundle.js:53718:9
MergeMapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:53701:13
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
EverySubscriber.prototype.notifyComplete@http://localhost:4200/vendor.bundle.js:60240:9
EverySubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:60257:9
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
MergeMapSubscriber.prototype._complete@http://localhost:4200/vendor.bundle.js:53726:13
Subscriber.prototype.complete@http://localhost:4200/vendor.bundle.js:267:13
ArrayObservable.prototype._subscribe@http://localhost:4200/vendor.bundle.js:31114:13
Observable.prototype._trySubscribe@http://localhost:4200/vendor.bundle.js:62:20
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:50:22
MergeMapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:53676:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
EveryOperator.prototype.call@http://localhost:4200/vendor.bundle.js:60220:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
MergeMapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:53676:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
MapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:49560:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
subscribeToResult@http://localhost:4200/vendor.bundle.js:14669:20
MergeMapSubscriber.prototype._innerSub@http://localhost:4200/vendor.bundle.js:53721:18
MergeMapSubscriber.prototype._tryNext@http://localhost:4200/vendor.bundle.js:53718:9
MergeMapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:53701:13
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.bundle.js:53734:13
InnerSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:131616:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
MapSubscriber.prototype._next@http://localhost:4200/vendor.bundle.js:49589:9
Subscriber.prototype.next@http://localhost:4200/vendor.bundle.js:242:13
ScalarObservable.prototype._subscribe@http://localhost:4200/vendor.bundle.js:53129:13
Observable.prototype._trySubscribe@http://localhost:4200/vendor.bundle.js:62:20
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:50:22
MapOperator.prototype.call@http://localhost:4200/vendor.bundle.js:49560:16
Observable.prototype.subscribe@http://localhost:4200/vendor.bundle.js:47:13
subscribeToResult@http://localhost:4200/vendor.bundle.js:14669:20

Stack trace:
resolvePromise@http://localhost:4200/node_modules/zone.js/dist/zone.js:712:31 [angular]
resolvePromise@http://localhost:4200/node_modules/zone.js/dist/zone.js:683:17 [angular]
scheduleResolveOrReject/<@http://localhost:4200/node_modules/zone.js/dist/zone.js:760:17 [angular]
onInvokeTask@http://localhost:4200/vendor.bundle.js:4743:28 [angular]
ZoneDelegate.prototype.invokeTask@http://localhost:4200/node_modules/zone.js/dist/zone.js:397:17 [angular]
Zone.prototype.runTask@http://localhost:4200/node_modules/zone.js/dist/zone.js:165:28 [ => angular]
drainMicroTaskQueue@http://localhost:4200/node_modules/zone.js/dist/zone.js:593:25 []
g@http://localhost:4200/node_modules/core-js/client/shim.min.js:8:10016 []
F/<@http://localhost:4200/node_modules/core-js/client/shim.min.js:8:10138 []
k@http://localhost:4200/node_modules/core-js/client/shim.min.js:8:14293 []
MutationCallback*a.exports@http://localhost:4200/node_modules/core-js/client/shim.min.js:8:14426 []
@http://localhost:4200/node_modules/core-js/client/shim.min.js:8:9149 []
webpack_require@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:150 []
@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:1034 []
webpack_require@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:150 []
@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:314 []
@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:32 []
@http://localhost:4200/node_modules/core-js/client/shim.min.js:7:2 []`

BTW i don't know why the "Insert Code" format doesn't work for me...

from angular.io.mapviewer.

a layer-element needs a leaf-element as parent, i definitely put that in the docs
https://github.com/elasticrash/ngx.leaflet.component/wiki/layer-element

<leaf-element>
<layer-element [slippyLayer]="'http://{s}.tile.osm.org/{z}/{x}/{y}.png'"></layer-element>
</leaf-element>

from angular.io.mapviewer.