I've been trying to dynamically change the style of map elements, such as water masses, based on computed colors but haven't had any luck so far. I'm currently using Tangram for this purpose, although I'm open to exploring other engines if there's a better solution available. In Tangram, styling is usually done using a YAML file, but I'm attempting to achieve dynamic color changes by incorporating inline JavaScript in the scene (YAML) file. Instead of simply assigning a fixed color to an element like this:
water:
draw:
polygons:
color: "blue"
I'm trying something more complex like this (especially since I'm integrating Vue Router):
water:
draw:
polygons:
color: function() { return this.colors[0]; }
The computation of computedColors happens in a mixin, and then it's broadcasted to the appropriate route:
var colorize = {
data: function () {
return {
computedColors: []
};
},
created: function () {
this.getColors();
},
methods: {
getColors: function () {
...
self.computedColors = [
...
];
self.$broadcast('parent-colors', self.computedColors);
...
};
};
}
Here's how the route looks:
router.map({
'/map': {
name: 'map',
component: Vue.extend({
template: '#map',
mixins: [colorize],
data: function () {
return {
colors: []
};
},
events: {
'parent-colors': function (computedColors) {
this.colors = computedColors;
}
},
ready: {
var map = L.map('map');
var layer = Tangram.leafletLayer({
scene: './tiles/scene.yaml'
});
layer.addTo(map);
map.setView([40.70531887544228, -74.00976419448853], 15);
}
});
If you have any insights or tips on what might be going wrong, please do share.
UPDATE
I've encountered an error related to Tangram while working on this. It seems to be connected to parsing the YAML file, but I'm struggling to pinpoint the exact issue. When I modify this part in my scene.yaml:
water:
draw:
polygons:
color: function() { return this.colors[0]; }
To this:
water:
draw:
polygons:
color: function() { return this.color1; }
The errors disappear, but unfortunately, the water mass still doesn't receive any assigned color. Additionally, I needed to adjust these lines in the map route instance too:
data: function () {
return {
color1: ''
};
},
...
events: {
'parent-colors': function (computedColors) {
this.color1 = computedColors[0];
}
}