The following instruction won't work as I expect:
map.panTo(e.latlng, {animate: true, duration: 1.0});
I've tried different values : 0.5, 1.0, 10.0, 1000.0, 1, 10
but the panning is just as fast!
Any idea?
Thanks!
Are you sure you're using the latest Leaflet version? I just tried this code in 0.6.4 and it worked perfectly, panning slowly as expected:
map.on('click', function (e) {
map.panTo(e.latlng, {animate: true, duration: 5.0});
});
Related
My problem is to how make the white background of a-frame transparent that we just can see whatever we see from the iPhone camera plus the 3D-model.
I have been trying to make AR (Augmented Reality) working in Ionic iOS version. I realised that a-frame can not trigger webcam for some reasons in iOS. So one of the workaround came to my mind is to load 3D model by a-frame and and trigger the camera at the same time. This some how works, in 2/3 of the screen we can see the camera input and 1/3 the model is loaded with white background. If I can transparent the background of the model then at I would be very happy. Is there any way to make the background of the model transparent in Ionic? is there any other workaround for this problem?
what I have in home.page.html is simply:
`
Ionic Blank
<ion-content>
<a-scene *ngIf="iosReady"
renderer="alpha: true;
colorManagement: true;
sortObjects: true;
physicallyCorrectLights: true;
maxCanvasWidth: 1920;
maxCanvasHeight: 1920;">
<a-gltf-model position="1 1 -4"
src="/assets/models/LibertStatue.gltf" ></a-gltf-model>
</a-scene>
</ion-content>`
And in home.page.ts I have:
const cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: window.screen.height,
camera: 'rear',
tapPhoto: true,
previewDrag: true,
toBack: true,
alpha: 1
}
CameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
console.log(res);
},
(err) => {
console.log(err);
});
});
I'm having an issue with vue-materials. I've asked into github but the solution seems not to work. The issue is:
https://github.com/johnleider/vue-materials/issues/46
I've found the way (see my third comment, with attached images) but it doesn't seem to work. I attach here this comment:
A little bit more of light. Now, I changed modalParams as a function into computed:
computed: {
...mapGetters([
'authToken',
]),
modalParams() {
const params = {
opacity: 0.5,
dismissible: true,
};
return params;
},
},
Then, I can see this in dev Tools:
But my modal doesn't seem to apply this params.
Any clue?
I'm working on a map with a few circleMarkers. When a user is clickin on one of this circleMarker, I would like to center the map on this circleMarker and to zoom in. It works when I try this on multipolygon layers, but I didn't succeed on circleMarkers. Does anyone can help me?
Here is the code for my circleMarkers:
<script>
var map = L.map('map', {
center: [41.8, 12.5],
zoom: 5,
zoomControl:true, maxZoom:15, minZoom:4,
});
var feature_group = new L.featureGroup([]);
var raster_group = new L.LayerGroup([]);
var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri',
});
basemap.addTo(map);
function style1(feature) {
return {
weight: 2,
radius: 10,
opacity: 1,
color: 'black',
weight: 1,
fillOpacity: 1,
fillColor: 'red'
};
}
L.geoJson(villes, {
style: style1,
pointToLayer: function (feature, latlng)
{
return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true });
}
}
)
.addTo(map)
.showLabel;
</script>.
Here is a link to the complete map.
Thank you.
This can be achieved really simply.
Let's assume marker points to your leaflet marker and map to your leaflet map.
Quick way (recommended)
marker.on("click", function(event) {
map.setView(marker.getLatLng(), 16);
}, marker);
Here, I don't even compute the needed zoom level, because I assume leaflet will have to zoom to its max level anyway.
I could also have added my marker to a L.LayerGroup, even if the main point of a LayerGroup is to group multiple markers.
Anyhow, the more precise way
marker.on("click", function(event) {
map.setView(marker.getLatLng(), map.getBoundsZoom(layerGroup.getBounds());
}, marker);
Note that the quick way will do it nicely too. The second solution might seem more precise but it also slower, and implies a use of LayerGroup which is not the way it has been designed to work (create a new layergroup for each marker).
Don't forget to take yout time reading the docs, it's well-designed and pretty easy to understand.
I find the solution:
function onClick(e) {map.setView(this.getLatLng(),15);}
L.geoJson(villes, {
style: style1,
pointToLayer: function (feature, latlng)
{
return L.circleMarker(latlng).bindLabel( feature.properties.Name, {className: "ville", noHide: true }).on('click', onClick);
}
}
)
.addTo(zoom1)
.showLabel;
Thanks Stranded Kid for your help.
I'm trying to create some Famo.us items and having problems with the approach and wondered if anyone can help.
I am trying to create a View, within which is a Surface. I would like the background of that Surface to be transparent, but I want the Text to be fully visible.
I can solve this with 2 Surfaces on top of each other but that sounds silly, so wondered if anyone can help. My code is:
var infobarContent = new Surface({
size: [true, true],
properties: {
cursor: 'pointer',
borderRadius: '5px',
padding: '10px',
backgroundColor: 'rgb(71,3,101)',
color: 'white',
textAlign: 'center'
}
});
var infobarContentModifier = new StateModifier({ /*opacity: 0.4,*/ align: [0.05, 0.1], origin: [0.05, 0.8] });
I did try adding a Class to the Surface, but it seems to ignore any background opacity. I also tried to use "rgb(71,3,101, 0.4)" in the Properties of the Surface - as would work in normal websites - but this does not work either.
Any help would be brilliant :)
Thanks, and hope you are enjoying your Weeekend.
:)
The problem is your BackgroundColor rgb(71,3,101, 0.4)
The correct CSS value is rgba(71,3,101, 0.4)
In leaflet javascript library i can't get the style value of a layer.
I have looked at the documentation but i can't see any way to do this!
Here how i set the style :
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0,
opacity: 0.9,
});
There is a methode setStyle but not getStyle ... How can i check for those values?
I need this to know the state of a layer to know what to do if the layer is "red" etc ...
Thank you!
layer.options contains those values.