I have a HERE maps based javascript map on a website with a list of markers.
When the user zooms and pans the map, the mapviewchangeend event is triggered.
In that event, how can I find out which markers are currently visible?
The H.Maps object has a getObjectsWithin method, but that one needs a polygon - which I don't know how to obtain.
As polygon you should use the bounds from ViewModel's getLookAtData method:
map.addEventListener('mapviewchangeend', (e) => {
let bounds = map.getViewModel().getLookAtData().bounds;
map.getObjectsWithin(bounds, (objects) => {
console.log(objects);
})
})
For more information check the H.map.ViewModel.getObjectsWithin documentation.
Related
I want to open a popup for a marker that is under a markercluster when the map is zoomed out. This function is called when a user clicks on a search result.
This is the code that I am using:
map.eachLayer(function (layer) {
if (layer.options && layer.options.pane === "markerPane") {
if (layer.options.title == locationId) {
layer.openPopup()
}
}
});
I tried adding this code but it didn't work as well:
layer.zoomToBounds({padding: [20, 20]});
So you want to so something about a cluster's marker whenever a specific marker in such cluster fulfills a condition.
You can iterate through all visible cluster markers, then leverage getAllChildMarkers; but that will get messy soon, as you will have to deal with the fact that a cluster and the cluster's marker are different entities, so iterating through visible markers doesn't necessarily mean iterating through the visible clusters.
I suggest an approach based on getVisibleParent. Store a reference to each original marker, indexed by the ID you'll be using later for lookup, e.g. ...
var clusterGroup = L.markerClusterGroup();
var markers = {}; // Yay using Object as a hashmap!
for (var i in dataset) {
// Create individual marker based on a item in the dataset, e.g.
var marker = L.marker(dataset[i].latlng);
// Add that to the clusterGroup (but not to the map)
clusterGroup.addMarker(marker);
// Save the individual marker in the hashmap, indexed by the
// desired property, e.g. "locationId"
markers[ dataset[i].locationId ] = marker;
}
// Adding the cluster to the map after all items have been inserted should
// be slightly more performant than doing that before.
clusterGroup.addTo(map);
So with that, one should be able to look up the marker by the desired ID, see if it's in a cluster or directly visible, and do something about it:
function highlightLocationId(id) {
// hashmap lookup
var marker = markers[i];
// Sanity check
if (!marker) { return; }
// What cluster is this marker in?
var cluster = clusterGroup.getVisibleParent(marker);
// Is the marker really in a cluster, or visible standalone?
if (cluster) {
// It's in a cluster, do something about its cluster.
cluster.openPopup();
} else {
// It's not in a cluster but directly in the map, do something about it.
marker.openPopup();
}
}
I found a fix for this issue. Before trying to open the popup in the cluster I teleport to the coordinates of the location. Then the cluster will automatically open up.
map.setView([coordinates[1], coordinates[0]], 20);
I define which coordinates should be used and what the zoom level should be. After this function I use the layer.openPopup() function to open the popup.
I got the Google Map and Drawing Tools displayed on the map. I can draw the shapes (circle, polygon, rectangle ...) on the map. For the start I am using the example code from Google Maps JavaScript get started page: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/drawing-tools
I was able to find a lot of examples on have to draw/make a shape object by providing all the properties and LatLng.
How do I get a LatLng for the shape that I just draw by using one of the drawing tools form Drawing Tools toolbar?
I am planing to make an application which will allow user to draw shapes on the map and save the LatLng in to database (i will be using MySql), so later the shape can be displayed again on the map as per request.
Please help.
There are a few ways to get the coordinates of the shapes you draw on the map. Specifically for polygons you can add an event listener to the map like so. The easiest way is to add an event listener to the map for when a polygon is finished drawing.
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
const coords = polygon.getPath().getArray().map(coord => {
return {
lat: coord.lat(),
lng: coord.lng()
}
});
console.log(JSON.stringify(coords, null, 1));
// SAVE COORDINATES HERE
});
Each type of drawing has a different format for saving so for something like circles you'd do
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
const radius = circle.getRadius();
// Save circle here
});
You also have the option of adding an event to listen for all of the events by listening to the overlaycomplete event but in that case you'd have to handle the different types inside the event.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == 'circle') {
// Handle Circle using event.overlay
}
if (event.type == 'polygon') {
// Handle Polygon using event.overlay
}
});
Here's an example:
https://jsfiddle.net/juop8q3n/1/
And here's my sources:
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/drawinglayer#drawing_events
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference#drawing-on-the-map
EDIT
Another way I've seen people save the data is by adding an event listener to the map to get the GeoJSON data, which is a standard format for saving drawing data.
Link: http://jsfiddle.net/y89rbfLo/
Recently I asked about referencing the data of an existing GeoJSON Leaflet object. My Leaflet map consists of data coming in a stream to my GeoJSON Leaflet object. User inputs can change a filter for the GeoJSON data, so to make the filter apply to both the existing and new data I am keeping track of my data in an array called myFeatures. Whenever the filters change or an item in myFeatures changes, I do the following:
myGeoJson.clearLayers();
myGeoJson.addData(myFeatures);
This is working to make my map update according to the newly updated feature data or the changes in the filter.
I am applying pop-ups to the GeoJSON object when I initialize my GeoJSON object:
var myGeoJson = L.geoJson(myFeatures, {
style: function(feature) {
...
},
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
filter: function(feature, layer) {
...
},
onEachFeature: function(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
});
When I click on an individual feature, the pop-up appears. However, the pop-up dismisses pretty quickly, thanks to clearLayers and addData being called. :(
Is there some kind of way to stop the pop-up dismissing in this situation?
Or - better question - is there a way to modifying existing data in a GeoJSON object or remove some (not all) data from a GeoJSON object?
To provide some context, my GeoJSON shows circle markers for each feature. The circle markers are colored based on a property of the feature. The property can actually change over time, so the marker's styling needs to be updated. A marker also times out after a while and needs to be removed from the map, but the other markers need to stay on the map.
There are for sure better ways to do that, but if you don't want to modify your code architecture too much, you could just create your popups in a specific layer, which you won't clear when you add your new data.
To give you an idea (markers play below the role of myGeoJson in your example):
var popup_id = {};
var popup_layer = new L.layerGroup();
var markers = new L.layerGroup();
$.each(testData, function(index, p) {
var marker = L.marker(L.latLng(p.lat, p.lon));
markers.addLayer(marker);
popup = new L.popup({offset: new L.Point(0, -30)});
popup.setLatLng(L.latLng(p.lat, p.lon));
popup.setContent(p.text);
popup_id[p.id] = popup;
marker.on('click', function() {
popup_id[p.id].openPopup();
popup_layer.addLayer(popup_id[p.id]);
markers.clearLayers();
})
});
popup_layer.addTo(map);
markers.addTo(map);
You also keep track of all your popups in a dictionary popup_id.
Since you haven't provided us with a JSfiddle it is a bit difficult to find the perfect answer for your case, but I hope that the popup layer (also here in my fiddle) gives you a good direction.
Here is the rest service I'm working from:
http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3
My current call for displaying the feature layer is as follows:
var recLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",{
infoTemplate: recParkTemplate,
outFields: ["STATE_NAME"]
});
map.addLayer(recLayer);
However, instead of plotting the polygon on the map as this is an esriGeometricPolygon. I would rather have it plot on the map like a esriGeometryPoint. I know this method in getting the specific polygon's centroid:
https://developers.arcgis.com/javascript/jsapi/polygon-amd.html#getcentroid
My problem is I can't figure out how to cycle among all polygons in the feature layer and then plot those polygons. I can only point and click and display similar to how this ESRI sample works: https://developers.arcgis.com/javascript/jssamples/util_label_point.html
Thank you for your assistance.
Here is the current site if you would like to take a look at it: http://joshferrell.net/ece_project/
to cycle among all geometries in your feature layer you can do something like this:
recLayer.on("update-end", function changeHandler(evt) {
require(["dojo/_base/array"], function (array) {
array.forEach(recLayer.graphics, function (entry, i) {
console.debug(entry, "at index", i);
});
});
});
inside the loop use the getCentroid and add the result to the map
Description
I am currently working with Google Maps V3 for our client and they've asked us to implement a drawing tool that will allow them to create connected stream of lines and calculate the distance. However, it seems the Google Maps V3 Drawing Manager library is very limited in how it allows us to capture the click events for a polyline.
Our Code
google.maps.event.addListener(map, 'click', function(event){
//TODO: Store lat/long of click for distance calculation later
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
//TODO: Display the total distance of the line
});
The Goal
google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
//TODO: Store lat/long of line for distance calculation and display updated distance.
});
As you can see, we want to capture the lat/long as the user is creating the polyline and display the distance as each line is created, not once the entire polyline is completed.
Also, I know we can imitate this by creating custom handlers and doing some magic with the map's click method and drawing lines manually between lat/longs, but it seems weird that the Google Maps API wouldn't have a click method for their Drawing Manager.
Clarification
The end goal is to have functionality so while drawing a polyline, we can display the total length of the polyline dynamically. I.E. I begin by drawing a line, a section appears that says "Total Line is X", I click a second spot to create a second line and the text updates to "x" + "y", I click a third and it updates to "x" + "y" + "z", etc. This is why we were hoping there is an event to handle "lineDrawn" or "polylineClick" to store these lat/longs to we can calculate the length for dynamically created lines without having the user stop drawing lines to see the total length.
Edit: Updated addListener in Our Goal to use drawingManager, not map.
Edit: Addition of Clarification section.
Basically you want to chain the two together like this:
var thePolyLine = new google.maps.Polyline({
polyLineOptions
}).setMap(map).addListener("click", function(event){
//click event
});
============= EDIT =============
Ok, I clearly didn't read the OP's question entirely.
Looks like the markercomplete event returns a marker. I'd create a global Array of marker objects, then you can run a distance check between each on catching that event.
var markers = new Array();
google.maps.event.addListener(theDrawingManager, "markercomplete", function (marker) {
markers.push(marker);
});
Then, you can loop through them, and computeDistanceBetween any or all points.
============= EDIT #2 =============
My Fiddle of the solution! (I updated the code with more comments and fixed an error, made it obvious that distance is in meters):
http://jsfiddle.net/8Xqaw/12/
Right-click the map to add points to measure.
Distance is in meters, btw. It will update distance when you drag points, too. And there is a click function for the polyLine itself.
Clicking the first point again will allow you to connect the final point with the first point to create a polygon, then you can click and drag to move the polygon around (which moves the points as well)...
Try this :3
var PolylineOption = {
strokeColor : "blue",
strokeOpacity : 0.5,
strokeWeight : 5
};
var Display;
var rendererOptions = {
draggable : true,
suppressMarkers : true,
polylineOptions : PolylineOption
};
var Service = new google.maps.DirectionsService();
Display = new google.maps.DirectionsRenderer(this.rendererOptions);
Display.setMap(map);
Service.route(this.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
Display.setDirections(response);
}
});
google.maps.event.addListener(PolylineOption, 'click', function() {
alert(this.strokeColor);
});