Using Gmaps4Rails, I've got some markers that I can show/hide based on an attribute. That works fine. However, I'm trying to get the map to auto-adjust to the current set of markers with Gmaps.map.adjustMapToBounds() called after I set the currently visible markers.
Whenever I filter items, the entire map shows, as if it were displaying all of the markers, even though it actually displays just the filtered ones. I think it is because it considers hidden markers when setting the bounds, but I could be wrong!
Here is my filtering code:
$("select").change(->
currentFilters = $('select').val()
hideAllMarkers()
visibleMarkers()
Gmaps.map.adjustMapToBounds()
)
visibleMarkers = ->
filtered = Gmaps.map.markers
filtered = _.filter(filtered, (marker) ->
_.include(currentFilters, marker.market)
)
_.each filtered, (marker) ->
Gmaps.map.showMarker marker
hideAllMarkers = ->
_.each Gmaps.map.markers, (marker) ->
Gmaps.map.hideMarker marker
And here are the options I'm initializing the map with:
#gmap_options = {"map_options" => {
"auto_zoom" => true,
"auto_adjust" => true,
"mapTypeControl" => true,
"detect_location" => true,
"center_on_user" => true},
"markers" => {"data" => #map}
}
Related
I have a polygon GeoJSON layer in my deck.gl map. To avoid having to reload many polygons in many user interactions, I would like to pre-load all polygons and then change their visibility. I tried to achieve this by setting the fill color (and also line color and line width, but there it's hidden in the functions) to null depending on the polygon properties.
new deck.GeoJsonLayer({
id: 'polygon-layer',
data: family,
pickable: true,
getPosition: d => d.geometry.coordinates,
filled: true,
getFillColor: d => show(d) ? hexToIntColor(d.properties.color) : null,
lineWidthUnits: "pixels",
getLineWidth: highlighted,
getLineColor: highlighedColor,
lineWidthMinPixels: 1,
visible: true,
onClick: displayProperties,
updateTriggers: {
getLineWidth: [highlightedMap, highlightedCode],
getLineColor: [highlightedMap, highlightedCode],
getFillColor: [highlightedMap, highlightedCode]
}
})
The result is very much not what I expected
How do I set individual polgons to not be displayed? (And where do these strange black gradients come from which I see instead of just seeing the pink and coastline from the background map?)
Try using DataFilterExtension, setting filterRange to [1, 1] means that only entities that meet the condition (1) will be rendered, and not (0):
new deck.GeoJsonLayer({
...
getFilterValue: (d) => Number(show(d)),
filterRange: [1, 1],
extensions: [new DataFilterExtension({ filterSize: 1 })],
updateTriggers: {
getFilterValue: [yourTrigger]
}
});
A Google map is displayed on the screen and the map style is updated with a dark theme when the map is created (onMapCreated)
The issue is a white blink when the style is changed and it is very visible due to the black theme transition. (Cf. video)
return GoogleMap(
myLocationButtonEnabled: false,
zoomGesturesEnabled: false,
scrollGesturesEnabled: true,
mapType: MapType.normal,
circles: circles,
markers: markers,
initialCameraPosition: cameraPosition,
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
final currentMapStyle = (_themeType == ThemeType.dark)
? _darkMapStyle
: _normalMapStyle;
_mapController.setMapStyle(currentMapStyle);
},
);
}),
As a workaround, I placed the map in a stack.
This stack is filled with the map and a container.
The container is set to transparent after a small period (100ms).
Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience
return this.props.areas.map((area) =>
<Image draggable=true
{...area.imageProps}
onDragStart={() => {...}}
onDragEnd={() => {...}}
onDragMove={() => {...}}/> )
I would like the piece that is currently being dragged to be the one on the highest layer (highest zIndex).
Problem is React-Konva does not support zIndexing, and seems to want you to enforce the zIndexing based on order in the render method.
My solution was to updated the reactState with a currentDragIndex
...<Image
onDragStart = {this.setState({currentDragIndex: area.index})}
/>
Then I try to reorder in the render method. However this causes the drag event to be interrupted.
Anyone have a good solution to this?
You chould just use moveToTop() method
onDragStart={(el) => {el.target.moveToTop();}}
If you have an array of some items, the simplest solution is to change that array, by moving the dragging node to the end of the array. In your render function you just need to draw items from the array.
handleDragStart = e => {
const id = e.target.name();
const items = this.state.items.slice();
const item = items.find(i => i.id === id);
const index = items.indexOf(item);
// remove from the list:
items.splice(index, 1);
// add to the top
items.push(item);
this.setState({
items
});
};
Demo: https://codesandbox.io/s/11j51wwm3
I am working on a columnrange graph in Highcharts where I plot different measurements and confidence intervals in the same plot:
The first few columns inside a group (e.g. Januar) represent measurements for different cities, while the last column represent confidence intervals. I would like to add horizontal lines to the confidence intervals representing the data means. That is, each orange column would get its own line at a specific heigh going from the left to the right side of the orange rectangle. How do I plot such lines?
I know how to add lines as a separate series of type line. However, doing so, I'm not sure how to guess the exact location of orange column and also I do not know how to handle cases when some columns are hidden through the legend.
This question is related to this question though I am not able to get any of that solutions to work in my case.
Here is the fiddle: https://jsfiddle.net/nikicc/rqxqm4hm/
You can use renderer.path to draw proper lines.
function drawDataMeans() {
const intervalSeries = this.get('conf-interval'),
series = this.series.filter(series => intervalSeries !== series)
let lines = this.dataMeansLines
if (!lines) {
lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({
'stroke-width': 2,
stroke: 'black'
}).add(intervalSeries.group))
}
const visibleSeries = series.filter(series => series.visible)
if (intervalSeries.visible && visibleSeries.length) {
intervalSeries.data.forEach((point, i) => {
const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0) / visibleSeries.length
const {x, width} = point.shapeArgs
const y = this.yAxis[0].toPixels(mean, true)
lines[i].attr({
d: `M ${x} ${y} L ${x + width} ${y}`,
visibility: 'visible'
})
})
} else {
lines.forEach(line => line.attr({visibility: 'hidden'}))
}
}
Hook on load/redraw events
chart: {
type: 'columnrange',
inverted: false,
events: {
load: drawDataMeans,
redraw: drawDataMeans
}
},
example: https://jsfiddle.net/dq48sq3w/
I have the following which displays the chart, however when I adjust the handles on the navigator the chart doesn't adjust to display the points for the selected period.
This is my Razor code:
#(Html.Kendo().StockChart<Portal.Models.Company.StockDataPoint>(Model.StockPricePerformance)
.Name("stockChart")
.DateField("Date")
.Series(series =>
{
series.Line(s => s.ClosingPrice)
.Markers(false);
})
.CategoryAxis(axis =>
{
axis.Categories(model => model.Date).Type(ChartCategoryAxisType.Category)
.MajorGridLines(lines => lines.Visible(false))
.Axis.BaseUnit = ChartAxisBaseUnit.Months;
axis.Labels(label => label.Step(24).Rotation(-60).Format("dd MMM yy"));
axis.Axis.BaseUnitStep = 10;
})
.Navigator(nav =>
{
nav.Series(series => series.Area(data => data.ClosingPrice));
nav.DateField("Date");
nav.AutoBind(true);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.ClosingPrice # [#=dataItem.Date#]")
)
)
This is what the chart looks like:
As you can see the chart hasn't been redrawn or adjusted to only show the points for the chosen period. I had a look at the Telerik examples and API reference but I couldn't work out what options would make the navigator work.
So I figured it out.
Instead of using axis.Categories(model => model.Date).Type(ChartCategoryAxisType.Category) I used axis.Axis.BaseUnit = ChartAxisBaseUnit.Days; in the CategoryAxis part of the chart definition.
For my chart this was enough for the chart to show all points (no aggregation) and allow the navigator to work without any extra work.