I upgraded from OL4 to OL5 and now to select a polygon I must click exclusively on the border, whereas before I could click anywhere inside the polygon. For circles I can still click anywhere within the circle to select it. This is confusing our end users, and they think that selecting objects is no longer working.
Is this intentional in the upgrade? If so, how can I make a polygon selectable by clicking anywhere inside its area?
I have not been able to find any references online to this issue yet.
This https://github.com/openlayers/openlayers/pull/7750 is referenced in the upgrade notes for version 5.0.0.
If you are using a style without a fill in OL4, for example
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
})
})
you will need add a transparent fill for OL5:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
fill: new ol.style.Fill({
color: 'transparent'
})
})
Related
I loaded .shp file inside QGIS, and exported it from there using Export to PostgreSQL command in Processing Toolbox pane.
Then I started pg_tileserv.exe to serve vector tiles, and as you can see in this screenshot - it is visible in the browser (blue contour lines).
The problem I'm having is to display these vector tiles inside QGIS if added as XYZ Tiles (or if I try to display in browser with my code and OpenLayers js lib.). As you can see in this screenshot, I added XYZ Tiles, but it just stays blank - I cannot see the map in the right pane (in screenshot, checkbox is not checked, but nothing happens even if checked. I also tried changing styles etc...):
And if I load data directly from PostgreSQL, it loads and shows OK:
Anybody knows what could be a problem here?
UPDATE
As #JGH said, I should use Vector Tiles from list. Now just to see why OpenLayers config is not rendering it:
import 'ol/ol.css';
import MVT from 'ol/format/MVT';
import Map from 'ol/Map';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import View from 'ol/View';
import {Fill, Icon, Stroke, Style, Text} from 'ol/style';
const key =
'';
const map = new Map({
layers: [
new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
attributions:
'© Mapbox ' +
'© <a href="https://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new MVT(),
url:
'http://localhost:7800/public.simplified_land_polygons/' +
'{z}/{x}/{y}.pbf' +
key,
}),
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
}),
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
UPDATE 2
Yes, it was due to styles. After changing, it is visible now!
style: new Style({
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'white',
width: 1.25
}),
image: new Circle({
radius: 5,
fill: new Fill({
color: 'red'
}),
stroke: new Stroke({
color: 'white',
width: 1.25
})
})
I'm a bit new to leaflet, but I have spend hours without being able to solve this problem: I want to draw a line with arrows using a gpx file as source. This should be in a layer that can be displayed or not usin overlay.
I manage to style either the arrow or the line, but I did not manage to style both. Here is my code:
Can anyone give me advices on how to style the line ?
Many thanks.
var customLayer = L.geoJson(null, {onEachFeature: function (feature, layer) {
L.polylineDecorator(layer, {
patterns: [
{offset: 25, repeat: 15, symbol: L.Symbol.arrowHead({pixelSize: 10, pathOptions: {stroke: false, color: '#000', fillOpacity: 1, weight: 0}})}
]
}).addTo(customLayer); /// Adds each decorator to the map!!!!
}
}
);
var runLayer = omnivore.gpx('./FerneyGex.gpx', null, customLayer);
controlLayers2.addOverlay(runLayer, 'Ferney - Gex');
In the example here:https://blogs.bing.com/maps/May-2016-(1)/Pushpin-Clustering-in-Bing-Maps-V8. I want to change the white color that shows the count of the clustered pushpins to something different. Tried the code below but it didn't work. Is there another way to change it?
cluster.setOptions({
icon: svgString,
anchor: new Microsoft.Maps.Point(radius, radius),
textOffset: new Microsoft.Maps.Point(0, radius - 8),
color: Microsoft.Maps.Color.fromHex('#111111')
});
The color pushpin option changes the color of the default pushpin. There is no option to change the color of the text value, but since you are using inline SVG, this is easy enough to do right in your inline SVG. You can include the "{color}" placeholder in your SVG and it will be replaced by the color you specify in the pushpin color option. Here is an example:
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="13" style="stroke:orange;stroke-width:2;fill:yellow;"/><text x="10" y="20" style="fill:{color};">{text}</text></svg>';
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: svg.replace('{text}', 'hi'),
anchor: new Microsoft.Maps.Point(15, 15),
color: 'red'
});
I'm trying to change the color of the coverage on hover (showCoverageOnHover) in the Leaflet markercluster plugin. I can't find this in the documentation.
What I want to achieve is to change the color of the coverage on hover from blue to something else. For example, when you hover with the mouse over a cluster icon in this example.
OK, using polygonOptions is the right answer, like that:
var markers = L.markerClusterGroup({
polygonOptions: {
fillColor: '#1b2557',
color: '#1b2557',
weight: 0.5,
opacity: 1,
fillOpacity: 0.5
}
});
Quoting from the docs:
polygonOptions: Options to pass when creating the L.Polygon(points,
options) to show the bounds of a cluster. Defaults to empty, which
lets Leaflet use the default Path options.
I'm trying to create some Famo.us items and having problems with the approach and wondered if anyone can help.
I am trying to create a View, within which is a Surface. I would like the background of that Surface to be transparent, but I want the Text to be fully visible.
I can solve this with 2 Surfaces on top of each other but that sounds silly, so wondered if anyone can help. My code is:
var infobarContent = new Surface({
size: [true, true],
properties: {
cursor: 'pointer',
borderRadius: '5px',
padding: '10px',
backgroundColor: 'rgb(71,3,101)',
color: 'white',
textAlign: 'center'
}
});
var infobarContentModifier = new StateModifier({ /*opacity: 0.4,*/ align: [0.05, 0.1], origin: [0.05, 0.8] });
I did try adding a Class to the Surface, but it seems to ignore any background opacity. I also tried to use "rgb(71,3,101, 0.4)" in the Properties of the Surface - as would work in normal websites - but this does not work either.
Any help would be brilliant :)
Thanks, and hope you are enjoying your Weeekend.
:)
The problem is your BackgroundColor rgb(71,3,101, 0.4)
The correct CSS value is rgba(71,3,101, 0.4)