How to retrive specifc Layer from Here Map JS? - here-api

I add DataPoints into Provider then into Layer which is bundled into the map.
Later I want to edit some of DataPoints, to do this I need to retrieve layer then provider from the map.
I try it by getting an array of layers but I won't know which one is a layer with my dataPoints.
let clusterDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
eps: 16,
minWeight: 2,
strategy: H.clustering.Provider.Strategy.GRID
},
theme: {
getClusterPresentation: this.getClusterPresentation,
getNoisePresentation: this.getNoisePresentation
}
})
}),
let layer = hereMap.getLayers().asArray().find(layer => layer instanceof H.map.layer.ObjectLayer)
if(!layer) {
layer = new H.map.layer.ObjectLayer(clusterDataProvider)
hereMap.addLayer(layer, 0);
}
layer.getProvider()
But ofc there can be a lot of ObjectLayers in my map, so how can I recognize which one is that with clusterDataProvider.
Or anyone has a better idea of how to edit a specific layer or cluster provider?

You can retrieve the layer by utilize this code:
function findClusterLayer(hereMap){
let layer = hereMap.getLayers().asArray().find(layer => {
let isObjLayer = layer instanceof H.map.layer.ObjectLayer;
return isObjLayer && (layer.getProvider() instanceof H.clustering.Provider);
});
return layer;
}
Unfortunately, you can't get dataPoints nor from layer nor from cluster provider, use please workaround like this:
var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
clusteringLayer.$data = dataPoints;
later you can get datapoints like this:
var layer = findClusterLayer(map);
var dataPoints = layer.$data;
after changing some datapoints save it to cluster:
clusteredDataProvider.setDataPoints(dataPoints);
See please complete example
BTW: you can save some object into every datapoint see please documentation on https://developer.here.com/documentation/maps/3.1.20.0/api_reference/H.clustering.DataPoint.html#data

Related

Here Map JS cluster marker remove option

On map using cluster layer to display the marker , on API call loading the data on reload i need to clear clustered marker in the map please help on this issue,normal marker to clear using current method (map.removeObjects(map.getObjects()) it working as excepted but i need remove default cluster marker
Please find the below code :
startClustering(map, data) {
// First we need to create an array of DataPoint objects,
// for the ClusterProvider
// tslint:disable-next-line:ter-prefer-arrow-callback
const dataPoints = data.map(function (item) {
console.log('item>>>>', item);
return new H.clustering.DataPoint(item.y, item.x);
});
const clusteredDataProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
// Maximum radius of the neighbourhood
eps: 1,
// minimum weight of points required to form a cluster
minWeight: 2,
},
});
// Create a layer tha will consume objects from our clustering provider
const clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
// To make objects from clustering provder visible,
// we need to add our layer to the map
map.addLayer(clusteringLayer);
}
i need to remove this cluster marker before call this funcation
The easiest approach will be to keep a reference to the cluster layer you wish to remove and then remove it by:
Given a reference called clusteringLayer:
map.removeLayer(clusteringLayer);
The other alternative of using map.getLayers() to retrieve all map layers and removing each layer via map.removerLayer(<layerRef>) might remove layers you do not wish to remove.

Graph of elevation from coordinations

I want ask you to one thing about interactive map and geo service. I need to get altitude from my coordinations points and build graph of elevation.
In google maps it looks like this:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
I didn't found any example for this. How can I solve this problematic?
Thank you very much.
Best regards Petr Tomasek
You can build a similar elevation graph via the HERE RoutingService JS API by specifying the value of returnelevation of the routeRequestParams to true like in this snippet:
var router = platform.getRoutingService();
var routeRequestParams = {
mode: 'fastest;car',
representation: 'display',
waypoint0: '{lat, lng}', // Start of route
waypoint1: '{lat, lng}', // End of route
returnelevation: true
};
var onResult = function(result) {
var route = result.response.route[0];
/* Now, altitudes are the third values of the each shape point.
Note: Shape points returned as strings. */
var elevation_list = route.shape.map(x => parseFloat(x.split(",")[2]));
/* Now you can use the elevation_list as input data to
draw your elevation graph with any graph tool
*/
};
var onError = function(error) {
console.log(error);
};
router.calculateRoute(
routeRequestParams,
onResult,
onError
);
With the elevation values you can draw your elevation graph with any JS graph library.
Checkout the routing API: https://developer.here.com/documentation/maps/topics/routing.html

HERE Maps: change visibility of a cluster layer

Once a cluster is created and added to a map with this:
let layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
map.addLayer(layer);
How can one change the layer visibility (show/hide) ?
You can use the removeLayer() method for that. For example:
var handleClusterLayer = function(cb)
{
if(cb.checked)
map.addLayer( clusterOverlayLayer );
else
map.removeLayer( clusterOverlayLayer );
};

openlayers 5 vector source does not clear, after calling clear function

In my openlayers 5 (based on a angular 6 app), I am implementing a functionality where you search for something, query the db, the db brings back some geoJSON and I render this geoJSON data in a ol vector layer.
There are two different ways to search, so there are two different forms that bring back geoJSOn to the same ol vector.
Of course, before rendering the data, I have to clear out the layer.
This is my code
ngOnInit() {//initialize some params and the ol map
//bring results-as you type - pure angular
this.results = this.myForm.valueChanges.pipe(
switchMap( formdata => this.mapcmsService.searchName(formdata.name, formdata.cepDrop))
);//pipe
this.tilesource = new OlXYZ({
url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
});
this.tilelayer = new OlTileLayer({
source: this.tilesource
});
this.vectorsource = new VectorSource({});
this.vectorlayer = new VectorLayer({
source: this.vectorsource
});
this.view = new OlView({
center: OlProj.fromLonLat([6.661594, 50.433237]),
zoom: 2,
});
this.olmap = new OlMap({
target: 'map',
layers: [this.tilelayer,this.vectorlayer],
view: this.view,
projection: 'EPSG:3857'
});
const selectClick = new Select({
condition: click,
layers:[this.vectorlayer]
});
this.olmap.addInteraction(selectClick);
selectClick.on(
'select', ()=>{
const values = selectClick.getFeatures().item(0).values_;
this.getDetails(values.id);
}
);
} //closes ngOnInit
Outside the ngOnInit, after the initialization,there are the two different functions that bring geoJSON to the same ol vector layer. They basically do the same thing.
searchById(id){
this.map_loading = true;
this.myService.getById(id).subscribe((data) =>{
this.vectorsource.refresh();
this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);
this.map_loading = false;
})
}//searchById
and
searchCategories(){
this.map_loading = true;
this.myService.categoriesSearch(this.categoriesForm.value).subscribe((data) =>{
this.vectorsource.refresh();
this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);
this.map_loading = false;
})
}//searchCategories
The problem is that the ol vector source is not always cleared before new features are added. I search for something, features are rendered. I search again , and sometimes, the old features remain on the map, along with the new ones.
I did a silly move to add refresh with clean and nothing is fixed. This is not standard, eg every other search. This randomly happen and I dont have a clue how to debug it. Please advice
Thanks
Is there an unique id for each feature?
I had the same problem that features were loaded constantly. I used the bbox-strategy and every time I moved the map, it loaded all the features in the extent, even if they were already there.
I had to set an unique id in the data for my features, so OpenLayers can refer to the existing ones if you load new ones. This randomness maybe comes through the generated ids for the features, that are sometimes equal to the new ones and sometimes not.
Dont know if that faces your problem, it just flew into my brain while I read that.

google.maps.FusionTablesLayer: styles not applied

I got a code snippet below to display the boundary of an area from google map FusionTablesLayer. The polygon got displayed but the expected style never applied. What's wrong with my code? Please help me. Thank you alot.
var FT_TableID=420419;
var ftoptions = {
suppressInfoWindows:true,
styles: [
{polygonOptions: {fillColor:'#0040FF',fillOpacity:0.1,strokeColor:'#FF0000',strokeWeight:2,strokeOpacity:0.6}}
]
};
var layer = new google.maps.FusionTablesLayer(FT_TableID,ftoptions);
layer.setQuery('SELECT \'kml_4326\' FROM 420419 WHERE \'name_0\' = \'Vietnam\';');
layer.setMap(theMap);
Thank you for the suggestion. Let me clarify my case further, why I had to write the code that way: I stored ftquery for each area in the database (in the raw format: SELECT ... FROM ...) and loaded it out to draw the area boundary.
var ftoptions = {...};
var layer = new google.maps.FusionTablesLayer(tableid);
//to load custom styles, but not work, same for setOptions or set('styles',styles);
layer.setValues(ftoptions);
var ftquery = '';//this is loaded from database
layer.setQuery(ftquery);
layer.setMap(theMap);
I tried your suggestion but the polygon did not show. I must be wrong somewhere. Thank you all for any further help.
You are using the "old" style syntax. If you want to style the FusionTablesLayer, you need to use the documented syntax
var ftoptions = {
query: {
from: tableid,
select: 'kml_4326',
where: "name_0 = 'Vietnam'"
},
suppressInfoWindows:true,
styles: [
{polygonOptions: {fillColor:'#0040FF',fillOpacity:0.1,strokeColor:'#FF0000',strokeWeight:2,strokeOpacity:0.6 }}
]
};
var layer = new google.maps.FusionTablesLayer(ftoptions);
layer.setMap(theMap);

Resources