Créer un map avec angular 5 et leaflet js

Par chikara, il y a 8 ans

Javascript

Bonjour,
j'ai un problème avec mon map. J'utilise angular 5, leaflet , semantic-ui.
app.components.ts:

import { Component , OnInit } from '@angular/core'; import * as L from 'leaflet'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ title = 'app'; ngOnInit() { // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom. const map = L.map('map').setView([-18.8851432, 47.5361300], 6); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'MAP' }).addTo(map); } }

app.components.html

<div class="twelve wide column" id="map"> </div>

et j'ai suivi tous les config necessaires mais le map n'est pas affiché correctement

Image

2 réponses

Mohamed Bareche, il y a 8 ans

Bonjour,
As-tu ajouter ton leaflet.css dans les styles [ ] ou non ?

Mohamed Bareche, il y a 8 ans

Dans le fichier .angular-cli.json rajoute le lien vers ton fichier leaflet.css comme suit:
"styles": [
"styles.css",
"../node_modules/leaflet/dist/leaflet.css"
],