I am using the mapbox js api to draw a few cricles on a map and I would like to add a text to explain what the circle represents. In this case, each circle shows how far you can walk in 5 minutes, 10 minutes and so on.
I want the text to be just a text not a marker (not clickable) but I can't find any way to do this. Does anyone know if this is possible?
Update
To clarify, what I want to do is add a custom text like "New York" in this example https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-popup-onload/
Perhaps you can add a custom legend instead to explain the circles, i.e.:
var map = L.mapbox.map('map', 'examples.map-y7l23tes');
map.legendControl.addLegend('... legend html ...');
you can use custom markers to display whatever you want against a point.
Custom Markers
then just use the following to iterate each layer and open its popup as described in your example. this means you wont have to click on it to open it.
marker.eachLayer(function(m) {
m.openPopup();
});
Related
I am working on a Leaflet project, which can have quite a few markers on the map. The behavior that I have currently is, if you click on any of the cluster it will spiderify to show all the marker and the user can hover over individual markers to see more information about it. As the number of markers can be somewhere around 100 - 10K it can be a real issue to show all of them.
Theoretically, I would like to show 9 items and 1 items which will be kind of More marker containing information about the rest of the marker, which can be clicked which would lead to a different page.
My current implementation looks like this on clustermouseover.
private createMarkerClusterGroup() {
if (this.markerClusterGroup) { return; }
this.markerClusterGroup = L.markerClusterGroup(this.effectiveMarkerClusterGroupOptions);
this.markerClusterGroup.on('clusterclick', (event: any) => {
const cluster: ExtendedMarkerCluster = event.layer;
event.layer.spiderfy();
});
Few of the things I have been able to figure out are :-
I can get the total children markers using const markersCount = cluster.getAllChildMarkers();
I will have to remove all the extra markers and set the new markers location equal to any one of the removed markers and set a key with all the id's for them to be retrieved afterwards.
I am unable to put them together and make them work. Any help is appreciated.
I had kind of similar problem once. I resorted to showing a popup containing all of the markers rendered in a list as it was more clear to see. From what I recall I also had to render each marker with a data-id attribute, just to be able to get the data needed for tendering the popup.
Let me know if this helps a bit and don't hesitate to ask for more.
I'm trying to use leaflet to make an interactive map (like a choropleth) using data from geojson files and I've a problem to update data and legend on the map, dynamically.
My code use a leaflet map with a mapbox-light baselayer, a dropdownlist and a legend. Two jsons files are loaded and I use two map panes to use them and set their z-index. Dropdownlist has two options and is used to change the selected geojsons to expand this example; the real case has 25 values to choose.
I use $(id_dropdownlist).change to make everything. If ddl change:
remove panes if these exists.
select geojsons files using ddl value (default url myjson files + ajax for this example).
add panes, load and color polygons.
When I make the first change in the ddl works fine: select geojsons files, load and color polygons. My problem appears from the second change onwards, after remove panes: geojsons are loaded successfully but these are not showed/colored on my map.
My amateur debugging detect than in the first change the div leaflet-pane element has the geojsons values, but from the second change onwards the same div leaflet-pane has not data.
Also, I want to update the legend at same time after load the geojsons, but I do not have any idea how to make that.
Here is a functional example in JSFiddle.
If someone could help me step by step, for learn it, I would be very grateful. If panes are not the way to do this, or another way to do this better, please tell me how.
When user changes the selection of your drop down list, you first try to clear your map by removing your previously created custom panes from the DOM.
There is a very high chance Leaflet does not expect such fiddling with its panes, even if they are custom. That is probably why when you create new custom panes with the same names, Leaflet does not reference them correctly, hence it does not display your new layers in those new panes.
For adding and removing your layers dynamically to / from the map, you should simply use Layer Groups instead. In particular, it provides you with a clearLayers method that does what you are trying to achieve.
Therefore, you just add your polygons and markers to that Layer Group (instead of directly to the map), so that you can easily clear them when the user selects a new value. The custom panes remain unaffected.
// Initialize the Layer Group.
// Add it to map so that its children will appear on map.
var layerGroup = L.layerGroup().addTo(map);
// On <select> "change" event:
layerGroup.clearLayers();
// When you have retrieved your data and are ready to convert it to layers:
L.geoJSON(data, {
style: { // Can be a function as usual.
pane: 'polygon'
},
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
pane: 'POI'
});
}
}).addTo(layerGroup); // Add to layerGroup instead of directly to map.
Updated JSFiddle: https://jsfiddle.net/Ljetvd2x/4/
As for updating your legend, I am sure you should be able to find some resources on that topic, including here on SO. If you still need help, that should very probably be separated into a new post.
I've built an Ammap that displays data in an infowindow based on which continent gets clicked, and I'm really close to where I want to get, with the exception of 2 things:
Upon map load, the first click displays the correct data, but that data remains in the infowindow - clicking other regions takes no effect. The objective is to clear the infowindow and display data from the region clicked last.
After onclick, the region's color changes accordingly. But if you hover above it again, the color disappears. How do I make the onclick color 'stick'?
I believe I made the error when I commented these few lines out - the original code had enabled multiple-area select, and the map I had in mind should only allow single area select.
//event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
//map.returnInitialColor(event.mapObject);
Please see the working pen here and let me know if you can help: http://codepen.io/anon/pen/jPeXor
Thanks in advance for any help!
I have somewhat of a unique problem. I'd like to allow a user to draw only one polyline and limit it to that. I'd also like that to be able to edit the polyline at will. I found this example: Google Maps Drawing Manager limit to 1 polygon but that basically just disables the control panel which still doesn't limit anything and secondly I want them to be able to edit their polyline, just not be able to create new ones.
I'd even be fine if they had some sort of a onDrawStart listener that would clear the previous shape but as far as I can tell, they don't have any such listener. Thanks!
Add a listener to overlaycomplete or polylinecomplete. Save the new layer. Then you can either delete the old one after the user draw another one..
google.maps.event.addListener(map.drawingManager, "overlaycomplete", function(event){
event.overlay.overlayType = event.type;
lastOverlay = event.overlay; // Save it
map.drawingManager.setDrawingMode(null); // Return to 'hand' mode
});
So, if you want to delete the layer => lastOverlay.setMap(null).
There is also a listener that fires when the user select a drawing tool. Mmm I can't find this listener. Not sure if it really exists.
How can I retrieve and object on google map without user interaction. Meaning the user do not click on the object.
I have 10 polygons and I want user to navigate to each of them, manipulate maybe the color.
without clicking on the polygon itself.
I do have a "next" button that when user click, it suppose to navigate to the next polygon setting it active and to be filled with desire color.
The polygons are store in an array with json format.
Im using Data Layer. I am not sure how to implement this. I can click on polygon itself and change the color, but I need to traverse them without clicking.
Thanks
making map:
function loadJson(url, style)
{
var jsonfile = $.getJSON(url).done(function (data){
map.data.addGeoJson(data);
map.data.setStyle(style);
});
}
change color
map.data.addListener('click', function(event) {
mapName.data.overrideStyle(event.feature, currentStyle);
});
WORKING PROTOTYPE
In a data-layer there is no way to access the shapes(e.g. polygons) that have been drawn, you only may access the features.
The problem: the features are not available as array(then it would be easy to iterate over the features or select a feature by index)
Possible solution:
store the polygon-features in an array when they will be added to the layer(could be done via a addfeature-callback)
calculate the bounds of the polygons:(See: How to get LatLngBounds of feature polygon geometry in google maps v3?)
to implement the "next"-feature:
use map.data.revertStyle() to reset the style of the previous selected feature
select the first feature in the array and apply the desired style and call map.fitBounds() based on the calculated bounds(step2)
put the first feature to the end of the array
arrayWithFeatures.push(arrayWithFeatures.shift());
Demo: http://jsfiddle.net/doktormolle/anmfe/