I have an openlayers map and a pin on the map.
I would like to get rid of this blue dot, which shows up when you hover over the pin.
There are many similar topics, but found guidelines did not bring me results.
I would also like to be able to move the image by mouse clicking on it anywhere
I try do that:
var selectedStyleFunction = function(feature, resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "white",
lineCap: "butt",
lineJoin: "bevel",
width:3
}),
fill : new ol.style.Fill({
color: "black"
}),
})];
};
//drag and drop
const dragInteraction = new ol.interaction.Modify({
features: new ol.Collection([marker]),
style: selectedStyleFunction,
});
This makes the dot is not visible at all, but then it is difficult to find it in the image.
My example is here: https://jsfiddle.net/anetka31/eo4prjgx/51/
Giving the interaction the same style as the marker will remove the blue dot. The pin icon should be anchored near the bottom left and the modify interactions only works on that position (unless pixelTolerance is set high, when it will also work outside the icon which would be confusing). Unlike modify a select interaction will work on any visible part of the icon. By adding a hover (pointermove) select interaction and a custom condition on the drag to check if any features have been picked by a hover the high pixelTolerance can be limited to just the icon. If you want the hover can also change the mouse pointer style to let you know it's over the icon (removing the need for the blue dot). Revised fiddle https://jsfiddle.net/vynk7Ld8/4/ (also updated from a very old version of OpenLayers 3 to OpenLayers 4)
Related
I've created a board game website where you are supposed to guess a word and then the points are displayed on a bar chart using chartjs. Currently, when hovering over a bar, it shows the amount of points by default. What I want to do is show both the amount of points and then also a list of what words that team have guessed correctly. So, in essence, can I change the hover text on a chartjs? And if so, how?
Thanks in advance!
I think you are referring to the tooltip which is showed when hovering the data elements.
You can change the data to show leveraging on tooltip callbacks, described in the doc: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
plugins: {
tooltip: {
callbacks: {
label: () => 'my text'
}
}
}
I am using Mapbox Studio as basis for mapping and styling and then using HTML for additional map features.
One of the features is to change Icon opacity when hovering or mouse enter. I've checked other examples and all other refer to feature when you create it directly in HTML. I managed to change opacity but only for whole layer.
Can I use somehow e.features[0] command line to apply changes only to one feature rather than to whole layer?
I used this code which changer opacity for whole Layer 'Icon' (Layer contains 5 icons with text):
// Change the cursor to a default and change opacity when the it enters a feature in the 'Icons' layer.
map.on('mouseenter', 'Icons', function() {
map.getCanvas().style.cursor = 'default';
var feature = e.features[0];
map.setPaintProperty('Icons', 'icon-opacity', 0.5);
});
// Change it back to a pointer and reset opacity when it leaves.
map.on('mouseleave', 'Icons', function() {
map.getCanvas().style.cursor = '',
map.setPaintProperty('Icons', 'icon-opacity', 1);
});
Thank you!!!
There are a few ways which you could achieve this. One approach is to add each feature as separate layer, so that when you want to change the opacity of an icon added in a layer 'specific-icon-layer', you can pass 'specific-icon-layer' to the Map#on method. This is likely the most straightforward option if you have a relatively minimal number of markers.
Another approach is to add unique IDs to each icon feature, so that you can use a filter expression in conjunction with Map#setPaintProperty and Map#queryRenderedFeatures (or Map#querySourceFeatures). For example, suppose you add an 'id' property to each GeoJSON feature representing an icon in the source for the 'Icons' layer. Then, you could set up an event listener similar to this example, retrieve the 'id' of the returned feature, and use the 'id' (suppose here it is 'example-id') to update the paint property for the 'Icons' layer:
map.setPaintProperty(
'Icons',
'icon-opacity',
['match', ['get', 'id'], 'example-id', 0.5 , 1]
);
Here, we use match and get expressions to say "if the 'id' of a feature is 'example-id', paint its icon with opacity 0.5, otherwise use opacity 1."
Check the example at https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
This approach makes use of setFeatureState and feature-state expressions
The problem with using map.setPaintProperty(layer, property, filter, matchValue, styleValue, fallbackStyleValue) every time is that it restyles every feature on the layer instead of only the feature being interacted with. This can cause poor performance when the layer has a high number of features.
I have a application that shows a highlighted list of countries on a map and their names in a side panel
I would like to make the following happen: When you click on the name of a country in the side panel. you zoom to the country on the map.
I am not sure how to make this happen and would appreciate it if someone point me to an example or suggest the best way to make this happen
Really depends upon your set-up and I'am assuming you are using geoJSON. In a project I worked on, I created a function that is ran once you click from a list that zooms to the corresponding geoJSON ... or you could attach the leaflet ID for each geoJSON layer to the corresponding elements of the list if the list populated from the geoJSON.
markers - collected geoJSON
layer.feature.properties.pin - the corresponding key that matches the listed record with the geoJSON (this needs to match your data)
pin - the corresponding element from the list (this needs to match your data)
The 1st setStyle - highlights the geoJSON
map.fitbounds - zooms to highlighted info
The 2nd setStyle - changes all of the other geoJSON layers back to the original style.
function selectedparcel(pin){
markers.eachLayer(function (layer){
if (layer.feature.properties.pin === pin){
layer.setStyle({
fillColor: '#2262CC',
fillOpacity: 1,
weight: 3
});
//this is where the zoom happens
map.fitBounds(layer.getBounds());
} else {
layer.setStyle({
color: '#ff7800',
weight: 1,
opacity: 1,
fillOpacity: 0
});
}
});
I hope this is what you were looking for. If you want to use the leaflet id method Bryan McBride has an example within his js code here:
https://github.com/bmcbride/building-damage-reporter
I am able to create a new window with my app, but I was wondering if there was a way for this window to open at the bottom of the screen. The preferred behavior would be, given a height, fill in a window from the left to right side of the screen and be all the way at the bottom of that screen. Like a bottom-docked panel.
Is there some attribute I can add to the create to make this happen? All I can think is to set left to 0, but that only solves one thing.
chrome.app.window.create("window.html", {
alwaysOnTop: true,
id: "info_view",
bounds: {width:600, height:400},
});
The app window create reference is here: https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
First, It looks like bounds is deprecated; you should use innerBounds or outerBounds instead.
Second, all of the bounds take a BoundsSpecification which has arguments for left and top. You can get the screen display bounds using chrome.system.display.getInfo(function callback) which returns a workArea (and a bounds, depending on your intent).
Then, probably you want to pass to window.create something like
outerBounds: {
top: screenInfo.workArea.height - window_height,
height: window_height
}
(Note: I haven't tried it, yet)
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});