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.
Related
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.
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 using the following leaflet plugin:
https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer
I am having issues adding a popup to the map when a user clicks on a point.
L.marker([pts[p].lat, pts[p].lng], {
icon: new L.DivIcon({
html: '<div>Test</div>'
})
}).addTo(map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
The popup shows, but I am unable to get the actual flowmap lines to show up. Is there anyway to allow for a popup and to allow for the lines to show up underneath it?
You can use the fact that the CanvasFlowmapLayer extends L.GeoJSON
You just need to overload the method creating the marker and add your popup there ...
var oneToManyFlowmapLayer = L.canvasFlowmapLayer(geoJsonFeatureCollection, {
pointToLayer: function(geoJsonPoint, latlng) {
var marker = L.circleMarker(latlng);
return marker.bindPopup('' + latlng)
},
// et caetera
Check it out here: https://yafred.github.io/Leaflet.Canvas-Flowmap-Layer/docs/main/
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'm still learning and I'm a bit stuck. I may be trying to do to much at once. I have a MapBox map working great with a clickable layer menu taken from examples on the MapBox site. I also have a MarkerClusterGroup which also works and is always visible on the map. Is there a way I could somehow have the MarkerClusterGroup clickable on/off just like layers identified in var overlays = { ...
Below is the code that I think needs the help:
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
Markers: L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
Could be something as simple as misuse of brackets. Thanks in advance.
You have to include your Marker Cluster Group in your overlays object. For example you could instantiate it just before defining overlays, even if your Cluster Group is empty for now.
Then you fill it once it has downloaded its data.
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var clusterGroup = L.markerClusterGroup();
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
Markers: clusterGroup
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup); // use that line if you want to automatically add the cluster group to the map once it has downloaded its data.
});