I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get added to the map, I am unable edit them.
I think this is because they are not added to the layerGroup() to which newly drawn shapes are added.
Please help.
You have to add your polygons to the featureGroup drawnItems ! Let's say,
var polyLayers = dbArray;
is your database array with polygons. First create a feature group with your drawn items:
var drawnItems = new L.FeatureGroup();
and add it to the map:
map.addLayer(drawnItems);
Then you simply need to iterate over your polygons from your database and add them to the drawnItems FeatureGroup:
for(layer of polyLayers) {
drawnItems.addLayer(layer);
};
Now the layers are added to the map and editable.
Here goes an EXAMPLE:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var polyLayers = [];
var polygon1 = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
polyLayers.push(polygon1)
var polygon2 = L.polygon([
[51.512642, -0.099993],
[51.520387, -0.087633],
[51.509116, -0.082483]
]);
polyLayers.push(polygon2)
// Add the layers to the drawnItems feature group
for(let layer of polyLayers) {
drawnItems.addLayer(layer);
}
Related
Similar to Search for markers in a markercluster group Leaflet-MarkerCluster
But i am using a Control group ontop of Marker Cluster so they will be displayed upon a radio button click.
var map = L.map("map"),
parentGroup = L.markerClusterGroup(options), // Could be any other Layer Group type.
// arrayOfMarkers refers to layers to be added under the parent group as sub group feature
mySubGroup = L.featureGroup.subGroup(parentGroup, arrayOfMarkers);
parentGroup.addTo( map );
mySubGroup.addTo( map );
I am attempting to implement Leaflet Search - but as per the documentation says it requires a group layer of markers as the second parameter for it work. Trouble is using L.featureGroup.subGroup requires an array of markers.
Attempted to iterate through mySubGroup at run time to get the layers of markers using Leaflet eachLayer but this will duplicate the amount of markers i have on the map for the search to work.
var markersLayer = new L.LayerGroup().addTo( this.map );
forEach( mySubGroup, layers => {
layers.eachLayer( function (layer ) {
console.log ( layer );
markersLayer.addLayer( layer );
})
});
map.addControl( new L.Control.Search({layer: markersLayer}) );
Solved this issue - though it's quite inefficient. If you can find a more elegant solution to avoid duplication then feel free to contribute it as an answer!
var title = layer.options.title;
// iterate through the cluster points
forEach( mySubGroup, layers => {
layers.eachLayer(function (layer) {
var title = layer.options.title; // match the search title to marker title
marker = new L.Circle(new L.LatLng(layer.getLatLng().lat,layer.getLatLng().lng),
{radius: 0, title: title, fill: 'red', fillOpacity: 0, opacity: 0 }); // Create an invisible L circle marker for each cluseter marker
markersLayer.addLayer(marker);
})
});
You then add the markersLayer to the Leaflet Search
Is there an option in Leaflet to make ONE polyline with different path colors?
In google you can use path object with color property, however I haven't found similar option in Leaflet.
There a few libraries like https://github.com/Oliv/leaflet-polycolor
But you don't need a library for this.
You have your "main" polyline and from this you generate new lines segments.
var poly = L.polyline([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047],
[51.51, -0.06],
]);
//.addTo(map); Don't add the main line to the map
setPolylineColors(poly,['#f00','#ff0','#000'])
function setPolylineColors(line,colors){
var latlngs = line.getLatLngs();
latlngs.forEach(function(latlng, idx){
if(idx+1 < latlngs.length ){
var poly = L.polyline([latlng,latlngs[idx+1]],{color: colors[idx]}).addTo(map);
}
})
}
Example: https://jsfiddle.net/falkedesign/2b8t3v6f/
I referred this post
How to determine if a point is inside a 2D convex polygon?
But I want to do the same in OSM with Open Layers.Please help me.
[Link](http://jsfiddle.net/Sanju5390/3tpLs6w3/)
You can do this with turf.js using turf.inside:
var polygon = new ol.Feature(new ol.geom.Polygon([[[-5e6, -1e6], [-4e6, 1e6],
[-3e6, -1e6], [-5e6, -1e6]]]));
var point = new ol.Feature(new ol.geom.Point([-4e6, 0e6]));
var format = new ol.format.GeoJSON();
var isInside = turf.inside(
format.writeFeatureObject(point),
format.writeFeatureObject(polygon));
console.log(isInside);
http://jsfiddle.net/d6o81vc7/22/
I have a basic markerclusterer example which works very well.
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 13,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
What I would like to do is cluster the markers by country and then once you click on it they are still clustered until on3 further click. Currently they are clustered until you are down to one result. I have thousands of markers and would like them visible after one country click and then one more click.
I looked for a solution online and found this http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/google_northamerica_offices.html
which is produced using this
var officeLayer = [
{
"zoom": [0, 3],
"places": [
{ "name": "US Offices", "icon": ["us", "flag-shadow"], "posn": [40, -97] },
{ "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
]
},
...
};
function setupOfficeMarkers() {
allmarkers.length = 0;
for (var i in officeLayer) {
if (officeLayer.hasOwnProperty(i)) {
var layer = officeLayer[i];
var markers = [];
for (var j in layer["places"]) {
if (layer["places"].hasOwnProperty(j)) {
var place = layer["places"][j];
var icon = getIcon(place["icon"]);
var title = place["name"];
var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
var marker = createMarker(posn, title, getIcon(place["icon"]));
markers.push(marker);
allmarkers.push(marker);
}
}
mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
}
}
mgr.refresh();
updateStatus(mgr.getMarkerCount(map.getZoom()));
}
I'm not sure how to implement this into what I've currently got and if i need to include any other scripts/ libraries also.
You are looking at two totally different libraries, there. Your question is about the MarkerClusterer library, but your example solution is about the MarkerManager library.
The MarkerClusterer library automatically clumps markers together based on an algorithm that tries to decide when too markers would be so close together that you can't visibly distinguish one from another. You don't really have a lot of control over when and how it decides to merge markers together this way, so this library is idea when it doesn't matter to you how they get merged, as long as merging happens. Since you want to merge markers together by political boundaries (countries) and not by proximity to each other, this is not the library for you.
The MarkerManager library does not automatically merge markers together at all. What it does do is to selectively hide and reveal markers based on the zoom level of the current map viewport. What you would need to do is do your own merging, and then add to the MarkerManager all of the merged markers, as well as the detail markers, and the zoom levels where you want each marker to be visible. Doing your own merging means you will need an alternate way of determining which country each marker point falls within. Hopefully, you already know (or can get) that information, because it's not automatically provided by any of these libraries.
tl;dr - use the MarkerManager library and not the MarkerClusterer library for grouping by countries, and it's up to you to identify the location for each country and which marker goes with which one.
i've placed around 3 hundreds of markers on google map and i also need to highlight some regions with Cirlce on it. So i've placed 3 circles on the map. I wanna show markers only inside circle, not outside the circles. Circles can be placed any where(say fixed radius) and markers shoud be inside circles. all marking and placing circles are in javascript. I'm fresh grad and new to javascript.
Pradi
The part where i draw circle.
for (var i = 0; i < ltlg.length; i++) {
var marker = new google.maps.Marker({
map: map,
position: ltlg[i],
visible: false
});
var circle = new google.maps.Circle({
map: map,
radius: 10 * 55000,
fillcolour: '#AA0000'
});
circle.bindTo('center', marker, 'position');
}
where ltlg[i] is array containg 3 lats and longs.
and part where i mark
for (var i = 0; i < ltlg1.length; i++) {
// var detail = cityDetails[i];
var markerSnowFall = new google.maps.Marker({
map: map,
icon: Image,
position: ltlg1[i]
});
Here ltlg1[i] contains some 300 hundred lats and longs.
Problem is that i dont know how to make connection between marking and placing circles, currently both(marking use ltlg1[i] and cicle use ltlg[i]) use different arrays.
Either make a loop that for each of the markers checks if the distance to the center of the circle means that the marker is within the circle and only show the markers that fits this
or if the way you are placing the markers on a map supports it, only send markers that should be drawn (for instance in a previous project we had the position of the markers in a db that we could query for all markers within a circle)