So in leaflet I can do this:
const [groupedLayers] = useState<DeviceFeedLayerGroups>({
mine: new LayerGroup(),
public: new LayerGroup(),
private: new LayerGroup(),
favorite: new LayerGroup(),
});
const onEachFeature = (
feature: Feature<Geometry, NexusGenAllTypes['GeoJSONFeatureProperties']>,
layer: L.Layer,
) => {
/* ... */
groupedLayers[feature.properties.relation].addLayer(layer);
}
geoJSON(deviceFeed, {
pointToLayer,
onEachFeature,
});
This way I can have groups of layers that can be turned on or off. Can this be done with mapbox-gl?
Thanks.
I don't totally understand the Leaflet functionality you're talking about, but:
Mapbox GL JS doesn't support "groups" of layers. However, you could make one GeoJSON source, with several layers that display different features from it, using a filter. Then each layer can be shown or hidden independently.
Related
In my Vue (2.x) application, I have a number of places where I use vue2-leaflet maps.
There are a few common features of these maps, but they are otherwise completely different, so it doesn't make sense to have all of them use a single component that contains an <l-map> (and all other relevant map components).
In order to reduce copying an pasting, I have created a few mixins with common features. For example, I have written a mixin for any maps that need to be able to auto-fit to their contents, so the only thing I need to do in each component that uses it is add :bounds="autofitBounds" to the <l-map> component.
I wanted to do create something similar for the <l-tile-layer> component, because all of our maps use the same layers.
I created a mixin that provides the url and attribution for the tile layer like this:
export default {
data () {
return {
url: process.env.VUE_APP_MAP_TILE_URL || 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: process.env.VUE_APP_MAP_TILE_COPYRIGHT || '© OpenStreetMap contributors',
};
},
};
I can use it by adding the mixin to my component and then adding the <l-tile-layer> component inside the <l-map> like this:
<l-tile-layer :url="url" :attribution="attribution" />
I wanted to see if there was a way to reduce the boilerplate further.
First, I tried to create it as a component instead, like this:
<template>
<l-tile-layer :url="url" :attribution="attribution" />
</template>
<script>
import { LTileLayer } from 'vue2-leaflet';
export default {
name: 'MyTileLayer',
components: {
LTileLayer,
},
data () {
return {
url: process.env.VUE_APP_MAP_TILE_URL || 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: process.env.VUE_APP_MAP_TILE_COPYRIGHT || '© OpenStreetMap contributors',
};
},
};
</script>
Then I can use that component inside my <l-map> without needing to add any attributes to it, like this:
<my-tile-layer>
The problem is that this doesn't render properly. Here are two screenshots - the <l-tile-layer> used directly on the left, and the <my-tile-layer> wrapper on the right.
Is there a better way to create a tile layer component with default values? Or is there a way I can fix the rendering of <my-tile-layer>?
Add layers in MapSettingsControl dynamically so that I can toggle there visibility.
When I tried to add layer in mapSettingControl It was disabled.
Background:
I have a web app developed using leaflet. I have 5 layers as shown in figure-1. Its working fine in leaflet. Now I am using HERE Maps javascript API for developing same web app.
How I did in Leaflet:
I add them as map overlays when adding layer control i.e.
let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
while when I need to add overlay in layer control dynamically I use following:
layerControl.addOverlay(somelayer, "layer name");
This work fine.
How I am doing by using Here Maps js api:
As I have five layers, two are cluster layers while two are marker layer and one geojson.
I have tried to apply same approach by creating GROUP for five layers and adding them into the layers of map setting controls.
public clusterGroup1 = new H.map.Group();
public clusterGroup2 = new H.map.Group();
public markerGroup1 = new H.map.Group();
public markerGroup2 = new H.map.Group();
public boundary = new H.map.Group();
created customized map setting ui :
this.customizedMapSetting = new H.ui.MapSettingsControl({
baseLayers: [{
label: "Normal", layer: defaultLayers.vector.normal.map
}],
layers: [{
label: "Cluster-1",
layer: this.clusterGroup1
},
{
label: "Cluster-2",
layer: this.clusterGroup2
},
{
label: "Marker-1",
layer: this.markerGroup1
},
{
label: "Marker-2",
layer: this.markerGroup2
},
{
label: "Geojson",
layer: this.boundary
}]
});
this.customizedMapSetting.setAlignment('top-right');
ui.addControl("customized", this.customizedMapSetting);
I am adding markers to a group like this:
dataArray.forEach(data=> {
let lat = data.latlng[0];
let lng = data.latlng[1];
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon});
this.markerGroup1.addObject(marker);
});
Problem Statement
I am unable to get this mapSetting ui working for my layers.
How can I add clusterlayers in MapSettingControl so that I can toggle (show/hide) them? (I think I am not using right approach of group) When I add them as a map.addLayer(clusterLayer) it work fine.
How Should I add layer dynamically in MapSettingControl? Possible alternative of leaflet method :
layerControl.addOverlay(somelayer, "layer name");
Looking at the API, it seems MapSettingsControl.Options has
layers: {
label: 'test',
layer: instance of H.map.layer.Layer
}
The error we get when toggling is InvalidArgumentException from DataModel.add regarding the first argument. I believe this means that on toggle, DataModel.add is called and passed the H.map.Group that is being set in the MapSettingsControl, but the DataModel.add expects a H.map.layer.Layer but receives the H.map.Group.
I'm not sure if it's possible to simply add a H.map.Group in MapSettingsControl. I think we have to somehow add the H.map.Group as a provider for a H.map.layer.Layer and add the Layer object to MapSettingsControl.
EDIT
As for adding cluster. When I try to add a new layer for the cluster, it is grayed out. The cluster provider is created and the ObjectLayer is created as well but I think after you have created the MapSettingsControl and defined the variable that will act as the H.map.layer.Layer, updating the variable will have no effect on the toggle behaviour.
I am exporting Google Directions routes as KML and displaying them on a Mapbox map by reading them with Omnivore and adding them to the map,
The Google KML stores each route as two Places (the start and end points) and one LineString (the route). In Mapbox I would like to show only the routes, that is to filter out the markers somehow. I'm displaying markers out of my own database and the Google markers clutter it up.
Here is my code. I change the styling of the LineStrings just to show that I can, but do not know what magic call(s) to make to not display the Points.
Thanks.
runLayer = omnivore.kml('data/xxxx.kml')
.on('ready', function() {
var llBnds = runLayer.getBounds();
map.fitBounds(llBnds);
this.eachLayer(function (layer) {
if (layer.feature.geometry.type == 'LineString') {
layer.setStyle({
color: '#4E3508',
weight: 4
});
}
if (layer.feature.geometry.type == 'Point') {
//
// Do something useful here to not display these items!!
//
}
});
})
.addTo(map);
Welcome to SO!
Many possible solutions:
Most straight forward from the code you provided, just use the removeLayer method on your runLayer Layer Group when you get a 'Point' feature.
Cleaner solution would be to filter out those features before they are even converted into Leaflet layers, through a custom GeoJSON Layer Group passed as 3rd argument of omnivore.kml, with a specified filter option:
var customLayer = L.geoJSON(null, {
filter: function(geoJsonFeature) {
// my custom filter function: do not display Point type features.
return geoJsonFeature.geometry.type !== 'Point';
}
}).addTo(map);
var runLayer = omnivore.kml('data/xxxx.kml', null, customLayer);
You can also use the style and/or onEachFeature options on customLayer to directly apply your desired style on your LineString.
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
I am aware of bringToFront(), but it does not meet my requirements. I would like to set the zIndex dynamically based on properties.
Leaflet has the method setZIndex(), but this apparently does not work for geoJson layers:
https://jsfiddle.net/jw2srhwn/
Any ideas?
Cannot be done for vector geometries.
zIndex is a property of HTMLElements, and vector geometries (lines and polygons) are rendered as SVG elements, or programatically as <canvas> draw calls. Those two methods have no concept of zIndex, so the only thing that works is pushing elements to the top (or bottom) of the SVG group or <canvas> draw sequence.
Also, remind that L.GeoJSON is just a specific type of L.LayerGroup, in your case containing instances of L.Polygon. Furthermore, if you read Leaflet's documentation about the setZIndex() method on L.LayerGroup:
Calls setZIndex on every layer contained in this group, passing the z-index.
So, do L.Polygons have a setZIndex() method? No. So calling that in their containing group does nothing. It will have an effect on any L.GridLayers contained in that group, though.
Coming back to your problem:
I would like to have certain layers to be always on top of others, no matter in which order they are added to the map.
Looks like the thing you're looking for is map panes. Do read the map panes tutorial.
This is one of the reason for the implementation of user defined "panes" in Leaflet 1.0 (compared to versions 0.x).
Create panes: var myPane = map.createPane("myPaneName")
If necessary, set the class / z-index of the pane element: myPane.style.zIndex = 450 (refer to z-index values of built-in panes)
When creating your layers, specify their target pane option: L.rectangle(corners, { pane: "myPaneName" })
When building through the L.geoJSON factory, you can loop through your features with the onEachFeature option to clone your layers with specified target pane.
Demo: https://jsfiddle.net/3v7hd2vx/90/
For peoples who are searching about Z-Index
All path layers (so all except for markers) have no z-index because svg layers have a fix order. The first element is painted first. So the last element is painted on top.
#IvanSanchez described good why zIndex not working.
You can control the order with layer.bringToBack() or layer.bringToFront().
With that code you have more options to control the order of the layers.
L.Path.include({
getZIndex: function() {
var node = this._path;
var index = 0;
while ( (node = node.previousElementSibling) ) {
index++;
}
return index;
},
setZIndex: function(idx) {
var obj1 = this._path;
var parent = obj1.parentNode;
if(parent.childNodes.length < idx){
idx = parent.childNodes.length-1;
}
var obj2 = parent.childNodes[idx];
if(obj2 === undefined || obj2 === null){
return;
}
var next2 = obj2.nextSibling;
if (next2 === obj1) {
parent.insertBefore(obj1, obj2);
} else {
parent.insertBefore(obj2, obj1);
if (next2) {
parent.insertBefore(obj1, next2);
} else {
parent.appendChild(obj1);
}
}
},
oneUp: function(){
this.setZIndex(this.getZIndex()+1)
},
oneDown: function(){
this.setZIndex(this.getZIndex()-1)
}
});
Then you can call
polygon.oneUp()
polygon.oneDown()
polygon.setZIndex(2)
polygon.getZIndex()
And now layergroup.setZIndex(2) are working
First of all I would like to thank you all for amazing libraries like leaflet/leaflet.draw and leaflet.snap.
What I want to do is outside leaflet.draw control with supporting leaflet snap. This is nicely working with in side map draw control.
Below I show how did I call outside leaflet draw control:
<div><button id="draw_mark1" onclick="drawMarker1()" >Draw Marker1</button></div>
<div><button id="draw_polyline1" onclick="drawPolyline1()" >Draw Polyline1</button></div>
function drawMarker1(){
var markerDrawer1 = new L.Draw.MarkerA(map, { icon: new myIcon_xx() });
markerDrawer1.enable();
}
function drawPolyline1(){
var polylineDrawer1 = new L.Draw.PolylineType1(map);
polylineDrawer1.enable();
}
note:- leaflet.snap not in the tag list. I want to tag it too.