I am using React-Leaflet to display a Leaflet.js map. I use React-Leaflet GeoJSON (source here) to show a layer of polygons on the map.
Although I can vary the opacity of the fill (fillOpacity) of the polygon, I cannot find an option to fill the polygon with a pattern (e.g. checkers, stripes, etc.)
I have found a project (Leaflet.pattern) that supports adding fill patterns to Leaflet.js shapes, but it has not been adapted for use with React-Leaflet.
So my question is: How can I add patterns to React-Leaflet shapes, or adapt Leaflet.pattern for use with React-Leaflet? (for the latter, instructions on how to create custom React-Leaflet components are here, but I don't know how to do it for this case - it seems more complex than usual)
Take a look at the section in the docs about extending react-leaflet
If you are using react-leaflet v1 you can directly extend react-leaflet's GeoJSON class. If you are using v2 you'll need to extend the Path class instead. To understand why that's necessary take a look at this issue.
Once you've figured out which class to extend it's likely that most of your changes will need to happen in the createLeafletElementfunction and maybe the updateLeafletElement function.
Related
Latest Mapbox SDK and Swift
So I've been battling with this for 3 days now...
I'm trying to use an array of coordinates to create a line of extruded cylindrical pillars (or a sloped solid "wall" if that makes sense... But I've found this to be harder than just a line of pillars)
I've read most of Mapbox's docs but can't get my head wrapped around the use of MGLShapeSource, MGLPolygon and MGLFillExtrusionStyleLayer.
From what I can tell, one needs to add a polygon to a source, add that source to the map object, then apply the extrusion layer to that source... However, I can't figure out how to make that work.
This is what I've managed so far, as a solid wall... But using pillars, I could adjust the height as the line goes, creating a sloping look
Any advice would be appreciated. I'd paste my code here but it is WAY too messy and too much after 3 days of trial and error. haha.
BONUS: I'd like to animate the path being created as it goes... So pillar 1 appears at a certain height, then pillar two and a lower height, then pillar 3 and so on. This involves modifying the source apparently - have little idea on how to do that though :(
Are there individual height properties associated with the points in your underlying data? Your end goal is definitely possible, but it's dependent on whether or not you have the data for reference by your style layer.
Unfortunately, the Mapbox site doesn't have any iOS examples explicitly tied to this. But, the 3D buildings example follows basically the same flow. (i.e. mapView.addSource -> MGLFillExtrusionStyleLayer -> layer.fillExtrusionHeight).
The crucial bit in the building example is using .fillExtrusionHeight with a "forKeyPath" expression to set the extrusion height based on the corresponding property in your data:
layer.fillExtrusionHeight = NSExpression(forKeyPath: "height")
If you don't have height within your underlying data, you'll have to get some in order for the extrusion styling to work this way.
⚠️ Disclaimer: I currently work for Mapbox ⚠️
Is there a way to draw a vector layer with CorelDraw for example and place it on napboxgl and use it as geojson layers?
For example https://seatgeek.com/colorado-rapids-at-seattle-sounders-fc-tickets/mls/2017-10-22-1-pm/3700786
Are they using geojson or etc.? Or just some sort of vector format?
I can't use geojson as it is hard to draw with QGIS any straight lines or symmetrical objects. I just want to draw a lot of vector objects and use them as layers with mapboxGL(use mapbox as render method and interact with layers as with geojson)
Any suggestions how to do it? Or is there a way to draw with Corel and then place it on map with QGIS?
Thanks
UPD:
Now I am using Corel -> dxf export and then import it to QGIS, then save it as geojson. But have some glitches with displaying that geojson geometry in mapbox, so I have to draw another in QGIS over the imported(dxf) one.
Here is an example of the bug, should be just a green polygon like the gray one
UPDATE: my fault, I was using lines instead of polygons.
I think you can achieve this as follows:
Convert the Corel output to SVG
Create an HTML element containing the SVG (not necessarily added to DOM)
On your Mapbox map, add a Canvas source containing the canvas: see https://www.mapbox.com/mapbox-gl-js/api/#canvassource
Obviously you will need to determine the lat/lon of the corners of your image somehow.
I created a custom circle layer. I want to show this layer only on water and not on land. I managed to do the opposite (ie: showing the layer on land and not on water) using below command. Refer this image for better understanding
map.moveLayer('polygon','water');
Now I need to know the land layer which is used by mapboxgl so that I can call function map.moveLayer('polygon','land'); to achieve what i want.
I need help to find the different layers present in the mapboxgl-streets map. But unfortunately, Mapboxgl doesn't have map.eachLayer function.
You can use the Map#getStyle method to get a serialized representation of the entire style including the layers.
map.getStyle().layers
It depends on the map style you're using. In general, you either have to look at its source or load it in Mapbox Studio to identify the correct layer name. Also keep an eye on https://github.com/mapbox/mapbox-gl-js/issues/4173.
Just to add to Lucas' answer (which is still correct), map.getStyle().layers provides all layers in the style, including ones you have explicitly added (via map.addLayer()), and those that are included in the style (which could be a lot). Careful how you filter through these. For my case, I created arrays to hold the layers I created myself, to make future iteration simpler.
I'm following this example:
https://www.mapbox.com/mapbox-gl-js/example/multiple-geometries/
For each feature / shape on the map, they draw a new layer. However, I want to make "set" of features per Geojson I'm rendering on the map to be its own layer. Is it possible to group them somehow?
In Mapbox GL, each layer is associated with exactly one "shape" (circle, line, symbol, fill, raster, or fill-extrusion). It is not possible to render multiple "shapes" per layer.
You can control which features are rendered in a particular layer using filters.
Does that provide any more clarity? Can you describe specifically what you're trying to do?
Does leaflet provide a method for determining which, if any, rendered point is within a polygon? Not by iterating over a bunch of shapes and checking bounds, but by using an rtree index, perhaps?
See the Leaflet plugins page, on which you'll find leaflet point-in-polygon and Leaflet.LayerIndex.