Hi,
I have this site that I am trying to add to my angular but having trouble adding js file.
https://www.youtube.com/watch?v=F8dnYNTncoU&t=533s
I tried the following:
I added the style sheet and links in the index.html in angular
I added the scripts in the json file and I added the js file in the assests folder
I am trying to reference the js file in the ts file but I don't know how since it is not starting as a function.
the js file:
// default map layer
let map = L.map('map', {
layers: MQ.mapLayer(),
center: [35.791188, -78.636755],
zoom: 12
});
function runDirection(start, end) {
// recreating new map layer after removal
map = L.map('map', {
layers: MQ.mapLayer(),
center: [35.791188, -78.636755],
zoom: 12
});
var dir = MQ.routing.directions();
dir.route({
locations: [
start,
end
]
});
CustomRouteLayer = MQ.Routing.RouteLayer.extend({
createStartMarker: (location) => {
var custom_icon;
var marker;
custom_icon = L.icon({
iconUrl: 'img/red.png',
iconSize: [20, 29],
iconAnchor: [10, 29],
popupAnchor: [0, -29]
});
marker = L.marker(location.latLng, {icon: custom_icon}).addTo(map);
return marker;
},
createEndMarker: (location) => {
var custom_icon;
var marker;
custom_icon = L.icon({
iconUrl: 'img/blue.png',
iconSize: [20, 29],
iconAnchor: [10, 29],
popupAnchor: [0, -29]
});
marker = L.marker(location.latLng, {icon: custom_icon}).addTo(map);
return marker;
}
});
map.addLayer(new CustomRouteLayer({
directions: dir,
fitBounds: true
}));
}
// function that runs when form submitted
function submitForm(event) {
event.preventDefault();
// delete current map layer
map.remove();
// getting form data
start = document.getElementById("start").value;
end = document.getElementById("destination").value;
// run directions function
runDirection(start, end);
// reset form
document.getElementById("form").reset();
}
// asign the form to form variable
const form = document.getElementById('form');
// call the submitForm() function when submitting the form
form.addEventListener('submit', submitForm);