I’m adding many markers to a map, but I’m finding I have to scale the images of the markers with the zoom level of the map, and when the map is zoomed the image isn’t positioned where I think it is. How would I go about resolving this?
function CreateMap(data) {
if (data == null || data === undefined) {
alert("Couldn't load route coordinates");
}
else {
tt.setProductInfo("OMITTED", "0.1Alpha");
const map = tt.map({
key: "OMITTED",
container: "map",
center: data['center'],
zoom: 4
});
function NearAnotherStop(locationName, location) {
for (let nas = 0; nas < data['stops'].length; nas++) {
let nextLocationName = data['stops'][nas][0];
if (locationName == nextLocationName)
continue;
let nextLocation = new Array(data['stops'][nas][1], data['stops'][nas][2]);
let distance = get_distance(location, nextLocation);
if (distance < .2) {
console.log(locationName + " " + nextLocationName + " " + distance);
return true;
}
}
return false;
}
function AddMarkerToMap(stopName, markerLocation) {
const markerPopup = new tt.Popup({ offset: 35 });
let html = stopName + '<br>(' + markerLocation[0] + ', ' + markerLocation[1] + ')';
markerPopup.setHTML(html);
const markerElement = document.createElement("div")
markerElement.innerHTML += '<img class="map_marker" src="img/single_marker.svg" />'
const marker = new tt.Marker({
element: markerElement
});
if (NearAnotherStop(stopName, markerLocation)) {
marker.shouldCluster = true;
}
marker.setLngLat(new Array(markerLocation[0] + 6, markerLocation[1] - .5));
//marker.setLngLat(markerLocation);
marker.setPopup(markerPopup);
marker.addTo(map);
all_markers.push(marker);
//console.log("Added " + html + " to map");
}
function AddLine(routeName, startCoordinates, stopCoordinates) {
map.addLayer({
'id': routeName,
'type': 'line',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'properties': {},
'coordinates': [
startCoordinates,
stopCoordinates
]
}
}
]
}
},
'layout': {
'line-cap': 'square',
'line-join': 'miter'
},
'paint': {
'line-color': generate_random_hex_color(),
'line-width': 4
}
});
}
map.on('load', function () {
data['stops'].forEach(function (item, index, arr) {
AddMarkerToMap(item[0], new Array(item[1], item[2]))
});
data['coordinates'].forEach(function (item, index, arr) {
const routeName = "Route " + item[0] + " " + "Dispatching From " + item[1] + " Going To " + item[6] + " at " + item[7];
const startPoint = new Array(item[2], item[3]);
const endPoint = new Array(item[4], item[5]);
AddLine(routeName, startPoint, endPoint);
});
});
}
}
function generate_random_hex_color() {
let color = '#'
for(let i = 0; i < 6; i++)
{
color = color + sample(new Array('0', '1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'));
}
return color;
}
function sample(array) {
return array[Math.floor(Math.random() * array.length)];
}
function get_distance(pointOne, pointTwo) {
return Math.sqrt(Math.pow(pointTwo[0] - pointOne[0], 2) + Math.pow(pointTwo[1] - pointOne[1], 2))
}
let all_markers = new Array();
fetch("route_coordinates.json")
.then(data => data.json())
.then(json => {
console.log(json);
CreateMap(json);
});