{"action":"created","issue":{"url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/883","labels_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/883/labels{/name}","comments_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/883/comments","events_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/883/events","html_url":"https://github.com/tombatossals/angular-leaflet-directive/issues/883","id":99801845,"number":883,"title":"Zoom in/out - map freeze issue","user":{"login":"dud3","id":5823644,"avatar_url":"https://avatars.githubusercontent.com/u/5823644?v=3","gravatar_id":"","url":"https://api.github.com/users/dud3","html_url":"https://github.com/dud3","followers_url":"https://api.github.com/users/dud3/followers","following_url":"https://api.github.com/users/dud3/following{/other_user}","gists_url":"https://api.github.com/users/dud3/gists{/gist_id}","starred_url":"https://api.github.com/users/dud3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dud3/subscriptions","organizations_url":"https://api.github.com/users/dud3/orgs","repos_url":"https://api.github.com/users/dud3/repos","events_url":"https://api.github.com/users/dud3/events{/privacy}","received_events_url":"https://api.github.com/users/dud3/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-08T13:18:49Z","updated_at":"2015-09-23T23:44:56Z","closed_at":null,"body":"## Specifications \r\nBrowser: Firefox 39.0\r\nLeaflet: 0.7.3\r\nLeaflet-draw: 0.2.3\r\nAngular: 1.3.15\r\n\r\n## Problem space\r\nJSON call to the coordinates and zoom property like:\r\n```\r\n$scope.center = {\r\n    lng: parseFloat(location.longitude),\r\n    lat: parseFloat(location.latitude),\r\n    zoom: parseInt(data.data.result.zoom_level)\r\n}\r\n```\r\nIn zoom out the map freezes.\r\n\r\n## Code\r\n```js\r\n\r\n// Get the location(marker).\r\nspotLocationsSvc.get({ spot_id: window.__G__server_data_spot_id }).then(function(data) {\r\n\r\n    $scope.submission.spot.location_name = data.data.result[0].location_name;\r\n\r\n    // Since we have multiple markers, we should push them all.\r\n    angular.forEach(data.data.result, function(location) {\r\n\r\n        leafletData.getMap().then(function(map) {\r\n\r\n            var drawnItems = $scope.controls.edit.featureGroup;\r\n            var coordinates = {lat: location.latitude, lng: location.longitude};\r\n\r\n            var layer = new L.Marker(coordinates);\r\n            drawnItems.addLayer(layer);\r\n\r\n            var _push_layer = coordinates;\r\n\r\n                // Push the leaflet_id first, so later on we\r\n                // can easily remove it from the map.\r\n                _push_layer.id = layer._leaflet_id;\r\n\r\n                // Push location id as well, so we can distinguish\r\n                // if the marker already existed or not, and make a call\r\n                // to the back-end to remove/modify the entity on the db.\r\n                _push_layer.location_id = location.id;\r\n\r\n                // And finally the spot_id, just in case.\r\n                _push_layer.spot_id = location.spot_id;\r\n\r\n            $scope.submission.spot.coordinates['marker'].push(_push_layer);\r\n\r\n            // Spot projection, zoom level and such...\r\n            spotProjectionSvc.get({ spot_id: window.__G__server_data_spot_id })\r\n                .then(function(data) {\r\n\r\n                // Fix for maps on hidden elements.\r\n                leafletData.getMap().then(function(map) {\r\n                    map.invalidateSize(false);\r\n                });\r\n\r\n                $scope.center = {\r\n                    lng: parseFloat(location.longitude),\r\n                    lat: parseFloat(location.latitude),\r\n                    zoom: parseInt(data.data.result.zoom_level)\r\n                }\r\n...\r\n```\r\n\r\n## Example\r\n* Video: https://drive.google.com/file/d/0B5C6s30Pt8vJeFhmVk1obzg4Tk0/view?usp=sharing\r\n* In action: http://app.yachtingsbest.com/spot/edit?string_id=Kenmore_Air4\r\n * email: test@gmail.com\r\n *  pwd: 123123123"},"comment":{"url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/comments/142762054","html_url":"https://github.com/tombatossals/angular-leaflet-directive/issues/883#issuecomment-142762054","issue_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/883","id":142762054,"user":{"login":"nmccready","id":583593,"avatar_url":"https://avatars.githubusercontent.com/u/583593?v=3","gravatar_id":"","url":"https://api.github.com/users/nmccready","html_url":"https://github.com/nmccready","followers_url":"https://api.github.com/users/nmccready/followers","following_url":"https://api.github.com/users/nmccready/following{/other_user}","gists_url":"https://api.github.com/users/nmccready/gists{/gist_id}","starred_url":"https://api.github.com/users/nmccready/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nmccready/subscriptions","organizations_url":"https://api.github.com/users/nmccready/orgs","repos_url":"https://api.github.com/users/nmccready/repos","events_url":"https://api.github.com/users/nmccready/events{/privacy}","received_events_url":"https://api.github.com/users/nmccready/received_events","type":"User","site_admin":false},"created_at":"2015-09-23T23:44:56Z","updated_at":"2015-09-23T23:44:56Z","body":"Ahh.. well I have some workaround with google maps as I try to throttle the plug in way down. I throttle it down as the google maps plugin w/ leaflet hammers the heck out of the API. So by throttling I debounce the events coming from leaflet when using google maps."}}