You can get leaflet to work in magic mirror quite easily. When you are creating your getDom function take the example from the tutorial as follows:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: Your Access token
}).addTo(this.mymap);
You will also need specify the size of the of the map window in your css file
.Your_Module_Name #mapid {
height: 500px;
width: 500px;
}
There is a bit of a bug with some of the map not loading, this can be fixed by listening for the DOM_OBJECTS_CREATED notification like so:
notificationReceived: function (notification, payload, sender) {
if (notification === "DOM_OBJECTS_CREATED") {
this.mymap.invalidateSize();
}
},
This forces a redraw of the map.
