Looking through the Google Maps Javascript v3 API it looks like if I want to group together markers and add or remove them as groups, I need to roll my own code based on the sample below.
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
Is there a more elegant solution to grouping markers and infowindows besides arrays?
Depending on what it is you want to do, MarkerClusterer might be helpful: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
Related
I have two collections: users_unprocessed and users_processed. When a user is new, he will be added to the users_unprocessed collection. If he is processed, he will be deleted and added to the users_processed.
I want to create a list with all users. Therefore I need to find a user in users_processed or users_unprocessed. The list should be reactively and show live updates, therefor I need to use .onSnapshot().
database.collection("users_unprocessed").doc(id).onSnapshot((snapshot) => {
if (snapshot.numChildren > 0) {
setFetchedUser(snapshot.data());
} else {
database.collection('users_unprocessed').doc(id).onSnapshot((snap) => {
if (snapshot.numChildren > 0) {
assignUser(snap)
} else {
// Error Handling
}
})
}
This code is not giving my any result no matter of the doc exists in the users_unprocessed or users_processed.
If both collections are correctly set you just need to use the forEach function on each of them and put them on an array or list or whatever you want. Something like that:
const allUsers = [];
database.collection("users_unprocessed").onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
allUsers.push(doc.data().name);
});
});
And then you can do the same with the other collection in the same list. If you don't want to put them on an Array but you have any other method or function you just need to change the last part.
I'm trying to click on all elements found with the same data-testid, but what i've tried doesn't worked.
get elements() {
return this.screen.findAllByTestId("test");
}
async clickAllElements() {
const elements = await this.elements;
elements.forEach(element => {
userEvent.click(element);
});
}
If i log the "elements" variable it shows an array with 2 elements, but it doesn't click on them.
currently I'm trying to filter and search an array in Ionic v5. But I don't know how to combine these two criteria.
I have a page (room-overview), which displays all objects of a room-array. I get these objects from a "data service", which reads a JSON file.
Part of the room-overview.ts-file:
ionViewDidEnter() {
this.setSearchedItems('');
this.searchControl.valueChanges
.pipe(debounceTime(300))
.subscribe(search => {
this.searching = false;
this.setSearchedItems(search);
});
}
onSearchInput() {
this.searching = true;
}
setSearchedItems(searchTerm) {
this.rooms = this.dataService.searchItems(searchTerm);
}
On the room-overview page, there is a search bar, which can be used to search the individual objects. This search bar calls the onSearchInput()-method.
<ion-searchbar [formControl]="searchControl (ionChange)="onSearchInput()">
For that, I have a filter/search-service that gives me all objects which fits the search term. "items" is an array of all room-objects.
searchItems(searchTerm) {
return this.items.filter(item => {
return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
Besides the search, it should be possible to filter by certain criteria (for example, whether a room is in a certain building or not). This filter possibility is solved via a modal page that passes the values to the room-overview page when it will be closed.
Either the search or the filtering can be done individually, but I do not know how to combine both. I think the "searchItem()"-method should not only filter on the room-object array. It should be able to filter before and use only the filtered array.
I hope someone can help me :-)
Perhaps something like this?
searchAndFilterItems(searchTerm) {
const filteredItems = this.items.filter(item => {
// Apply filters
});
return filteredItems.filter(item => {
return filteredItems.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
I have a set of markers which I want to have visible or not on a React Google map.
In ESRI/ArcGIS maps you can create layers which can be turned on or off, but it does not seem any equivalent features exist in Google maps.
I suppose can give the markers a specific class and turn their visibility on or off, but I am concerned this may impact performance.
Any suggestions on a way forward?
Google Maps API does not support this kind of custom layers (refer official docs for a supported list of layers).
The following custom component demonstrates how to group markers and toggle its visibility
function MarkersGroup(props, context) {
const layersRef = useRef(null);
useEffect(() => {
const map = context[MAP];
let layers = null;
if (!layersRef.current) {
layers = new window.google.maps.MVCObject();
for (let name in props.groupData) {
for (let item of props.groupData[name].items) {
const markerProps = { position: { lat: item.lat, lng: item.lng } };
const marker = new window.google.maps.Marker(markerProps);
marker.bindTo("map", layers, name);
}
}
layersRef.current = layers;
} else layers = layersRef.current;
for (let name in props.groupData) {
if (props.groupData[name].visible) {
layers.set(name, map);
} else {
layers.set(name, null);
}
}
});
return null;
}
Notes:
google.maps.MVCObject class - is used to store layer(markers) group
layer visibility is toggled via MVCObject.set method
Here is a demo
I am new to both React and Firebase. I struggled a bit to get data from the database, even though the instructions on the Firebase website were pretty straightforward.
I managed to print data in the view by using this code:
Get data from DB and save it in state:
INSTRUMENTS_DB.once('value').then(function(snapshot) {
this.state.instruments.push(snapshot.val());
this.setState({
instruments: this.state.instruments
});
From Firebase, I receive and Object containing several objects, which correspond to the differen instruments, like shown in the following snippet:
Object {
Object {
name: "Electric guitar",
image: "img/guitar.svg"
}
Object {
name: "Bass guitar",
image: "img/bass.svg"
}
// and so on..
}
Currently, I print data by populating an array like this:
var rows = [];
for (var obj in this.state.instruments[0]) {
rows.push(<Instrument name={this.state.instruments[0][obj].name}
image={this.state.instruments[0][obj].image}/>);
}
I feel like there's a better way to do it, can somedody give a hint? Thanks
I user firebase a lot and mu solution is little ES6 helper function
const toArray = function (firebaseObj) {
return Object.keys(firebaseObj).map((key)=> {
return Object.assign(firebaseObj[key], {key});
})
};
I also assign the firebase key to object key property, so later I can work with the keys.
The native map function only works for arrays, so using directly it on this object won't work.
What you can do instead is:
Call the map function on the keys of your object using Object.keys():
getInstrumentRows() {
const instruments = this.state.instruments;
Object.keys(instruments).map((key, index) => {
let instrument = instruments[key];
// You can now use instrument.name and instrument.image
return <Instrument name={instrument.name} image={instrument.image}/>
});
}
Alternatively, you can also import the lodash library and use its map method which would allow you to refactor the above code into:
getInstrumentRowsUsingLodash() {
const instruments = this.state.instruments;
_.map(instruments, (key, index) => {
let instrument = instruments[key];
// You can now use instrument.name and instrument.image
return <Instrument name={instrument.name} image={instrument.image}/>
});
}
Side note:
When you retrieve you data from Firebase you attempt to update the state directly with a call on this.state.instruments. The state in React should be treated as Immutable and should not be mutated with direct calls to it like push.
I would use map function:
_getInstrumentRows() {
const instruments = this.state.instruments[0];
if (instruments) {
return instruments.map((instrument) =>
<Instrument name={instrument.name}
image={instrument.image}/>);
}
}
In your render() method you just use {_getInstrumentRows()} wherever you need it.