I'm using Ionic v3.0 and trying to create a directive that will cover an element with an overlay when it's touched and remove that overlay once the touch ends. So far I wrote this:
import {Directive, ElementRef, HostListener, Renderer2} from '#angular/core';
#Directive({
selector: '[tappable]' // Attribute selector
})
export class TappableDirective {
private readonly _overlay;
constructor(private _elmRef: ElementRef, private _renderer: Renderer2) {
this._overlay = _renderer.createElement('div');
this._renderer.setStyle(this._overlay, 'position', 'absolute');
this._renderer.setStyle(this._overlay, 'width', '100%');
this._renderer.setStyle(this._overlay, 'height', '100%');
this._renderer.setStyle(this._overlay, 'background', '#ffffff00');
this._renderer.setStyle(this._overlay, 'left', '0');
this._renderer.setStyle(this._overlay, 'top', '0');
this._renderer.setStyle(this._overlay, 'display', 'block');
this._renderer.setStyle(this._overlay, 'transition', '0.2s');
_renderer.appendChild(_elmRef.nativeElement, this._overlay);
}
#HostListener('touchstart')
tapped() {
this._renderer.setStyle(this._overlay, 'background', '#ffffff22')
}
#HostListener('touchend')
untapped() {
this._renderer.setStyle(this._overlay, 'background', '#ffffff00')
}
}
This works just fine when I run my app on an iOS emulator, but it's not the case with Android. It seems that the touchstart and touchend do not get triggered when I interact with the element. Did I miss something here?
I figured it out. Looks like changing the opacity using #ffffff00 to #ffffff22 does not work in Android. The way to go around it is by using rgba(255, 255, 255, 0) to rgba(255, 255, 255, 50) or changing the opacity.
Related
I just updated to 5.0.0-alpha.25 (coming from 5.0.0-alpha.10) and now makeStyles is not working. I could not find anything in the breaking changes related to it so I wonder if it is a bug. When inspecting an element the makeStyles css rule is overwritten by a strange called css rule which seems to be the default values.
Here is an image which shows the rules in the inspector
Did anyone face the same issue or am I overseeing a change in the makeStyles usage.
const useStyles = makeStyles((theme) => ({
root: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
display: 'contents'
},
row: {
backgroundColor: "red"
}
}));
/* ... */
const classes = useStyles()
/* ... */
<Grid container spacing={1} className={classes.root} alignItems="flex-start" justifyContent="center">
I had the same problem. You need to wrap your entire application in StyledEngineProvider component. I've done this in index.js file. Restart you local server by npm start nad works perfectly
Here's example
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import StyledEngineProvider from '#mui/material/StyledEngineProvider'
ReactDOM.render( <StyledEngineProvider injectFirst> <App /> </StyledEngineProvider>,
document.getElementById('root')
);
I have a React application with the React Leaflet library and I'm displaying a marker for each building in the map, in a small town. I have about 5k markers in total and a filter to display only the markers I want.
However, I noticed that I was having a huge performance hit with the code below. I've looked at some alternatives such as PixiOverlay and marker clustering, but the former is quite complicated to migrate the current code base to and the latter doesn't solve my problems at all.
My current code:
import React, {
useRef, useEffect, useContext, useState,
} from 'react';
import ReactDOMServer from 'react-dom/server';
import {
Marker, useLeaflet, Popup, Tooltip, CircleMarker, Circle,
} from 'react-leaflet';
import L from 'leaflet';
import styled from 'styled-components';
interface IProps {
coords: [number, number]
description: string,
name: string
}
let timeoutPopupRef: any = null;
let timeoutPopupRefClose: any = null;
const DynamicMarker: React.FC<IProps> = ({ coords, description, name }) => {
const markerRef = useRef<any>(null);
const popupRef = useRef<Popup>(null);
const tooltipRef = useRef<Tooltip>(null);
const leaflet = useLeaflet();
const divIcon: L.DivIcon = L.divIcon({
iconSize: [25, 25],
className: 'marker-white',
});
const onComponentMount = () => {
if (!leaflet.map) return;
if (!markerRef.current) return;
const mapZoom: number = leaflet.map.getZoom();
if (popupRef.current) {
if (mapZoom <= 17) {
markerRef.current.leafletElement.unbindPopup();
} else if (mapZoom > 17) {
markerRef.current.leafletElement.bindPopup(popupRef.current!.leafletElement);
}
}
if (tooltipRef.current) {
if (mapZoom <= 15) {
markerRef.current.leafletElement.unbindTooltip();
} else if (mapZoom > 15) {
markerRef.current.leafletElement.bindTooltip(tooltipRef.current!.leafletElement);
}
}
leaflet.map!.on('zoomend', onMapZoomEnd);
};
useEffect(onComponentMount, []);
const onMapZoomEnd = () => {
if (!markerRef.current) return;
if (!popupRef.current) return;
if (!leaflet.map) return;
const zoom = leaflet.map.getZoom();
if (zoom < 17) {
if (!markerRef.current!.leafletElement.isPopupOpen()) {
markerRef.current!.leafletElement.unbindPopup();
}
} else if (zoom >= 17) {
markerRef.current!.leafletElement.bindPopup(popupRef.current.leafletElement);
}
};
const handlePopupVisible = (value: boolean) => {
if (!markerRef.current) return;
if (timeoutPopupRefClose) clearTimeout(timeoutPopupRefClose);
if (value) {
if (!markerRef.current!.leafletElement.isPopupOpen()) {
timeoutPopupRef = setTimeout(() => {
markerRef.current!.leafletElement.openPopup();
}, 400);
}
} else {
if (timeoutPopupRef) {
clearTimeout(timeoutPopupRef);
}
if (markerRef.current!.leafletElement.isPopupOpen()) {
timeoutPopupRefClose = setTimeout(() => {
markerRef.current!.leafletElement.closePopup();
}, 100);
}
}
};
const onComponentDismount = () => {
leaflet.map!.off('zoomend', onMapZoomEnd);
if (!markerRef.current) return;
markerRef.current.leafletElement.remove();
};
useEffect(() => onComponentDismount, []);
return (
<Marker
icon={divIcon}
position={coords}
onmouseover={() => handlePopupVisible(true)}
onmouseout={() => handlePopupVisible(false)}
ref={markerRef}
>
<Popup className="custom-popup-content" ref={popupRef} closeButton={false}>
<div
onMouseEnter={() => handlePopupVisible(true)}
onMouseLeave={() => handlePopupVisible(false)}
>
<img
className="popup-img"
alt='image'
src='https://cdn.discordapp.com/attachments/578931223775281162/644181902215086094/default_geocode-1x.png'
/>
<div className="popup-content">
<span className="popup-content-title">{name}</span>
{description && <span className="popup-content-subtitle">{description}</span>}
</div>
</div>
</Popup>
</Marker>
);
};
export default DynamicMarker;
The code above unbinds popups from markers if the map zoom is below a threshold, and binds them when the zoom is above the threshold. I also implemented event handlers to onMouseOver and onMouseOut events on the marker component to open my popup when the user hovers the marker icon and it will only close the popup if the cursor isn't hovering over the popup or the marker icon.
When I zoom in or out with about 2k markers being displayed, the map freezes for about 5-10 seconds and updates all of the components inside the Map component exported by react-leaflet.
After testing with marker clustering via react-leaflet-markercluster, I noticed that the performance issues were still present. I tried commenting out the Popup component passed as a children to the marker component and the lag issues I had were gone.
With that in mind, I realized that my bottleneck was actually rendering 2k popups in the DOM even though they were invisible. So, after some trial and error, I came across a solution: states.
I added a boolean state called shouldDrawPopup, with a default value of false and only changed its value inside the handlePopupVisible function. The value of this boolean state will change only if:
Map zoom is above a threshold; and
Popup is not open
And then I changed the render function of my component to include a popup only if the shouldDrawPopup state is true:
return (
{shouldDrawPopup && (
<Marker
icon={divIcon}
position={coords}
onmouseover={() => handlePopupVisible(true)}
onmouseout={() => handlePopupVisible(false)}
ref={markerRef}
>
<Popup className="custom-popup-content" ref={popupRef} closeButton={false}>
<div
onMouseEnter={() => handlePopupVisible(true)}
onMouseLeave={() => handlePopupVisible(false)}
>
<img
className="popup-img"
alt='image'
src='https://cdn.discordapp.com/attachments/578931223775281162/644181902215086094/default_geocode-1x.png'
/>
<div className="popup-content">
<span className="popup-content-title">{name}</span>
{description && <span className="popup-content-subtitle">{description}</span>}
</div>
</div>
</Popup>
</Marker>
)}
);
If anyone has other solutions or any feedback to this problem, feel free to share!
Material UI explains Display in their docs as a way to Quickly and responsively toggle the display value of components!
I have an icon that i want it to be hidden on xs. I am trying
display={{ xs: 'none', sm: 'block' }} its not working.
I am trying display='none' just to see if it hides, also not working. If i set a className={classes.icon} and then i create an icon class in useStyles
icon: {
display: none,
},
the icon is hidden.
The behaviour is making me go crazy but am sure i am missing a concept on how these things rended or something is overriding the behaviour.
Also i dont know how to use display={{ xs: 'none', sm: 'block' }} inside the useStyle as double brackets are not allowed there
Here is full code:
const useStyles = makeStyles((theme) => ({
icon: {
paddingRight: 10,
color: 'white',
display: 'none', //setting this hides the icon
},
}
<Grid item container xs={12}>
<AccountBalanceIcon fontSize='large' className={classes.icon} display={{ xs: 'none', sm: 'block' }}/>
</Grid>
You can hide the AdbIcon when the screen's width becomes xs by using [theme.breakpoints.only("xs")] in the useStyles hook :-
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
[theme.breakpoints.only("xs")]: {
display: "none",
},
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<AdbIcon
fontSize="large"
className={classes.icon}
/>
);
}
Read about all the breakpoint queries that are given by material-ui here
'display' property belongs to 'Box' component, not the Icon component.. I.e. the Icon must be wrapped in the Box component. The following sample works:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
//display: 'none',
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<Box
display="block"
//display="none"
>
<AdbIcon
fontSize="large"
className={classes.icon}
/>
</Box>
);
}
I am new with ionic, I'm trying to integrate a google map in my application with ionic-native-googlemaps. In my browser it works fine but when I build for android or ios I have a blank page, and if I look at the console of google chrome at url chrome://inspect/device I don't have an error.
This is my typescript file
import {AfterViewInit, Component, OnInit} from '#angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '#ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '#ionic/angular';
#Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
And in my html file I have
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
I have searched for a solution everywhere but I have not found anything.
finaly i solve my problem, if someone have a same problem later,
just downgrade a version ionic-google maps and ionic core like this
"#ionic-native/core": "^5.24.0",
"#ionic-native/google-maps": "^5.0.0-beta.20",
After that look if your div with who contains google if is have a 500px height or more if it's ok, your map workly fine and you need to paid google map too.
you don't have to downgrade googleMap .
there is two way to solve this problem :
First you can put the tag DIV outside ion-content
<div id="map" style="height:100%;"></div>
<ion-content>
</ion-content>
OR you can add style css to put the content background transparant to overlaye the map screen.
In my case it was showing right on Android but no IOS. API key was ok. The map was there, under the html, but ion-content was not transparent.
Try adding this to your global scss or css file.
._gmap_cdv_ {
--background: transparent !important;
}
For iOS and Chrome, if your application has 'location' function. Apple is serious about location security aspect and Google Chrome is also somewhat serious about it. Hence:
Step 1. In your Mac enable 'Location Services' under 'Security and Privacy' :
Navigate to 'Settings'=>'Security & Privacy'=>Privacy Tab=>Select
Location Services ; click the padlock to make changes=>make sure
checkbox is checked for Google Chrome
Step 2. In Google Chrome go
to Settings=>privacy & Security=>make sure localhost:8100 is in the
'allowed' list=>click on it and on the next tab 'Reset permissions'
and select 'Allow' in the drop-down box for location property.
That should do it.
I am new to leaflet.
I have set up the map following the steps on
https://github.com/Asymmetrik/ngx-leaflet
I am trying to get the list of markers in the zoomed in area of the map that can be used in getting the objects in focus. How do I do this with ngx-leaflet in angular 4?
First, set up a handler on the (leafletMapReady) so you can get a reference to the map. In onMapReady, you can store the reference to the map inside your component so you can use it later.
<div class="map"
leaflet
[leafletLayers]="layers"
(leafletMapReady)="onMapReady($event)"
[leafletOptions]="options">
</div>
To handle zoom events, register for the zoomend event on the map, so you will get a callback whenever a zoom event ends on the map. You probably also want to handle moveend as well.
On those events, filter your markers based on their position and the bounds of the map. Update the bound layers array to contain the filtered markers. And, since you're making these changes in a Leaflet callback, which is outside of the Angular zone, you will want to run the change in Angular's zone - this.zone.run(...).
See this complete example:
import { Component, NgZone } from '#angular/core';
import { icon, latLng, Layer, Map, marker, Marker, point, polyline, tileLayer } from 'leaflet';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
detectRetina: true
});
markers: Marker[] = [
marker([ 45, -121 ], { icon: this.createIcon() }),
marker([ 46, -121 ], { icon: this.createIcon() }),
marker([ 47, -121 ], { icon: this.createIcon() }),
marker([ 48, -121 ], { icon: this.createIcon() }),
marker([ 49, -121 ], { icon: this.createIcon() })
];
layers: Layer[] = [];
map: Map;
options = {
layers: [ this.googleMaps ],
zoom: 7,
center: latLng([ 46.879966, -121.726909 ])
};
constructor(private zone: NgZone) {}
createIcon() {
return icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'leaflet/marker-icon.png',
shadowUrl: 'leaflet/marker-shadow.png'
});
}
updateMarkers() {
this.zone.run(() => {
this.layers = this.markers.filter((m: Marker) => this.map.getBounds().contains(m.getLatLng()));
});
}
onMapReady(map: Map) {
this.map = map;
this.map.on('moveend', this.updateMarkers.bind(this));
this.map.on('zoomend', this.updateMarkers.bind(this));
this.updateMarkers();
}
}
This is the key part of the above excerpt:
this.layers = this.markers.filter((m: Marker) => this.map.getBounds().contains(m.getLatLng()));
This is where you are filtering out all of the markers that are not in the current view bounds of the map and then setting the resulting collection of markers to be the new set of map layers.