I've got a list of positions that I retrieve from an ms endpoint like so:
https://atlas.microsoft.com/search/fuzzy/json?top=100&typeahead=true&subscription-key=subscription-key&api-version=1&query=Leeds
The user then selects one of the proposed addresses and the position provided by this endpoint is then used to be displayed on a map that uses clusters. So for Leeds for example, I have the following:
-1.548567, 53.801277
However, when I create the clusters in the clusterRenderCallback function I provide upon creating the HtmlMarkerLayer, I get positions that are close to the ones I've provided, but different and I have no idea how or why.
so the code would look something like:
First I create the dataSource
dataSource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true
});
map.sources.add(dataSource);
Then I manage the cluster creation inside the HtmlMarkerLayer creation:
clusterRenderCallback: function (id, position, properties) {
var cluster = new atlas.HtmlMarker({
position: position, // different position to that which I have provided
htmlContent: `<div>${properties.point_count_abbreviated}</div>`,
values: properties,
});
map.events.add('click', cluster, clusterClicked);
return cluster;
}
And here I create points to add to my data source:
let features = list.map(x => new atlas.data.Feature(new atlas.data.Point(new atlas.data.Position(x.lon, x.lat)), x));
dataSource.add(features);
The position I receive for the Leeds cluster for example is -1.549072265625, 53.80065082633024, even though I had 2 poisitions in Leeds, both made out of the same coordinates: -1.548567, 53.801277
It seems like there's some sort of mechanism inside the atlas code that "fixes" the provided coordinates; anyone knows how to stop this or what am I doing wrong here?
==EDIT 02/05==
ok, so following #rbrundritt answer, here the last bit of code I should have added, showing what we do once the cluster is clicked:
function clusterClicked(e) {
var cluster = e.target;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: cluster.getOptions().position,
zoom: zoom
});
});
}
And this is where we have our problem with this discrepancy- clicking on the cluster zooms in to the zoom level where the cluster breaks; however, since we centre the map to the cluster position, the pin position, being different to the cluster one, is not being seen in the map on that zoom level (ie 3 afair). On top of that we have no way of knowing inside the context of this function to what pin does the cluster corresponds, this leaves us with a buggy behaviour.
Clusters should rarely have the same coordinates as any points that they contain. Clusters group overlapping points together and an average position is used to represent that group on the map. When a cluster breaks apart into its individual points then that marker will have the original position value.
Ok, so I wasn't aware of what the datasource.getClusterLeaves method was returning (I've simply mistaken the leaves for the verb leaving). This is what I was looking for, so my code now looks like this:
function inSamePosition(pos1, pos2) {
return pos1.data.geometry.coordinates[0] == pos2.data.geometry.coordinates[0]
&& pos1.data.geometry.coordinates[1] == pos2.data.geometry.coordinates[1];
}
function clusterClicked(e) {
var cluster = e.target;
(cluster.properties.cluster_id, Number.POSITIVE_INFINITY, 0).then(pins => {
let position = pins.every(p => inSamePosition(p, pins[0])) ? pins[0]['data'].geometry.coordinates : null;
datasource.getClusterExpansionZoom(cluster.properties.cluster_id).then(function (zoom) {
map.setCamera({
center: position ? position : cluster.getOptions().position,
zoom: zoom
});
});
})
}
Related
I try to see all the markers on a map.
To that end I implement the following logic
All logic is inside an object.
setLocation(places) {
try {
const {
markers,
markerArray
} = this.getMarkers(places);
const group = L.featureGroup(markerArray);
this.map.addLayer(markers);
this.map.fitBounds(group.getBounds());
} catch (error) {
console.log(`Error: ${error.message} Probably no places found`);
}
},
places is an array of objects, where each object includes the properties latitude and longitude. For each of these objects a marker is created. The logic is as follows and is invoked from the getMarkers() method
getMarkers(points = buysmoke.points) {
const markers = L.markerClusterGroup();
const markerArray = [];
for (const point of points) {
const content = this.getContent(point);
const icon = this.createIcon(point.categoria);
const popup = this.createPopup(content);
const marker = L.marker([point.latitud, point.longitud], {
icon: icon
}).bindPopup(popup);
markerArray.push(marker);
markers.addLayer(marker);
}
return {
markers: markers,
markerArray: markerArray
};
},
This logic is working with a set of data, which correspond to America. When I try the same with a data set from Europe the logic does not work and instead shows me the map of the whole world. The rest of the interactions on the map continue to work.
I have tried to understand the reason for this, but without success.
If you need any other information, please let me know.
Thank you
Update 1
The data set of Europe consists of 195 records, probe only process 12 of them and works as expected. Is it somehow possible that some latitude and longitude is proving the problem? If it were a possibility is there some friendly way to track the problem?
Update 2
Indeed, the problem is caused due to a series of wrong lengths, a special one whose coordinate does not exist. When removing it from the data set, the markers are drawn on the map as estimated
In any case, thank you very much. I hope this experience serves someone
My scenario is that the user would click on a marker that is part of a cluster and be redirected somewhere else. Then when they come back they need to return the the same bounds on the map where they were before at that marker, but the cluster in which the marker is found is no longer expanded/spiderfy'd, which I need to get done.
At this point I know which marker I'm looking for, but need to expand its cluster. What I've done so far:
Iterate through the markers in the initially populated L.markerClusterGroup() object:
layers = L.markerClusterGroup();
. . . populate 'layers' ...
$.each(layers, function (idx, layer) {
if(layer._tooltip._content === 'known marker tooltip') {
layer.__parent.spiderfy();
}
});
Although the spiderfy() function sort of works, it doesn't seem to be intended to be used on its own and breaks the cluster pretty bad.
Alternatively, I've tried calling fire('clusterclick') on the above layer object, as well as on layer.__parent, which I presume would represent the cluster, but can't get anything working.
I would need a solution in which I can properly trigger the clusterclick event that would handle everything, as if I had actually clicked the cluster myself.
Let's say we have the following map:
https://jsfiddle.net/fcumj09w/5/
In the above example, we have 2 marker cluster groups (clustRed and clustYellow) and a single marker outside of these groups.
I want the red marker cluster group to be on top (higher z-index) of the yellow marker cluster group, when zooming out.
I have created 3 custom panes to attach each cluster group to a different pane but it seems like panes don't work with cluster groups (or I haven't find the way to make them work).
What I tried:
var clustRed = L.markerClusterGroup({pane:'hilevel'});
var clustYellow = L.markerClusterGroup({pane:'lowlevel'});
I can only make panes work with the single marker:
L.circleMarker([45,5],{pane:"midlevel"}).addTo(map);
How can I make Leaflet.markercluster use the pane that I specify?
Note: this functionality is now available as clusterPane option. Added since version 1.1.0.
var clustRed = L.markerClusterGroup({clusterPane: 'hilevel'});
Although Layer Groups in Leaflet (including the MarkerClusterGroup from Leaflet.markercluster plugin) inherit from the Layer base class, which indeed provide the pane option, any child layer added to them still use their own specified pane, if any, or use the default one (i.e. overlayPane).
It is still undecided whether that behaviour should be changed or not (see Leaflet issue #4279).
In the case of a MarkerClusterGroup, the latter even actually generates markers on its own, using the L.MarkerCluster class, which represent a cluster of individual markers.
From your description, you would like those generated markers to be inserted in specific panes.
In that case, you could very simply override the initialize method of L.MarkerCluster class so that it uses whichever pane you want. In your case, you would read the MarkerClusterGroup' option pane member:
L.MarkerCluster.include({
initialize: function(group, zoom, a, b) {
var latLng = a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0),
options = {
icon: this
},
pane = group.options.pane; // Read the MarkerClusterGroup's pane, if any.
// If a pane is specified, add it to the MarkerCluster's options.
if (pane) {
options.pane = pane;
}
L.Marker.prototype.initialize.call(this, latLng, options);
// Remaining code is unchanged compared to original method.
this._group = group;
this._zoom = zoom;
this._markers = [];
this._childClusters = [];
this._childCount = 0;
this._iconNeedsUpdate = true;
this._boundsNeedUpdate = true;
this._bounds = new L.LatLngBounds();
if (a) {
this._addChild(a);
}
if (b) {
this._addChild(b);
}
}
});
Once this is patched, the generated marker clusters will use the pane that you specify when instantiating the MarkerClusterGroup, as shown in your question:
var clustRed = L.markerClusterGroup({pane:'hilevel'});
var clustYellow = L.markerClusterGroup({pane:'lowlevel'});
Updated JSFiddle: https://jsfiddle.net/fcumj09w/9/
I'm working on an SPA project (ionic, so it's angular with ui-router) where I need to display two different maps on two different pages/controllers.
The first map is a general map (let's call it the main map)where a few locations are marked and the second one (let's call it the edit map)is a focus on a specific location where the user can edit the location by dragging the marker.
The general implementation scheme I'm using is that I'm calling a initMap method from mappingService that instanciates a google map from each controller.
$rootScope.markers = [];
this.initMap = function initMap(mapTarget, mapCenter) {
// the initMap function initialize the map it takes two arguments:
// + mapTaget which defines the html element the map is bound to.
// + mapCenter that defines the center of the map and whether to display the center
var markup = "<div id='" + mapTarget.mapId + "'></div>";
document.getElementById(mapTarget.containerId).innerHTML = markup;
var centerPos = new google.maps.LatLng(mapCenter.lat, mapCenter.lng);
$rootScope.map = new google.maps.Map(document.getElementById(mapTarget.mapId), {
center: centerPos,
zoom: 18,
disableDefaultUI: true
});
// eventually place a person marker for the user's position
if (mapCenter.display) {
console.log('placing the position marker');
$rootScope.markers[0] = new google.maps.Marker({
position: {lat: mapCenter.lat, lng: mapCenter.lng},
map: $rootScope.map,
title: 'userLocation',
icon: './img/person_icon.png'
});
}
};
The only difference is that on the main map I'm first calling a geolocate service the return a promise and I'm using the returned location coordinates to then call the mapping service:
geolocateService.getLocalPosition()
.then(function(coords) {
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: coords.lat, lng: coords.lng, display: true}
);
While on the edit map I'm calling directly the mapping service.
mappingService.initMap(
{containerId: $scope.mapContainer, mapId: $scope.mapId},
{lat: $scope.location.lat, lng: $scope.location.lng, display: false}
);
I am able to render both maps without problem and even to add markers and some event listeners.
However, I run into the problem that after some sequence of actions, for example going from the main map to the edit map two times, one of the map would suddenly become blank (white to be exactly, so it doesn't seems to be something that I could solve by resizing the map). I'm receiving the Ag object and the only difference is that I don't get the mapDataProviders property on the broken map.
When it works, I get:
Ag object when it works
While when it doesn't, I get:
Ag object when it doesn't work
The code snippet above is my last implementation attempt. I've been trying to implement those maps from a lot of different ways to no avail. Among those attempts, I tried:
totally separates both instanciation, dividing the initMap methods into an initMainMap and an initEditMap.
using one instance for both maps and replacing the DOM element> This is what you see above with the following additional method that is called when leaving the view:
this.removeMap = function removeMap(containerId) {
var container = document.getElementById(containerId);
$rootScope.markers = [];
container.innerHTML = '';
// important part:
var old_element = container;
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
delete $rootScope.map;
}
knowing that on both views I have either:
or
<div id="edit-map-container"></div>
I'm trying to understand what would make the google map API return a map without mapDataProvider (which I believe means that the map works and even starts to render except that it lacks the tiles to display).
P.S. it looks like there is a memory leak, which is apparently a well known issue.
If anyone has the answer to this, I'm a bit lost right here!
I'd like to list all of the elements from a Mapbox gridLayer that are visible to a user in the viewport.
There is an excellent example on the Mapbox site called 'Listing markers in view'. It shows all the markers on the featureLayer that are in the view of the browser.
I'd like to create something similar, but using using a gridLayer instead. (the gridLayer was created in TileMill)
Here is an example fiddle of the data with a version of non-working 'in-bounds' code:
http://jsfiddle.net/bfab/uSLVw/1/
For reference, the gridLayer has a variable in it (passed from TileMill in the UTFGrid) called '{{{Magnitude}}}' I'd like to list each of the instances of earthquakes that appear to the user, and add it to a list on the bottom left of the example. The function I'm trying to use is gridLayer.getData(latlng,callback).
Here is the snippet of code that is not working:
map.on('move', function() {
// Construct an empty list to fill with gridLayer elements.
var inBounds = [],
// Get the map bounds - the top-left and bottom-right locations.
bounds = map.getBounds();
// For each part of the grid, consider whether
// it is currently visible by comparing with the current map bounds.
// This is what fails....
myGridLayer.getData(bounds,function(earthquake){
inBounds.push(earthquake.Magnitude);
});
// Display a list of markers.
document.getElementById('coordinates').innerHTML = inBounds.join('\n');
});
Apologies if I am making a simple error...
Actually you can't (not easily at least)
1/ You misunderstand the getData function on the gridlayer
first parm is not a boundary but a location latlng
when you use this in a callback (onclick for example) you will get data only if you click on one of your circles, if not you get undefined). The data is not a list of markers but the information of your earthquake (e.g. {DateTime: "2014-04-26T16:59:15.710+00:00", Magnitude: 3.9})
myGridLayer.getData(event.latlng, function(data) {
console.log(data);
// if clicked on a marker: data is defined
// e.g. Object {DateTime: "2014-04-26T16:59:15.710+00:00", Magnitude: 3.9}
});
http://jsfiddle.net/FranceImage/uSLVw/11/
2/ It is not easy to think in terms of markers when using gridlayer as the markers are already part of the image when you load tiles:
http://a.tiles.mapbox.com/v3/bfab.i4nm0adm/3/0/2.png
The interaction is described in some javascript loaded at the same time
http://a.tiles.mapbox.com/v3/bfab.i4nm0adm/3/0/2.grid.json