I understand that react-leaflet implements lazyloading/virtualization to render the data in the viewport and that is working fine for me as well.
However, I am facing a strange issue when I drag.
I am using GeoJSON along with Polygon component of react-leaflet to render different data (its large). Whenever I drag to some level I see only the Polygon data rendered and not GeoJSON.
Not sure if it is due to Polygon overlapping GeoJSON. Any help would be appreciated.
Demo here:
Here is my code:
...
// this gets hidden on drag sometimes.
<GeoJSON
style={mapStyle}
key={`key-${Math.random()}`}
data={sampleDataGeoJSON}
onEachFeature={onEachCluster}
interactive={false}
/>
// this always gets rendered.
{regionBoundary.length > 0 && (
<Polygon
positions={regionBoundary}
pathOptions={{
fillColor: orange,
fillOpacity: 0.5,
color: orange, // stroke color,
weight: 3, // stroke weight,
dashArray: '2, 10',
}}
zIndex={800}
interactive={false}
/>
)}
...
Related
We're building a new application using Leaflet as map displaying framework.
In our current application it's possible to supply the drawing order of specific 'parts' of a layer in relation to the parts of other layers.
Ex.
When the 'fill' of Layer2 is drawn over the 'fill' of Layer1, the 'outlines' of Layer1 can be drawn over the 'fill' of Layer2:
Desired
Normal
Can this be controlled in Leaflet, of do I have to add an extra layer to drawn the outlines of Layer1 over the the fill of Layer2.
EDIT
This is an example of what can be created using the demo code in the answer by 'Falke Design' - so this looks very promising:
EDIT 2
Basically the supplied answer uses two layers (not exactly what I wanted), but this code will be a good alternative.
You can also create a new layer with only borders on a new pane, that is always on top of the normal one:
// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';
And then create, after drawing a layer, a new layer with only borders to the new pane:
// copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke
var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false}).addTo(map);
In the example I used Leaflet-Geoman for drawing:
// create a own pane, that is always on top of the normal drawn shapes
var bordersPane = map.createPane("borders");
bordersPane.style.zIndex = '405';
// add a stroke and a fill color to the drawing option
map.pm.enableDraw('Rectangle',{pathOptions: {fillOpacity: 1, stroke: true, color: '#000', fillColor: 'green'}})
// layer drawn / created event
map.on('pm:create',(e)=>{
// change the color of the drawn layer
e.layer.setStyle({fillColor: 'red'});
// copy the latlngs of the drawn layer and create a new layer on the pane "borders" with only a storke and is not editable or something (pmIgnore)
var layer = L.rectangle(e.layer.getLatLngs(),{pane: 'borders', fill: false, color: '#000', interactive: false, pmIgnore: true}).addTo(map);
// connect the two layers
layer.refLayer = e.layer;
e.layer.refLayer = layer;
// when the drawn layer is changed, change also the border layer
e.layer.on('pm:edit pm:update pm:drag pm:markerdrag',(e)=>{
e.layer.refLayer.setLatLngs(e.layer.getLatLngs())
})
})
https://jsfiddle.net/falkedesign/8owphr26/
The easiest way would be to reduce the opacity of the fill, then you see through it and see the borders:
L.rectangle(latlng,{fillOpacity: 0.5});
//or
layer.setStyle({fillOpacity: 0.5});
Here is a full jsfiddle example
I use a custom series and draw a polygon:
data = [
[80.9251933067, 207.9047427038],
[52.8853803102, 337.7443022089],
[25.9926385814, 120.3586150136]
];
I use echarts.graphi.clipPointsByRect() (like in this echarts-example) to make sure, the polygon is not drawn outside of the grid.
echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
Initially the polygon is drawn correctly, like this:
But when I zoom in, the polygon is distorted: e.g. you can click the zoom part buttom below the chart to zoom from 40 to 60 - in this case I'd expect to see the part of the shape (like highlighted in yellow in the image above) - but instead I see this distorted image:
Maybe this function is not meant for this use-case, or is this a bug?
Is there another function for this use-case or does anyone know a workaround?
Update
Version 4.4.x contains a new clip feature. This makes it easy to avoid the distortion:
in the render function we don't need to clip our shapes: i.e. no need to call clipPointsByRect()
instead we just activate clip on the custom series:
New series definition with clip: 'true':
series: [{
type: 'custom',
clip: 'true',
renderItem: renderItem,
data: data
}]
Here is an updated jsfiddle expample
Original Version
it seems that the function is really not working as expected - see echarts-source code comment:
export function clipPointsByRect(points, rect) {
// FIXME: this way migth be incorrect when grpahic clipped by a corner.
// and when element have border.
I've created an issue #10222 for the e-charts project
A workaround for now is to use a custom clipping function
e.g. lineclip supports the Sutherland-Hodgman algorithm for polygon clipping
Here is the updated jsfiddle-example that shows the correct result when you zoom in:
I'm trying to build a react project with the react-google-maps
library.
Basically it calculates the best route between 2 points and displays the route on the map using the library above.
For drawing I'm using the Polyline and MarkerWithLabel modules:
The Polyline to draw the segments
The Markers to place the start of a segment
The issue that I am having is the position of the labels form the MarkerWithLabel, if the zoom level is set to fit the whole route the labels overlap. This is because markers are very close and the zoom level is small, which is normal...
I've also attached 2 images
The first one with the zoom level to fit all the route (in which the markers label overlap)
The second one with the zoom level over one segment(in our case the city of Timisoara) to actual see the all the markers
The code for the MarkerWithLabel is below
const Markers = () => segments.map((segment) => {
const { marker } = segment;
const style = styles.vehicles[marker.vehicle.kind];
return (
<MarkerWithLabel
key={marker.key}
position={{ lat: marker.lat, lng: marker.lng }}
labelAnchor={new goo.Point(-10, 15)}
noRedraw
icon={{
path: goo.SymbolPath.CIRCLE,
scale: 4,
strokeWeight: 2,
fillOpacity: 1,
fillColor: '#ff3f10',
strokeColor: '#ffffff',
}}
labelClass="marker-label"
labelStyle={{
width: '400px',
backgroundColor: 'none',
color: style.color,
}}
>
<div style={{ clearFix: 'both' }}>
<span className="marker-text">
{marker.label}
</span>
<div className="circle">
{style.icon}
</div>
</div>
</MarkerWithLabel>
);
});
I want to know if there is a simple way of resolving the overlapping problem, just to place them somehow one next to the other or in different positions.
One solution would be to manually set the labelAnchor but I don't know how to find a solution for this, to detect which are overlapping and which not
function addCircles(location,radius,name) {
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: location,
radius: radius
});
circles.push(cityCircle);
i am createing circle like this in gmaps is there simiar kindof option in bing maps???
There are several tools for creating circles in Bing Maps. The most common is to use the getRegularPolygon function in the spatial math module to generate the locations for a circle and then you can create either a polyline or a polygon from it. Here are a bunch of related code samples:
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_Circles
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_DrawCircle
http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CustomToolbar
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_AccuracyCircle
Note that there is a source code button in the top right corner of all the samples.
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.