en utilisant Leaflet.Graticule avec directive angulaire-leaflet

Je n'arrive pas à comprendre comment intégrer Leaflet.Graticule dans une application ui-leaflet/angular-leaflet-directive. Tout pointeur sur la façon dont cela devrait être fait serait très apprécié.en utilisant Leaflet.Graticule avec directive angulaire-leaflet

EDIT: Pour prolonger la réponse de iH8 un peu, je devais aussi ajouter une entrée à la section Remplacements dans mon bower.json:

"overrides": { 
"leaflet.Graticule": { 
    "main": [ 
    "src/L.Graticule.js" 
    ] 
}

}

Source

2016-03-10 Leif Jantzen

Injecter leafletData dans votre contrôleur et l'utiliser est getMap promesse de saisir l'instance L.Map et ajoutez le graticule:

angular.module('App', [ 
 
    'ui-leaflet' 
 
]); 
 

 
angular.module('App').controller('Controller', [ 
 
      'leafletData', 
 
    function (leafletData) { 
 
     leafletData.getMap().then(function (map) { 
 
     L.graticule().addTo(map); 
 
     }); 
 
    } 
 
]);

body { 
 
    margin: 0; 
 
} 
 

 
html, body, .leaflet-container { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html ng-app="App"> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
    <script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
 
    <script type="application/javascript" src="//rawgit.com/turban/Leaflet.Graticule/master/L.Graticule.js"></script> 
 
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
 
    <script type="application/javascript" src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script> 
 
    <script type="application/javascript" src="//rawgit.com/angular-ui/ui-leaflet/master/dist/ui-leaflet.js"></script> 
 
    </head> 
 
    <body ng-controller="Controller"> 
 
    <leaflet></leaflet> 
 
    </body> 
 
</html>

Source

2016-03-10 14:45:06 iH8

Merci. Je ne savais pas que c'était si facile. –

en utilisant Leaflet.Graticule avec directive angulaire-leaflet

Répondre

Questions connexes