elasticrash / angular.io.mapviewer Goto Github PK

I really appreciate you testing this out with an Angular CLI application. If possible, would you have time to write a small README that involves importing ngx.leaflet into an existing project. We are trying to switch away from Google Maps over to Leaflet as it is more responsive when loading in map markers. Specifically I am interested what I need to import in:

app.module

• any component in which we wish to show a map.

Thanks for your time / hard work!

Great work on the angular2 Leaflet component, want to try it out and wasn't able to add a component to my angular2 app following the basic documentation.

I want to see how this example app works and unfortunately not able to start up. Any help is appreciated!

I'm running the example app off angular-cli-example branch

npm start gives the following error.

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: b1a33d3995448eee78c8                                                               
Time: 36141ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 72.9 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 57.7 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.24 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /home/jonathan/Documents/Github/Angular.io.MapViewer/node_modules/ngx.leaflet.components/node_modules/@angular/core/core.d.ts, resolving symbol ngxLeafletModule in /home/jonathan/Documents/Github/Angular.io.MapViewer/node_modules/ngx.leaflet.components/ngx.leaflet.module.ts, resolving symbol ngxLeafletModule in /home/jonathan/Documents/Github/Angular.io.MapViewer/node_modules/ngx.leaflet.components/ngx.leaflet.module.ts
webpack: Failed to compile.

any ideas?

Thanks!

hi there ! 'm having trouble to display the map of the example. I'm using the "countries.json" file, and this is my code. I'm getting the "geojson object seems to be undefined" error. The json is loading fine, because i can see it in the debugger but won't load the map.

map.component.html

 <leaf-element [minZoom]=0 [zoom]=1 [layerControl]=true>
	<zoom-control></zoom-control>
	<scale-control></scale-control>
    <geojson-element [geojson]='countries'></geojson-element>
</leaf-element>

map.component.ts

@Component({ selector: 'map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'], providers: [NodeService, PositionService, CandTLeafletService, MapService], }) export class MapComponent { title = 'Crear o Modiciar'; countries: any; constructor(private route: ActivatedRoute, private mapService: MapService) {} ngOnInit() { this.getMap(); } getMap():void{ this.mapService.getMapData().subscribe( countries => this.saveMap(countries), error => console.log(<any>error)); } saveMap(countries):void { this.countries = countries; }

map.service.ts
@Injectable() export class MapService { constructor(private http: Http) { } getMapData (): Observable<any> { return this.http.get("./countries.json") .map(this.extractData) .catch(this.handleError); } private handleError (error: Response | any) { // In a real world app, we might use a remote logging infrastructure let errMsg: string; if (error instanceof Response) { const body = error.json() || ''; const err = body.error || JSON.stringify(body); errMsg = ${error.status} - ${error.statusText || ''} ${err}; } else { errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Observable.throw(errMsg); } private extractData(res: Response) { let body = res.json(); return body || { }; } }

Thanks !