Mapbox GL JS - Remove fade in time for image overlay - javascript

I am currently working with image overlays (.gif) in Mapbox GL JS to provide weather radar data. I need to set a loop to show the images in motion - but the image overlays have a "fade-in" effect and I would like that gone. How can I remove this so the images just turn on and off as quickly as possible with no fade-in or out? I cannot find this in the API documentation, but it's possible I missed it somehow.
Edit : To be clear, I am just asking how to remove the fade-effects - not how to loop it or anything else - I can do that later.
My code to add an overlay and source (that produces the default fade-effect) is currently :
topleftmapbox.addSource("source_KEWX_L2_CC", {
"type": "image",
"url": "images/KEWX_L2_CC.gif",
"coordinates": [
[-102, 33],
[-94, 33],
[-94, 26],
[-102, 26]
]
})
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"raster-opacity": 0.9,
"layout": {"visibility": "visible"},
}, firstSymbolId)
}

You need to change the raster-fade-duration property:
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"paint": {
"raster-opacity": 0.9,
"raster-fade-duration": 0
},
"layout": {"visibility": "visible"},
}, firstSymbolId)
P.S. And yes, I recommend using the canvassource for animation.

Related

Is there a way to add new working gear slots in the Minecraft mod Mine and Slash (1.16.5 beta version)?

I am trying to make a modpack centered around this mod, but it needs to have bracelet, belt and charm slots capable of applying statistics to your character. I made a datapack using the way the mod has Rings and Necklaces implemented, and they spawn in correctly with stats on the item types and the gear slots' souls (though the ingame name for them does not get swapped out for the local names listed in my json's)...
but equipping them does not actually apply them to your character. I tried reaching out to the developer of the mod for help before this, but that seems to be a dead end.
I have been reading the .class files of the mod to try and grasp what part I'm missing, but it is hard to follow for someone as entry level as I am.
so far i have 1 json for each (belt, bracelet, charm) in my datapack for data\mmorpg\base_gear_types which are their respective versions of this:
{
"attacksPerSecond": 1.0,
"guid": "belt",
"locname": "Belt",
"level_range": {
"start": 0.0,
"end": 1.0
},
"gear_slot": "belt",
"weight": 1000,
"weapon_offhand_stat_util": 0,
"style": "melee",
"implicit_stats": [],
"base_stats": [
{
"min": 2.0,
"max": 3.8,
"stat": "physical_weapon_damage",
"type": "FLAT"
},
{
"min": 2.0,
"max": 5.0,
"stat": "armor",
"type": "FLAT"
}
],
"weapon_type": "none",
"tags": {
"tags": [
"belt",
"jewelry_family"
]
}
}
and 1 for each gear type in data\mmorpg\gear_slot that look like this:
{
"id": "belt",
"locname": "Belt",
"weight": 750,
"energy_cost": 0,
"model_num": 12,
"fam": "Jewelry"
}
They each have different "base_stats" than the other 2 types is the main difference between their jsons.

vega-lite: Adjustable selection?

Is there a way to get a adjustable selection in vega-lite?
I found this example but I think this is made with plain vega.
Vega-Lite does not provide any way to create an interval selection with a size that is adjustable by clicking and dragging on the edges.
Available configuration properties are listed in the interval selection docs. The only configurable interactions are translate, which enables moving the selection by clicking and dragging, and zoom, which enables changing the selection's size by zooming on its interior; both of these are True by default.
Here is a simple specification that lets you see the effect of these configurations (open in editor):
{
"data": {"url": "data/sp500.csv"},
"mark": "area",
"selection": {
"brush": {
"type": "interval",
"encodings": ["x"],
"zoom": true,
"translate": true
}
},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
},
"width": 400
}

GUIDE4YOU - how to add a dynamic layer?

The guys from guide4you did a great job making this lib opensource!!
I've succeeded in having a working demo guide4you sample.
How adjustable is the lib?
For instance how can I add layers with GeoJSON instead of KML.
Can the layers be added dynamically (with own javascript) instead of predefined?
Take this as example: https://openlayers.org/en/latest/examples/geojson.html
To be more specific: how can that example work together with guide4you ?
Kind regards,
Sam
To use a GeoJSON layer in guide4you you can just specify the type "GeoJSON" in the layerconfig.
{
"id": "3",
"type": "GeoJSON",
"source": {
"url": "path/to/geojson"
}
}
See also https://github.com/KlausBenndorf/guide4you/blob/master/conf/full/layers.commented.json for some examples
If you like to add a layer on the fly with javascript you can use this api function:
map.get('api').addFeatureLayer({
"id": "3",
"type": "GeoJSON",
"source": {
"url": "path/to/geojson"
},
"visible": true
})
the possible options are the same as in the layer config.
If you like to add only new features you can create a layer with type "Intern" and add the features with openlayers functionalities. The source of a feature layer is a subclass of ol.source.Vector.
In the example below I am assuming that geojsonObject is of the same kind as in the geojson example of openlayers.
var layer = map.get('api').addFeatureLayer({
"id": "3",
"type": "Intern",
"source": {
"features": []
},
"visible": true
});
layer.getSource().addFeatures((new ol.format.GeoJSON()).readFeatures(geojsonObject));
And last but not least you can use a simplified api to define features inside a layerConfig object like this:
{
"id": "3",
"type": "Intern",
"source": {
"features": [{
"id": 6,
"name": "Some feature",
"description: "Some description",
"style": "#defaultStyle",
"geometryWKT": "... any wkt string here ..."
},{
"geometryWKT": "... any wkt string here ..."
}]
}
}
this can be used either in a layerConfig file or in the addFeatureLayer api method.

Mapbox GL js available icons

I am rewriting a web application from Mapbox.js to Mapbox GL js.
Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons?
Here is my code:
m.map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": ["-75.532965", "35.248018"]
},
"properties": {
"title": "Start",
"marker-symbol": "entrance",
"marker-size": "small",
"marker-color": "#D90008"
}
}
}
});
m.map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15", //but monument-15 works
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, -1.6],
"text-anchor": "top"
}
});
I read that all Maki icons should be made available for styles that don't have icons as a default:
https://github.com/mapbox/mapbox-gl-styles/issues/241
But most of them don't work.
Also there is the problem with the sizes - for Maki they were -small, -medium and -large, and now I see -11 and -15.
I just need to use some basic marker icons.
We're still sorting out the final implementation details for the default icon set and will document that set thoroughly once it has been decided upon.
Until then, you can see exactly what icons are available for a given style by peeking at the mapbox-gl-styles repo in the sprites folder.
Since that issue was closed, all maki icons are now natively available in mapbox-gl.js. You can see all available at https://www.mapbox.com/maki-icons/. You can also multiply their size using the icon-size paint property, though this may result in pixelation. There are still some hitches, like the icon-color property not yet working, so you'll need to edit, recolor, and republish icons for now. (issue #3605).

Multiple series data on HighCharts column

I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.
What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.
I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?
Working:
"series": [
{
"data": [
{
"y": 92,
"name": "Apples: 92ms for 83,481,430 requests",
"color": "#91cb73"
},
{
"y": 761,
"name": "Bananas: 761ms for 58,050,877 requests",
"color": "#ab7053"
},
{
"y": 774,
"name": "Kiwis: 774ms for 362,294 requests",
"color": "#44719c"
}
]
}
]
Demo: http://jsfiddle.net/b65kp/
Not working:
"series": [
{
"name": "Apples",
"data": {
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}
},
{
"name": "Bananas",
"data": {
"y": 761,
"name": "761ms for 58,050,877 requests",
"color": "#ab7053"
}
},
{
"name": "Kiwis",
"data": {
"y": 774,
"name": "774ms for 362,294 requests",
"color": "#44719c"
}
}
]
Demo: http://jsfiddle.net/u74Qw/1/
The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:
"data": [{
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}]
Here is your full fix, but it might not give the result you expect, personally I like your first attempt better
FWIW, alternate approach to setting this up:
http://jsfiddle.net/jlbriggs/zbW4D/
Things to consider:
1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)
2) rotating labels always adds more work for the user
3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction
A horizontal bar chart with no legend and single color for data solves these problems.

Categories