{"action":"created","issue":{"url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/788","labels_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/788/labels{/name}","comments_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/788/comments","events_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/788/events","html_url":"https://github.com/tombatossals/angular-leaflet-directive/issues/788","id":85285541,"number":788,"title":"Control draw order (z-index) of layers and features","user":{"login":"seadour","id":6138182,"avatar_url":"https://avatars.githubusercontent.com/u/6138182?v=3","gravatar_id":"","url":"https://api.github.com/users/seadour","html_url":"https://github.com/seadour","followers_url":"https://api.github.com/users/seadour/followers","following_url":"https://api.github.com/users/seadour/following{/other_user}","gists_url":"https://api.github.com/users/seadour/gists{/gist_id}","starred_url":"https://api.github.com/users/seadour/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/seadour/subscriptions","organizations_url":"https://api.github.com/users/seadour/orgs","repos_url":"https://api.github.com/users/seadour/repos","events_url":"https://api.github.com/users/seadour/events{/privacy}","received_events_url":"https://api.github.com/users/seadour/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-06-04T21:28:45Z","updated_at":"2015-06-04T22:46:01Z","closed_at":null,"body":"I cannot find a way to control the draw order (z-index) of layers and features with this directive.\r\n\r\nI am trying to draw polygons from a geoJSON and a circle path. The geoJSON data is loaded via Angular `$http GET` method.\r\n\r\nNo matter what I do, the geoJSON polygons are always drawn on top of the circle path. I've tried changing the order of the path/geoJSON parameters in the `$scope` object, I've tried retrieving the geoJSON data first, I've tried changing the order of attributes in the map's HTML tag...nothing seems to affect it.\r\n\r\nSample code:\r\n\r\n    angular.extend($scope, {\r\n        center: {\r\n            lat: 38.5378,\r\n            lng: -121.752,\r\n            zoom: 17\r\n        },\r\n        layers: {\r\n            baselayers: {\r\n                mapbox: {\r\n                    name: 'Mapbox',\r\n                    url: 'http://api.tiles.mapbox.com/v4/[xxx]/{z}/{x}/{y}.png?access_token=[xxx]',\r\n                    type: 'xyz'\r\n                }\r\n            }\r\n        },\r\n        geojson: {},\r\n        paths: {\r\n            circle1: {\r\n                 latlngs: {\r\n                     lat: 38.536,\r\n                     lng: -121.753\r\n                 },\r\n                 radius: 100,\r\n                 type: 'circle'\r\n            }\r\n        }\r\n    });\r\n\r\n    $http({ method: 'GET',\r\n        url: '/path/to/multipolygon.geo.json',\r\n        cache: true\r\n    }).success(function(data) {\r\n        angular.extend($scope, {\r\n            geojson: {\r\n                data: data,\r\n                style: {\r\n                    fillColor: '#f9f9f9',\r\n                    weight: 0,\r\n                    fillOpacity: 1\r\n            }\r\n        });\r\n    });\r\n\r\nIf I were using 'vanilla' Leaflet.js without Angular, I could change the order simply by adding the geoJSON to the map object before I add the path, like so:\r\n\r\n    L.geoJson(data, {\r\n        style: {\r\n            fillColor: '#f9f9f9',\r\n            weight: 0,\r\n            fillOpacity: 1\r\n        }\r\n    }).addTo(map);\r\n\r\n    L.circle([38.536, -121.753], 100).addTo(map);\r\n\r\nIn this screenshot, the grey buildings/roads are the basemap, the white building polygons are from the GeoJSON, and the blue circle is the circle path. I want the blue circle to draw on top of the white polygons.\r\n\r\n![screen shot 2015-06-04 at 2 27 05 pm](https://cloud.githubusercontent.com/assets/6138182/7994873/e6acacfe-0ac5-11e5-8025-b246e37d26aa.png)\r\n"},"comment":{"url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/comments/109075024","html_url":"https://github.com/tombatossals/angular-leaflet-directive/issues/788#issuecomment-109075024","issue_url":"https://api.github.com/repos/tombatossals/angular-leaflet-directive/issues/788","id":109075024,"user":{"login":"seadour","id":6138182,"avatar_url":"https://avatars.githubusercontent.com/u/6138182?v=3","gravatar_id":"","url":"https://api.github.com/users/seadour","html_url":"https://github.com/seadour","followers_url":"https://api.github.com/users/seadour/followers","following_url":"https://api.github.com/users/seadour/following{/other_user}","gists_url":"https://api.github.com/users/seadour/gists{/gist_id}","starred_url":"https://api.github.com/users/seadour/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/seadour/subscriptions","organizations_url":"https://api.github.com/users/seadour/orgs","repos_url":"https://api.github.com/users/seadour/repos","events_url":"https://api.github.com/users/seadour/events{/privacy}","received_events_url":"https://api.github.com/users/seadour/received_events","type":"User","site_admin":false},"created_at":"2015-06-04T22:46:01Z","updated_at":"2015-06-04T22:46:01Z","body":"**UPDATE:** I found a workaround by defining the geoJSON inline as an object, with my controller, instead of retrieving it via `$http GET`. When I do this, the path draws on top of the geoJSON:\r\n\r\n    var testGeoJson = {\r\n        \"type\": \"BuildingPolygons\",\r\n            \"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" } },\r\n            \"features\": [\r\n                { \"type\": \"Feature\", \"properties\": { \"Name\": \"Ghausi Hall\"}, \"geometry\": { \"type\": \"MultiPolygon\", \"coordinates\": [ [ [ [ -121.7532434, 38.536265 ], [ -121.753302, 38.5362549 ], [ -121.7533035, 38.5362603 ], [ -121.7533684, 38.5362492 ], [ -121.7533669, 38.5362438 ], [ -121.7533737, 38.5362426 ], [ -121.7533752, 38.536248 ], [ -121.7534401, 38.5362368 ], [ -121.7534386, 38.5362315 ], [ -121.7534454, 38.5362303 ], [ -121.7534469, 38.5362357 ], [ -121.7534743, 38.536231 ], [ -121.7534722, 38.5362245 ], [ -121.7534938, 38.5362208 ], [ -121.7534787, 38.5361682 ], [ -121.7534681, 38.53617 ], [ -121.7533536, 38.53577 ], [ -121.7533465, 38.5357712 ], [ -121.7533445, 38.5357641 ], [ -121.7533489, 38.5357628 ], [ -121.7533366, 38.535724 ], [ -121.7534167, 38.5357221 ], [ -121.7534247, 38.5357499 ], [ -121.7536083, 38.5357175 ], [ -121.7537247, 38.5361248 ], [ -121.7537077, 38.5361278 ], [ -121.7537248, 38.5361876 ], [ -121.7537022, 38.5361918 ], [ -121.753741, 38.5363313 ], [ -121.7536351, 38.5363495 ], [ -121.7536531, 38.5364139 ], [ -121.7533874, 38.5365185 ], [ -121.7532434, 38.536265 ] ] ] ] } },\r\n                { \"type\": \"Feature\", \"properties\": { \"Name\": \"Mathematical Sciences Building\"}, \"geometry\": { \"type\": \"MultiPolygon\", \"coordinates\": [ [ [ [ -121.7525651, 38.5359188 ], [ -121.7525653, 38.5358625 ], [ -121.7525531, 38.5358625 ], [ -121.7525532, 38.5358364 ], [ -121.7525654, 38.5358364 ], [ -121.7525658, 38.5357187 ], [ -121.7531007, 38.5357198 ], [ -121.7531004, 38.5358094 ], [ -121.7531406, 38.5358095 ], [ -121.7531404, 38.535874 ], [ -121.7531316, 38.535874 ], [ -121.7531315, 38.5358963 ], [ -121.7531001, 38.5358963 ], [ -121.7531, 38.5359292 ], [ -121.7528011, 38.5359286 ], [ -121.7528007, 38.536025 ], [ -121.7522728, 38.5360239 ], [ -121.7522727, 38.5360517 ], [ -121.7522273, 38.5360516 ], [ -121.7522275, 38.5359871 ], [ -121.7522345, 38.5359871 ], [ -121.7522346, 38.5359648 ], [ -121.7522678, 38.5359649 ], [ -121.752268, 38.5359182 ], [ -121.7525651, 38.5359188 ] ] ] ] } }\r\n            ]\r\n        };\r\n\r\n    ...\r\n\r\n    angular.extend($scope, {\r\n        ...\r\n        geojson: {\r\n            data: testGeoJson,\r\n            style: {\r\n                fillColor: '#f9f9f9',\r\n                weight: 0,\r\n                fillOpacity: 1\r\n            }\r\n        }\r\n    });\r\n\r\n![screen shot 2015-06-04 at 3 43 49 pm](https://cloud.githubusercontent.com/assets/6138182/7995971/883a20ba-0ad0-11e5-8254-c440c39064e3.png)\r\n\r\nStill would be preferable to load the geoJSON via `GET` and specify its draw order to be before the circle path."}}