Utilizing the Google map label tool, I am trying to showcase certain property from GeoJSON data on a GeoJSON layer. However, the issue arises as the layer has a dark color and the label is appearing blurry behind the GeoJSON data layer. Despite attempting to apply a bigger zIndex for the label compared to the data layer, it seems to have no effect at all. You can see the problem in action on Plunker.
https://plnkr.co/edit/KvhIoRoibsbKk9e4k1Ch?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="geojson.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('MyCtrl', function(NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = map;
vm.map.data.setStyle(function(feature) {
return({
fillColor: feature.getProperty('fill') ? feature.getProperty('fill') : 'transparent',
strokeWeight: 0.5,
fillOpacity: feature.getProperty('fillOpacity') ? feature.getProperty('fillOpacity') : 0.5,
zIndex: 1000
});
});
vm.map.data.addGeoJson(geojson);
vm.map.data.forEach(function (feature) {
var centroid = feature.getProperty('centroid');
var myLatlng = new google.maps.LatLng(centroid.coordinates[1], centroid.coordinates[0]);
var mapLabel = new MapLabel({
text: feature.getProperty('Shale_play'),
position: myLatlng,
map: vm.map,
fontSize: 16,
align: 'center',
minZoom: 5,
fontColor: '#0000ff',
zIndex: 5000
});
mapLabel.set('position', myLatlng);
});
});
});
</script>
</head>
<body ng-controller="MyCtrl as vm">
<ng-map zoom="8" center="35.3944545,-92.78723"></ng-map>
</body>
</html>
geojson.js
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": "geology_tightOilGas_eia20160311",
"fillOpacity": "0.8",
"fill": "#00aa22",
"Basin": "Arkoma",
"Lithology": "Shale",
"Shale_play": "Fayetteville",
"Source": "EIA",
"Area_sq_mi": 5852.69474734,
"Area_sq_km": 15158.4098071,
"Age_shale": "Mississippian",
"centroid": {
"type": "Point",
"coordinates": [-92.78723, 35.3944545]
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-94.277701, 35.202423],
[-94.382715, 35.322647],
[-94.393411, 35.533806],
[-94.36331599899995, 35.638342],
[-94.24130399899997, 35.682679],
[-94.023528, 35.690577],
[-93.875907, 35.691057],
[-93.491065, 35.684045],
[-92.952118, 35.658092],
[-92.664754, 35.666656],
[-92.30350699899998, 35.677098],
[-91.918848, 35.628261],
[-91.475479, 35.601242],
[-91.181049, 35.59428500100006],
[-91.274519, 35.529656],
[-91.388323, 35.449603],
[-91.544307, 35.31595599900004],
[-91.73661700099996, 35.176988],
[-91.867632, 35.102377],
[-92.012094, 35.097852],
[-92.29381300099999, 35.102714],
[-92.709335, 35.13337],
[-93.396545, 35.153332],
[-94.01489300099996, 35.168451],
[-94.277701, 35.202423]
]
]
]
}
}]
};