I am trying to invert the toner layer here, and maybe add a color tint to it as well as you can see here on Map Stack : http://mapstack.stamen.com/edit.html#toner[invert=1,tint=$1e88e5#100]/11/37.7547/-122.3513
Although, I'm not sure how would I use that url as a parameter since I don't see it reflect on the map instance.
The API in OpenLayers has no information on how to manipulate the Stamen map.
The Code
<TileLayer
id="nightmode"
title="Night Mode"
source={
new Stamen({
layer: 'toner',
params: {
layers: "",
format: "image/png",
tiled: true
}
})
}
/>
In OpenLayers 6 similar to the grayscale OSM in this example https://openlayers.org/en/main/examples/semi-transparent-layer.html you could specify a className for the layer and use an invert css filter https://codesandbox.io/s/gifted-newton-mk9th?file=/main.js
An alternative would be to use a globalCompositeOperation similar to https://codesandbox.io/s/globalcompositeoperation-fktwf
Related
I'm creating a website using the Crowd HTML Elements that let users/workers annotate images with the bounding box format. The form looks like this:
<crowd-form>
<crowd-bounding-box
name="annotatedResult"
labels="['Referee', 'Player']"
src="https://s3.amazonaws.com/cv-demo-images/basketball-outdoor.jpg"
header="Draw boxes around each basketball player and referee in this image"
>
<full-instructions header="Bounding Box Instructions" >
<p>Use the bounding box tool to draw boxes around the requested target of interest:</p>
<ol>
<li>Draw a rectangle using your mouse over each instance of the target.</li>
<li>Make sure the box does not cut into the target, leave a 2 - 3 pixel margin</li>
<li>
When targets are overlapping, draw a box around each object,
include all contiguous parts of the target in the box.
Do not include parts that are completely overlapped by another object.
</li>
<li>
Do not include parts of the target that cannot be seen,
even though you think you can interpolate the whole shape of the target.
</li>
<li>Avoid shadows, they're not considered as a part of the target.</li>
<li>If the target goes off the screen, label up to the edge of the image.</li>
</ol>
</full-instructions>
<short-instructions>
Draw boxes around each basketball player and referee in this image.
</short-instructions>
</crowd-bounding-box>
</crowd-form>
The results of a worker's submission looks like the following:
{
"annotatedResult": {
"boundingBoxes": [
{
"height": 3300,
"label": "Dog",
"left": 536,
"top": 154,
"width": 4361
}
],
"inputImageProperties": {
"height": 3456,
"width": 5184
}
}
}
]
I'd like to take this output and write it to a database, pass it to AWS Lambda, store it as metadata, etc. but I don't know how to access the results. Is the JSON output a property of some HTML DOM property I can grab?
I can attach a javascript function to the submit action of the crowd-form portion...
<script>
document.querySelector('crowd-form').onsubmit = function() {
???
};
</script>
...but I'm not sure what object I need to grab to get the results. Thanks for your help!
You can access the bounding boxes during the onsubmit event like this:
<script>
document.querySelector('crowd-form').onsubmit = function(e) {
const boundingBoxes = document.querySelector('crowd-bounding-box').value.boundingBoxes || document.querySelector('crowd-bounding-box')._submittableValue.boundingBoxes;
}
</script>
Here's a working jsfiddle.
Your use case sounds interesting. If you don't mind sharing, please email me at samhenry#amazon.com and I may be able to help further.
Thank you,
Amazon Mechanical Turk
My application shows a map with react-leaflet and uses LayersControl to switch between an OSM TileLayer and HERE TileLayer. The code is as follows:
<LayersControl position="topright">
<LayersControl.BaseLayer
name={this.props.intl.formatMessage({id:'map.normal_map'})}
checked={true}
>
{ tileLayerOSM }
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={this.props.intl.formatMessage({id:'map.terrain_map'})}>
{ tileLayerHERE }
</LayersControl.BaseLayer>
</LayersControl>
The problema I see is the following: when moving the OSM map, some 'squares' are downloaded from HERE while they are not ready with OSM. See the network trace:
I would like to avoid this behavior, since it is a bit annoying for the user, who see changes in the visualization for a short period of time.
I don't have experience using Leaflet with React, but these is clearly not the desired behaviour.
In Leaflet that (retrive the both base layers at the same time) happens when you add both to the map. Something like:
const accessToken = 'foo';
let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const mapbox = 'https://api.mapbox.com/styles/v1/mapbox/basic-9/tiles/256/{z}/{x}/{y}?access_token={accessToken}';
const map = L.map('map').setView([42.2, -8.8], 12);
map.addLayer(osm);
map.addLayer(mapbox); // only one should be added to the map
or directly when instantiating the map:
let map = L.map('map', {
center: [42.2, -8.8],
zoom: 12,
layers: [osm, mapbox] // only one should be added to the map
});
With this kind of baselayers you only must add one to the map and use the layer control to switch between one or the other. When only one is added only the tiles for one of the maps are requested, saving bandwith.
As a "shot in the dark" I will try to make the checked value explicit for all layers. First both as a harcoded false, nothing should be shown in the map. Then one with checked=true harcoded and the other with false, and so on. Probably the trouble is how those attributes are managed.
I'm trying to convert lon,lat values to X,Y coordinates to update the geometry on a feature. Currently, what I have, I believe should work, but doesn't:
var t = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon,lat),
new esri.SpatialReference({ wkid: 32616 }));
console.log(t);
This returns:
Object {
type: "point",
x: 3864579.687523207,
y: -22608299.977863092,
spatialReference: { wkid: 102100 }
}
// the numbers for x,y should be something close to: 529000, 3842179
Even though I'm specifying the spatialReference to as { wkid: 32616 }, it's returning with { wkid: 32616 }.
How do I go about correctly converting lon,lat to x,y with a different spatialReference than the default 102100?
use the Geometry Service or create your own service for this operation..
ArcGis Javascript api does not have any solution for such issues
Try using the Geometry Service to reproject the geometry into the new Spatial Reference.
https://developers.arcgis.com/javascript/jsapi/geometryservice-amd.html#project
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!
I have a table with a location column and "count" column (with values from 1 to 100).
I'd like to map the records with markers that change in size, i.e. the bigger the count value is, the bigger the marker is.
Is that possible in Google Fusion? How would you suggest to do that?
Thanks.
Currently there are only 2 sizes of icons available: small and large, I put together a little example to show you how to use them together with the FusionTablesLayer, which is a special layer for Google Maps that can use to query your Google Fusion Tables.
FusionTablesLayer allow you apply a style to your data (markers, lines or polygons), it boils down to this:
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '3609183'
},
styles: [
{ where: "Number > 1000",
markerOptions: {
iconName: 'large_green'
}
},
{ where: "Number <= 1000",
markerOptions: {
iconName: 'large_red'
}
},
{ where: "Number <= 100",
markerOptions: {
iconName: 'small_purple'
}
}
]});
If two sizes are not enough, then maybe you can play around with different colors/icons (there is a list with supported icons). Otherwise you have to retrieve your data and create custom markers with images of different size.
Javram pointed to one approach, but the list of available marker icons is limited in Fusion Tables and AFAIK there is no way to vary the icon size. Another approach might be to use the JSONP support provided by Fusion Tables to retrieve you your data and create your own makers. This blog post explains how to do it.
The answer is here, http://support.google.com/fusiontables/bin/answer.py?hl=en&answer=185991 basically, you need to add a column in your table that is the name of the marker type you want to use for that location.