I am following markercluster examples from Mapbox library, but can't solve my problem. If you guys take a look at my working example here, you will notice this line of code:
L.mapbox.featureLayer(markerLayer).on('ready', function(e) {
What I initally thought was I could put markers inside of markercluster featureLayer, but I guess it was a wrong approach. Any solutions? Thanks.
Example following here
The mapbox example you refer to makes an AJAX call to retrieve the GeoJSON data, hence it needs to attach an on "ready" listener.
In your case your GeoJSON data is defined in your scripts, so the "ready" event will not be triggered (besides, you should use L.mapbox.featureLayer with your GeoJSON object directly, not a Feature Layer).
You can simply use the eachLayer method to iterate through all created markers within the Feature Layer, and add them into your Marker Cluster Group.
var clusterGroup = new L.MarkerClusterGroup();
var markerLayer = L.mapbox.featureLayer(markers).eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
Updated Plunker: http://plnkr.co/edit/fN6xYcn1Lg532eLe39IS?p=preview
Related
I have a layer called "Searched LayerX" having a vector tile source. I am having a simple requirement of highlighting a feature inside this "Searched LayerX" at runtime.
I was thinking of using the result of queryRenderedFeatures on "Searched LayerX" with the filter of unique ID of this particular feature and using this feature's geojson as a separate source to the new layer which I will be adding as "Selected LayerX".
var features = mapBox.queryRenderedFeatures({layers:['Searched LayerX'], filter : ["==",'gid','7818_2_CA']})
var selectedFeature = features[0];
Resultant feature set does not provide any geojson which I can use to create a new geojson source.
So my question is, how do I use the result as a different source to my "Selected LayerX"?
You can use the method described in the first link below - but understand that the returned feature is not the same as the source GeoJSON feature - it is the vector tile representation of that feature at that zoom level, which means it might be highly simplified.
https://gis.stackexchange.com/questions/186533/highlight-feature-with-click-in-mapbox-gl
Another method is to add another layer with the same source, and use the filter function for the highlight as shown in the two links below -
http://www.mapbox.com.s3-website-us-east-1.amazonaws.com/mapbox-gl-js/example/query-similar-features/
highlighting polyline features in mapbox-gl.js
Try this post, I have added the code which will let you have the features using querySourceFeatures() https://stackoverflow.com/a/66308173/9185662
I have already added geojson features to my leaflet map. I want to be able to loop through those geojson features. WHen I do map.eachLayer(function(layer) {...}) it only shows be the tile layer and none of the geojson that are added.
Rather than map.eachLayer, you should be using the .eachLayer method on the L.geoJson itself. For example:
var geoJsonLayer = L.geoJson(myGeoJson).addTo(map);
geoJsonLayer.eachLayer(function(layer) {
layer.bindPopup(layer.feature.properties.name);
});
You can also specify a function to be applied to each feature at the time you create the L.geoJson, using the onEachFeature option.
Is there any way to load a GeoJson file with "simplestyle" (for example, created with geojsonio) directly into Leaflet, so it could use the color, stroke and other properties?
It seems that it is supported in the mapbox, but what about leaflet itself?
Thanks,
Alex
This isn't supported out-of-the-box by Leaflet but you could write your own logic using the pointToLayer function of L.GeoJSON:
Function that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created)
http://leafletjs.com/reference.html#geojson-pointtolayer
new L.GeoJSON(collection, {
pointToLayer: function (feature, latlng) {
// Return a custom marker
}
});
In that function you have access to each feature's properties so you can return a custom marker based on them. Hope that helps, also found the following gist on github which shows a implementation which might do what you are looking for:
https://gist.github.com/tmcw/3861338
I have two geoJSON files, one is for drawing the lines(states.js), and another one is for adding markers on the map (marker.js).
However, when I add a line of code that is supposed to be adding the marker layer, nothing works.
var markerLayer = L.mapbox.featureLayer(markers).addTo(map);
How should I approach this? I thought featureLayer would work to add multiple layers, but it doesn't seem to be working well. Help is much appreciated.
Working example so far: Plunker
Example I'm following is here.
Couple of things wrong here. You forgot to declare your global L.mapbox.accessToken:
L.mapbox.accessToken = 'pk.eyJ1Ijoia2thZ2lsbCIsImEiOiJjaWdsdmJjeWkwMjMwdWFrcjI4eGZ3MGd2In0.WslWCpxaXxUOgUZP_VT1cg';
You're adding the statesData twice, once in a L.mapbox.featureLayer and once in a L.GeoJSON:
var statesLayer = L.mapbox.featureLayer(statesData).addTo(map);
statesLayer = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Once is more than enough: here's a example on Plunker: http://plnkr.co/edit/kV8h69VJt2jtpqwdCpJo?p=preview
We use leafletJS to show maps with round about 100 markers. Some of these markers are located on exact the same position. Marker2 is above Marker1 so Marker1 isn't visible. Is there a way to rotate Markers in a way that you can see there are more then one marker?
may be you should look at https://github.com/Leaflet/Leaflet.markercluster plugin
here demo - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
The drawback with walla's answer is that Leaflet.markercluster requires clustering, which may not be an option depending on your requirements i.e. you need to always display individual markers.
OverlappingMarkerSpiderfier-Leaflet (a bit of a mouthful) works well in this case and it's fairly well documented. It displays a 'spider' of markers on click only if they overlap i.e. if the zoom level increases so markers don't overlap, then it won't 'spider' on click, which is quite nice. Demo.
It's available as a NPM package but it isn't a proper ES module, so usage is a bit trickier than usual if you're expecting an ES module:
// Need to specifically import the distributed JS file
import 'overlapping-marker-spiderfier-leaflet/dist/oms';
// Note access to constructor via window object
// map refers to your leaflet map object
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener('click', (marker) => {
// Your callback when marker is clicked
});
// Markers need to be added to OMS to spider overlapping markers
markers.forEach((marker) => {
oms.addMarker(marker);
});
// Conversely use oms.removeMarker(marker) if a marker is removed
Alternatively there is a forked version (confusingly) called OverlappingMarkerSpiderfier that is a proper ES module so you can do:
import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);
However as of 24 Jan 2020 there's a fair bit of divergence based on commits between the two so YMMV.
FWIW I'm using the original.
If anyone is looking working sample for Angular below are the steps,
Install it via npm: npm i --save overlapping-marker-spiderfier-leaflet
Then import it into the component where you need it: import 'overlapping-marker-spiderfier-leaflet/dist/oms';
Add this line on top of the file where you import it: const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;
Add the oms markup like that: this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });
Add the markers to oms at the same place where you add your markers to the map so oms can track them properly this.oms.addMarker(marker);
xlm is already gave a complete answer. Thanks to him for that answer. But this is a slightly changed answer that worked for me in angular.
we had the same problem, follows the jsFiddle with the solution we found http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/
var marker1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: image,
size: new google.maps.Size(134,130), //different sizes
},
zIndex: 2, //different overlays
title: '1ยบ marker',
});