Hi Mapquest Team,
We are using mapquest in our WEB application and we have implemented marker which will have the css transform property rotateZ (ex:- transform: translate3d(755px, 283px, 0px) rotateZ(318deg)) where it will rotate the icon based on rotateZ property which we will be adding addionally to the transform property.
Here the problem is while we doing zoom in and zoom out events the position of the markers is resetting with the new "transfrom: translate3d(x, y, z)" property but removing the rotateZ() property. so the marker losses its direction
We have used below files in order to implement the functionality
CSS files
https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest-maps.css
https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.csshttps://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.62.0/L.Control.Locate.css
JS files
https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest-maps.js
https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.js
https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.62.0/L.Control.Locate.min.js
We are doing this application with angular 5, the below part is for creating multiple icons
this.mapService.multiCarMarker[this.validVehicleList[i]['imei']] = new L.icon({
iconUrl: '../../../assets/vehicles/vehicle_' + markerColors[i] + '.svg',
iconSize: [27, 50], // size of the icon
// shadowSize: [50, 64], // size of the shadow
iconAnchor: [10, 29], // point of the icon which will correspond to marker's location
popupAnchor: [0, 120], // point from which the popup should open relative to the iconAnchor
rotationAngle: ''
});
// This part is make the marker movable using moving marker js fiile
this.mapService.locateMultiMarker[imei] = L.Marker.movingMarker([start, start], [interpolationInterval]).addTo(this.mapService.mapObject)
// Here im setting marker in the layer
this.mapService.locateMultiMarker[imei].setIcon(this.mapService.multiCarMarker[imei]);
Please suggest me to resolve this issue
Hi Team,
Still facing the above problem in resetting marker rotation while zooming..I would be really appreciate if any one provide a solution for this.
Since the rotation is being removed on zoom events, I would try grabbing the rotation on zoomstart and re-setting the rotation on zoomend and see if/how that affects performance.
If that doesn't help, can you post a sample page showing the behavior?
Hi Brian
Apologize for the late reply, I have already tried that method by keep updating the rotation whith zoom start and zoom end events, But that didnt helpful you will clearly see the flickering the marker (back n forth position changing).
Here i have added a fiddle with the working example just do zoom events you can see the issue https://jsfiddle.net/GowthamNanda/1ndbwhvm/18/
Please let me know if you need any more details
Hi, Gowtham,
I played around with the code a little and, while it does visibly remove the marker from the map during the zoom, this code makes the re-rotation during the zoom much less visible.
map.on('zoomstart', function(){
hold = mapMarker._icon.style[L.DomUtil.TRANSFORM];
map.removeLayer(mapMarker);
});
map.on('zoomend', function(){
mapMarker.addTo(map);
mapMarker._icon.style[L.DomUtil.TRANSFORM] = hold;
});
Hey Brian,
Thanks for this suggestion, and my case i will have many markers on the map and if i approached this method all of them will be disappear and appear often, that will be not give pleasent look for the user. Could you please suggest to make it more stable and betterment then we would be really glad for that.
I have not created any rotating markers myself, other than working from your example. But these two plugins seem to have some fans.
https://github.com/shramov/leaflet-plugins/blob/master/examples/marker-r...
https://github.com/bbecquet/Leaflet.RotatedMarker