Is it possible to cluster only markers on the same coordinates?
When using mapbox marker clustering all markers are grouped depending on map zoom level. What I would like to do is to have all markers independent (non grouped) except markers on the same latitude-longitude coordinates.
Is that possible?
This is not a perfect solution but it will do the job...
I've solved my problem by using two layer groups, one for individual markers and one for clustered markers.
Something like this:
var overlay1 = L.layerGroup().addTo(map);//this one is for single markers
var overlay2 = L.layerGroup().addTo(map);//this one is for clustered
var layers;
//load markers from external source
var featureLayer = L.mapbox.featureLayer()
.loadURL('/my_geojson_script/')
.on('ready', function(e) {
layers = e.target;
//go and do the filtering
doTheThing();
})
function doTheThing()
overlay1.clearLayers();//remove all single markers
overlay2.clearLayers();//remove all clustered
var clusterGroup = new L.MarkerClusterGroup().addTo(overlay2);
layers.eachLayer(function(layer) {
//the number of markers on this layer coordinates (info collected from json property. I calculate this in advance)
var numberOfMarkers = layer.feature.properties.numberOfMarkers;
//if number of markers is greater than 1 add layer to cluster group
if(numberOfMarkers>1){
clusterGroup.addLayer(layer);
}
else{//if number of markers is 1 add layer to individual layer group
overlay1.addLayer(layer);
}
});
}
Related
I have a Leaflet based mapping solution that uses ArcGIS map configuration supplied by a user (I have no idea what it will be, they will customize it with their own ArcGIS services). The issue is that the projection can be pretty much anything, and I will need to use Proj4Leaflet to configure the CRS of the map accordingly. The problem I'm running into is I'm not sure how to calculate the scale/resolution array. The user is inputting these values: projection key, Proj4 string, origin, bounds, zoom levels.
So, for example (yes I know EPSG:3857 is standard and I could just use L.CRS.EPSG3857 but it serves as a good example of how to set the same thing up using Proj4Leaflet):
Projection key = EPSG:3857
Proj4 string = +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=#null +wktext +no_defs
Origin = [0,0]
Bounds = [[-20026376.39, -20048966.10], [20026376.39, 20048966.10]]
Zoom levels = 18
With that I think I have enough to set up a L.Proj.CRS for it:
var crs = new L.Proj.CRS("EPSG:3857", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=#null +wktext +no_defs",
{
resolutions : [?????],
origin : [0,0],
bounds : [[-20026376.39, -20048966.10], [20026376.39, 20048966.10]]
});
I have everything I need apart from the resolutions array, I am not sure exactly how to go about setting that up based on the data given and having a hard time finding answers to get me pointed in the right direction.
So bottom line, the only way I found to calculate resolutions is if it is a mercator projection and we know the longitude extents of it and the tile size. Otherwise the resolutions will need to be looked up at the ArcGIS Server tile server REST endpoint. Thus for my project I will need the user to supply the array themselves and cannot calculate it for them.
In the case of the mercator projection, I came up with this function that does the trick:
function parseResolutionsFromZoomLevels(zoomLevels, tileSize, mapWGS84Extent)
{
var metersPerExtent = 40075008/360;
var mapWGS84Meters = mapWGS84Extent*metersPerExtent;
var resolutionArray = [];
for (var i=0; i<zoomLevels; i++)
{
var tilesAtZoom = Math.pow(2,i);
var pixelsAtZoom = tilesAtZoom*tileSize;
resolutionArray.push(mapWGS84Meters/pixelsAtZoom);
}
return resolutionArray;
}
Hope this helps anyone else that happens to encounter this same situation.
I have a geojson polygon adding to the map with the click of a button. I also have the style of the polygon changing on the mousedown event on the geojson and the x/y coord pairs (the geojson geometry) printing to the console accessing it through the queryRenderedFeatures call on the API.
I am now wanting to make the polygon draggable like the point example (links below) on the mousedown event on the polygon and be able to move it on the map, updating the x/y coords of the polygon nodes throughout the mousedown event, but keeping the geojson size intact throughout the drag.
Is straight mapbox-gl-js the way to do this, or should I be feeding a pre-configured geojson polygon into a mapbox-gl-draw - draw polygon mode on a user's action?
Any suggestions or examples?
API Drag A Point Example
Drag A Point GitHub Code
Try this
var isDragging = false;
var startCoords;
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['polygon-layer'] });
var polygon = features[0];
if (!polygon) return;
startCoords = polygon.geometry.coordinates[0];
});
map.on('mousedown', function(e) {
isDragging = true;
});
map.on('mousemove', function(e) {
if (!isDragging) return;
var coords = map.unproject(e.point);
var delta = {
lng: coords.lng - startCoords[0],
lat: coords.lat - startCoords[1]
};
polygon.geometry.coordinates[0] = polygon.geometry.coordinates[0].map(function(coord) {
return [coord[0] + delta.lng, coord[1] + delta.lat];
});
map.getSource('polygon-source').setData(polygon);
});
map.on('mouseup', function(e) {
isDragging = false;
});
the polygon is being stored as a GeoJSON feature, and the polygon layer and source are named 'polygon-layer' and 'polygon-source', respectively. You will need to adjust these names to match your setup.
I'm using an imageoverlay in leaflet
var imageUrl = 'img.png';
L.imageOverlay(imageUrl,mapBounds1).addTo(map);
When i zoom the map, the image zooms also , is there any way to make the image static ?
I also tried tiles (from the image), and it zooms also, i'm wondering if the only way is to create multiple tiles for each zoom.
Any help ?
You could try something like this...
map.on('zoomstart', function(e) {
//remove layer
});
map.on('zoomend', function(e) {
//add layer back with new bounds
});
You need to subscribe somehow to the viewreset event
viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position. (http://leafletjs.com/reference.html#map-viewreset)
I'm not sure this will work, but try something like
var imageUrl = 'img.png';
var overlay = L.imageOverlay(imageUrl,mapBounds1).addTo(map);
overlay.off('viewreset');
I´ve been following this post about using an image overlay for bing maps:
http://blogs.msdn.com/b/bingdevcenter/archive/2014/04/04/image-overlays-with-bing-maps-native.aspx
What I want to now is to be able to add polygons/polylines on top of this image. Lets say for example that we use the following code:
(From here: http://blogs.bing.com/maps/2014/01/23/make-clickable-shapes-in-the-native-bing-maps-control/)
private void MyMapLoaded(object sender, RoutedEventArgs e)
{
//Add a shape layer to the map
shapeLayer = new MapShapeLayer();
MyMap.ShapeLayers.Add(shapeLayer);
//Create mock data points
var locs = new LocationCollection();
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
//Create test polygon
var polygon = new MapPolygon();
polygon.Locations = locs;
polygon.FillColor = Colors.Red;
shapeLayer.Shapes.Add(polygon);
var locs2 = new LocationCollection();
locs2.Add(new Location(20, 20));
locs2.Add(new Location(40, 40));
locs2.Add(new Location(50, 20));
//Create test polyline
var polyline = new MapPolyline();
polyline.Locations = locs2;
polyline.Width = 5;
polyline.Color = Colors.Blue;
//Add the shape to the map
shapeLayer.Shapes.Add(polyline);
}
The problem is that the polygon/polyline will always appear beneath the image.
ShapeLayer has a property for z-index but it does not help. Is there a way for my polygons to always be on top?
Not sure why you want to do this, but you won't be able to show a MapPolygon above a user control that is added as a child of the map. That said, you can create WPF Polygons and added them. What you could do is create a custom user control that combines the image overlay functionality with something like this: http://blogs.msdn.com/b/bingdevcenter/archive/2014/03/25/custom-shapes-in-windows-store-apps-c.aspx
I've been playing with the google earth API. I thought it would be neat to draw some lines between places from a relative 3D viewpoint. I've searched through the GE documentation and searched on google for answers but didn't find anything that led me down the correct path, so I thought I'd post some code and perhaps get some insight.
The following code plots two places and then draws a line between those places. Unfortunately the line that gets drawn splices the earth. Is there a method to make it wrap to the contour of the earth when drawn in 3D like this? I've attempted to vary the line height placement with a varying degree of success, but at the cost of accuracy and overall visual appeal when the line doesn't appear to connect the places.
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
//---------------------------------PLACES
// Create the placemark.
var placemark = ge.createPlacemark('');
placemark.setName("Location 1");
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude(39.96028);
point.setLongitude(-82.979736);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
// Create the placemark.
var placemark2 = ge.createPlacemark('');
placemark2.setName("Hop #2");
// Set the placemark's location.
var point2 = ge.createPoint('');
point2.setLatitude(25.7615);
point2.setLongitude(-80.2939);
placemark2.setGeometry(point2);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark2);
//---------------------------------FOCUS
var lookAt = ge.createLookAt('');
lookAt.setLatitude(39.96028);
lookAt.setLongitude(-82.979736);
lookAt.setRange(1000000.0);
lookAt.setAltitude(0);
lookAt.setTilt(45);
ge.getView().setAbstractView(lookAt);
//---------------------------------LINES
// Create the placemark
var lineStringPlacemark = ge.createPlacemark('');
// Create the LineString
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
// Add LineString points
lineString.getCoordinates().pushLatLngAlt(39.96028, -82.979736, 0);
lineString.getCoordinates().pushLatLngAlt(25.7615, -80.2939, 0);
//lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
//lineString.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
lineString.setAltitudeMode(ge.absolute);
// Create a style and set width and color of line
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
lineStyle.setWidth(2);
lineStyle.getColor().set('9900ffff'); // aabbggrr format
// Add the feature to Earth
ge.getFeatures().appendChild(lineStringPlacemark);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
You will want to set tesselation, and optionally extrude, on your linestring to true.
See https://developers.google.com/kml/documentation/kmlreference#tessellate and https://developers.google.com/kml/documentation/kmlreference#extrude for details
For the API, your syntax would be something like
lineStringPlacemark.setTessellate(true);
lineStringPlacemark.setExtrude(true);
There's some additional API examples on this at https://developers.google.com/earth/documentation/geometries