I've been attempting to display a leaflet map within a div tag, but unfortunately it keeps getting displaced from the tag.
https://i.sstatic.net/4fNkj.png
Below is my angular directive implementation:
import L from 'leaflet';
import esri from 'esri-leaflet';
import 'leaflet/dist/leaflet.css';
class MapDirective {
constructor() {
this.resctrict = 'E';
this.controller = MapController;
}
link(scope, element) {
let map = L.map(element[0]).setView([51.505, -0.09], 8);
esri.tiledMapLayer({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
}).addTo(map);
}
/**
* @returns {MapDirective}
*/
static directiveFactory() {
return new MapDirective();
}
}
Here is a snippet of my HTML template code:
<h1>Integrating Leaflet Map</h1>
<div style="width: 500px; height: 500px">
<map></map>
</div>
I have attempted using the
map.invalidateSize();
as suggested in this thread on Stack Overflow, but with no success.
The complete project code can be accessed on GitHub.