I'm using Mirador viewer with annotation file that include 'xywh' values to set rectangels on the image.
I want to use Svg instea, so i can draw polygons on the image.
I found here: IIIF Api the annotation item struct to include svg, but it's not working for me.
Can anybody help please?
Thanks
Can you provide an example of the SvgAnnotation that you are trying to use?
Mirador 3 should support this style of SvgAnnotation:
"motivation": "commenting",
"target": {
"id": "https://iiif.bodleian.ox.ac.uk/iiif/canvas/9cca8fdd-4a61-4429-8ac1-f648764b4d6d.json",
"selector": {
"type": "SvgSelector",
"value": "<path xmlns=\"http://www.w3.org/2000/svg\" d=\"M3548.40946,1221.66399c0,-84.79382 68.73897,-153.53279 153.53279,-153.53279c84.79382,0 153.53279,68.73897 153.53279,153.53279c0,84.79382 -68.73897,153.53279 -153.53279,153.53279c-84.79382,0 -153.53279,-68.73897 -153.53279,-153.53279z\" fill=\"none\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/>"
}
},
"type": "Annotation"
},
https://github.com/ProjectMirador/mirador/blob/5ca33205bf9bac636ba5ef0faf820f58c0d9751d/__tests__/fixtures/version-3/001.json#L301-L310
Related
I'm trying to make the Google Smart Home API work on Gladys Assistant (it's an open-source home automation software), and I struggle to make Google Integrations tests pass.
This is my onSync:
onSync
{
"requestId": "9164924531720238290",
"payload": {
"agentUserId": "9aba8230-9e8d-47b7-9d1c-f4dd8725aad3",
"devices": [
{
"id": "mqtt-lamp-temperature",
"type": "action.devices.types.LIGHT",
"traits": [
"action.devices.traits.ColorSetting",
"action.devices.traits.Brightness",
"action.devices.traits.OnOff"
],
"name": {
"name": "Lampe Temperature"
},
"attributes": {
"colorModel": "rgb",
"colorTemperatureRange": {
"temperatureMinK": 2000,
"temperatureMaxK": 9000
}
},
"deviceInfo": {
"model": null
},
"roomHint": "Grand Salon",
"willReportState": true
}
]
}
}
This is what I'm sending to reportState:
reportState
{
online: true,
color: { temperatureK: 3000, spectrumRgb: 8388863 },
on: true
}
This is what the onQuery is returning to the Google API:
onQuery
{
'mqtt-lamp-temperature': {
online: true,
color: { temperatureK: 3000, spectrumRgb: 8388863 },
on: true
}
}
But this is what Google sees in the integrations tests:
AssertionError: Expected state to include:
{"color":{"temperatureK":{"xRange":[2600,3200]}}},
actual state: {"color":{"spectrumRGB":8388863},"on":true,"online":true}: expected false to be true
It seems Google completely ignores the temperatureK attribute when the spectrumRgb attribute is here.
To confirm my theory, I tried to create a lamp that has only spectrumRgb and a light that has only temperatureK, and then it works perfectly. The problem is, in that case, some tests are skipped and I think I won't get validated by Google with that.
My question is:
Why does those attributes do not work together? Can't a light be controlled by its temperature and by it's RGB ?
Do you see anything weird in my implementation?
Thanks a lot for your help!
From the docs:
Color temperature is a linear scale and a subset of the RGB/HSV full spectrum color models.
You're currently trying to send two different color settings to your light (orange-ish in kelvin, deep pink in rgb), which is part of the issue you're running into.
You have set your device up in your SYNC to support both RGB and temperature, but in your QUERY/EXECUTE intents, you need to send either temperatureK or rgb spectrum values, not both.
Hi Your JSON format of Query and ReportState is different, include the device id in the ReportState as well, read the google report state docs for more info.
The new mapbox heatmap api looks awesome.
I want to achieve a constant heat map while zooming someone posted on github: https://cloud.githubusercontent.com/assets/186834/26474453/068dbd00-4166-11e7-996d-ec1756eb7355.gif
Looking at the official api example (https://www.mapbox.com/mapbox-gl-js/example/heatmap-layer/), how can I achieve this?
I believe the gif you posted is from a development prototype. This "constant heat map" effect is not the intended/default behavior of heat maps in GL.
That said, this behavior can be simulated using expressions! You'll need to use an expression that double heatmap-radius at each zoom level with a base of 2.
{
"id": "heatmap",
"type": "heatmap",
"source": "heatmap-source",
"paint": {
"heatmap-radius": {
"base": 2,
"stops": [
[
10,
2
],
[
19,
512
]
]
}
}
}
I make clickable buildings with OSM Buildings. When I click a building, I get Building ID. However, I could not get height of a building because I cannot fing JSON file to get this value.
Codes are here:
var map = new L.Map('map');
map.setView([52.52111, 13.40988], 16, false);
new L.TileLayer('https://{s}.tiles.mapbox.com ...
https://codepen.io/osmbuildings/pen/JdaaRM
To sum up, I want to get height of a building with using OSM Building.
The height is contained in the JSON file.
See this example here: https://b.data.osmbuildings.org/0.2/anonymous/tile/16/35210/21491.json. It contains a properties field which in turn contains height and levels:
"id": "w24273225",
"type": "Feature",
"properties": {
"height": 65,
"levels": 17
},
"geometry": {
"type": "Polygon",
"coordinates": [
[...]
]
}
The height and level information is only present if the building in OSM actually has this information. This isn't the case for every building.
I would like to add a custom marker to my map. I am using a mapbox gl script.
The only documentation that I found related to this topic is this one https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/.
I tried to customize given example and I managed to add a marker and modify it a little changing the size, but since I don't understand all the parameters, I don't know how to add my own marker. Is there any documentation that is more detailed?
Here is my code:
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWl3YXRrbyIsImEiOiJjaXBncnI5ejgwMDE0dmJucTA5aDRrb2wzIn0.B2zm8WB9M_qiS1tNESWslg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/aiwatko/cipo0wkip002ddfm1tp395va4', //stylesheet location
center: [7.449932,46.948856], // starting position
zoom: 14.3, // starting zoom
interactive: true
});
map.on('load', function () {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [7.4368330, 46.9516040]
},
"properties": {
"title": "Duotones",
"marker-symbol": "marker",
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"icon-size": 3
}
});
});
</script>
Thanks in advance!
Oktawia
There are two ways to customize markers in Mapbox.
Raster Markers in Mapbox
See this link on Mapbox.com for Custom marker icons. That example shows how to use a .png as a marker.
SVG Markers in Mapbox
You are pretty close to modifying the icons, but take some time to familiarize yourself with the parameters.
The icon-image may be the harder one to understand. It takes the property "marker-symbol": "marker" from the GeoJson, and "icon-image": "{marker-symbol}-15", to create the final result of marker-15.
This brings up a further question: where/how are the markers defined?!?
The markers also come from Mapbox and are called Maki Icons. You can change the "marker-symbol" to aquarium or cafe to see the results.
From the Mapbox GL Style Reference
icon-size — Scale factor for icon. 1 is original size, 3 triples the size.
icon-image — A string with {tokens} replaced, referencing the data property to pull from.
Edit: I reformatted the question as it was pointed out to me that the problem is not in the Mapbox API.
As of a few days ago an application using mapbox matching API coupled with leaflet.js started drawing polylines on the other side of the planet.
While the path it self looks as it should be, leaflet drew it on another continent.
The Mapbox Matching API returns the response following GEOJson standard as:
{
"code": "Ok",
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": "e`s`YmyazuAg`#y]uo#ej#eQcOkFkEyCeCaYmUuFoMkWgOo[_ReGqDoGyDmVaPaU|RoDlDsa#z`#sTdSXJf#j#??Jr#Mp#ML[Z}#ZiAHgAK]MaJzJsUbWkSxRyHpHuLhLuFzFqDrDq[`\\oPrPyK|KmU|TuLzKyClCr#ZZf#Fj#Ij#e#b#zn#fZ}Zf]gCdKmHxQErC[jV",
"properties": {
"confidence": 0.45413768894813844,
"distance": 1366.4,
"duration": 243.3,
"matchedPoints": [
[13.658131, 45.532583],
[13.659851, 45.534127],
[13.661445, 45.535438],
[13.662397, 45.535398],
[13.663582, 45.534237],
[13.666378, 45.531441],
[13.666457, 45.529215]
],
"indices": [0, 1, 2, 3, 4, 5, 6]
}
}]
}
Using the code below to draw the layer with leaflet.js results in a polyline drawn on a wrong position.
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#3c8dbc',
weight: 4,
opacity: 0.8
});
//fit bounds to added layer
map.fitBounds(layer.getBounds());
The result being:
While the polyline it self is as it should be, the position is not.
I speculate the problem is that leaflet expect the coordinates to be in format [latitude, longitude] while the Mapbox matching API returns GEOJson format namely [longitude, latitude].
Should I manually switch the coordinates of the response before drawing it or am I just doing it wrong?
Thanks.
Edit 2 : It appears the problem is in fact in different formats. More about it can be found in this post
Changing the order of the coordinates in the returned object is very tedious hence an elegant solution to this would be greatly appropriated.