rotateZ() css propertyMarker removing while doing zoom events

7 posts / 0 new
Last post
gowtham-nandan
rotateZ() css propertyMarker removing while doing zoom events

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


gowtham-nandan
Hi Team,

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.


MQBrianCoakley
Since the rotation is being

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?


gowtham-nandan
Hi Brian

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

 

 


MQBrianCoakley
Hi, Gowtham,

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;

});


gowtham-nandan
Hey Brian,

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.

 


MQBrianCoakley
I have not created any

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