I have following map in mapbox editor:
Is it possible to fill custom area of the map ? (in this example, area is selected, I can see its attributes)
How can I do it?
You'll want to filter the data and then polygon styles to style the layer.
For instance, if the ID you can rely on is ID_0, then
#GEO_adm2[ID_0 = 81] {
polygon-fill:#f00;
}
Related
In mapbox_ios:
1. About MGLFillStyleLayer and MGLLineStyleLayer, how to set different styles (color, width, dotted line) for individual features.
A scene: if it is a separate polyhedron with no connection between the two surfaces in different places, but it is a feature, if I want to add more polyhedron to modify the graph (add a point and connect the two sides), how to modify the graph?
Hope to get help, thank you!
To answer your first question, you can style individual features within a style layer based on feature attributes.
Get started by adding the layers to your map. You could create your source, then style the layer's color based on the value in the feature attributes. Use the lineColor property for your MGLLineStyleLayer and fillColor to change the color of your MGLFillStyleLayer.
For example:
let layer = MGLLineStyleLayer(identifier: "layer", source: source)
layer.lineColor = NSExpression(forKeyPath: "color")
style.addLayer(layer)
You can also create a dictionary with possible attribute values and the color you would like to use as values. This example shows that approach by using icon images.
I am building a map and want to use the leaflet markercluster plugin to cluster any markers that intersect visibly (the icons overlap each other). I can't seem to figure out a way to check whether the markers icons intersect though.
I've examined the documentation and the Marker objects. The marker object has no "bounds" object and has no function to return the bounds of the icon.
Yes, it's possible.
This is implemented in some Leaflet plugins, like Leaflet.LayerGroup.Collision - the technique involves fetching the computed style of each icon's HTML element to get the actual size in CSS pixels, offset those numbers by the relative pixel position of the marker's LatLng, and using a rtree data structure to speed up the calculation of the overlaps. Do have a look at the complete source for LayerGroup.Collision plugin.
Note that this technique only takes into account the rectangular bounding boxes of the icons; while it would be possible to check for the individual transparent pixels, that would involve more complex data structures and a different technique to fetch the opacity of each pixel.
I have uploaded polygon shape zip file in mapbox tileset and created layer name as polygon_label but layer labels are showing duplicate inside polygon area.
So there is any way to centroid the polygon geometry or restrict to display duplicate label.
How to get label centroid of the polygon and remove duplication of the label from polygon area?
You need to create point geometries and use that as your source.
I have the same issue with a shapefile with land sections I imported. To get the outline of the land sections I added a fill type layer since the tileset contains polygon features. Then I add another layer of type symbol to be able to show the section address text field from the tileset features. I set the placement as "Point". But, the text field shows multiple places inside the polygons.
The only solution I have found is to make the labels appear along the boundries of the polygons by setting the placement as "Line". This still shows multiple labels. But, it is a bit more friendly for the user.
This cite uses tiles from here, but in the initial state they are gray.
How can I fill tiles to make them look like in the example?
I use this code:
map = L.map('map', {zoomControl: false}).setView([..., ...], 15);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"', {}).addTo(map);
Images:
needful:
original - light all:
There are a few approaches to this problem:
Search for a different tile provider which serves the desired colour scheme
Serve your own tiles after creating your own rendering style
Change the saturation of the tiles on the client side using 2d canvas
Substitute colours in the tiles on the client side using 2d canvas
Apply CSS colour filters to the tiles (by specifying a CSS class name for the tilelayer)
Change the saturation and substitute colours in the tiles on the client side using WebGL
The map at coinmap.org (the site mentioned in the question) uses a CSS filter (filter:saturate(4)) on all the tiles (on the CSS selector .map .leaflet-tile-pane)
You can use the ColorFilter plug-in with ['grayscale:100%'].
See some Demos.
I'm using leaflet for show raw itinerary to go to some markers.
I'm showing my itinerary with a leaflet polyline.
But I would like to be able to
How to hide and show a polyline in leaflet ?
I can do this :
$('.leaflet-overlay-pane').hide();
and
$('.leaflet-overlay-pane').show();
But this will show and hide all my polyline.
I would like to be able to hide and show them separately.
Thanks.
If you have a reference to the polyline
var polyline = L.polyline(...);
Then you can use
map.addLayer(polyline);//For show
map.removeLayer(polyline);// For hide
at the moment I think there is no native method to only hide/show, maybe in the 0.7 version
Other solution is to access to the object container, in a old commet from the maintainer
I don't think there's an easy solution, for tile layers at least. :( I'll try to handle this sooner.
For vectors, you can change path._container.style.display, and for markers - marker._image.style.display and marker._shadow.style.display.
Removing and adding objects on the map will also change the order of the layers (if you have more than one in your legend). The added objects will always be on top and not in the original order. I use setLatLng (markers) and setLatLngs (polylines and polygons) to do a quick trick without changing the order. Just change the latLngs to e.g.(1000,1000) outside your view.
var myLatLng0 = L.latLng(1000,1000);
var myObject = L.marker(myLatLng,{....});
myObject.latlng = myLatLng;
or
var myObject = L.polygon(myPath,{....});
myObject.path = myPath;
Hide / Show marker:
myObject.setLatLng(myLatLng0);
myObject.setLatLng(myObject.latlng);
Hide / Show polyline or polygon:
myObject.setLatLngs(myLatLng0);
myObject.setLatLngs(myObject.path);
Note: hiding polylines and polygons will also work with setLatLngs(false). setLatLng(false) for markers will give an error.