I am using map to show riders while driving. Map is showing location as a marker on Map. But my map is not updating after data updated in mongodb. I am using forestadmin and node js. In forestadmin, I am using smartview where I will have to use ember.js. I am showing leaflet OpenStreetMap map.
here is the javascript I am using:
export default Component.extend(SmartViewMixin, {
store: service(),
tagName: "",
map: null,
loaded: false,
init(...args) {
this._super(...args);
this.loadPlugin();
},
didInsertElement() {
this.displayMap();
},
onRecordsChange: observer("records", function () {
this.displayMap();
}),
loadPlugin() {
scheduleOnce("afterRender", this, () => {
$.getScript(
"//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js",
() => {
$.getScript(
"//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js",
() => {
this.set("loaded", true);
this.displayMap();
}
);
}
);
const headElement = document.getElementsByTagName("head")[0];
const cssLeafletLink = document.createElement("link");
cssLeafletLink.type = "text/css";
cssLeafletLink.rel = "stylesheet";
cssLeafletLink.href =
"//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css";
headElement.appendChild(cssLeafletLink);
const cssDrawLink = document.createElement("link");
cssDrawLink.type = "text/css";
cssDrawLink.rel = "stylesheet";
cssDrawLink.href =
"//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css";
headElement.appendChild(cssDrawLink);
});
},
displayMap() {
if (!this.loaded) {
return;
}
if (this.map) {
this.map.off();
this.map.remove();
this.map = null;
}
const markers_arr = [];
this.records.forEach(function (record) {
markers_arr.push([
record.get("forest-latitude"),
record.get("forest-longitude"),
record.get("id"),
record.get("forest-userId.forest-email"),
record.get("forest-userId.forest-bikeModel"),
record.get("forest-userId.forest-bikeRegNo"),
record.get("forest-userId.forest-phone"),
]);
});
var map = L.map("map").setView(
new L.LatLng(markers_arr[0][0], markers_arr[0][1]),
7
);
const osmUrl =
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png";
const osmAttrib =
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>';
const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
map.addLayer(osm);
var markers = [];
markers_arr.forEach(function (mark) {
var foo = "ID: "+mark[2] + "\n <br>Email: " + mark[3]+ "\n <br>Phone: " + mark[6]+ "\n <br>Bike Model: " + mark[4] + "\n <br>Bike #: " + mark[5]
var marker1 = L.marker([mark[0], mark[1]] )
.addTo(map)
.bindPopup(foo);
markers.push(marker1);
marker1.on("mouseover", function (ev) {
marker1.openPopup();
});
});
function markerFunction(id) {
for (var i in markers) {
var markerID = markers[i].options.title;
if (markerID == id) {
markers[i].openPopup();
}
}
}
},
});
and here is the HTML:
<style>
#map {
width: 100%;
height: 100%;
z-index: 4;
}
</style>
<div id="map"></div>
I also use fetchRecord in HTML but it not updating latest data.
<button >
Refresh data
</button>
Help me 🙏🏻🙏🏻🙏🏻
