I am using Leaflet fo implement a map in my website.
I use the feature gestureHandling to make sure that scrolling is not captured by the map. Everything works fine - but I would like to change the gestureHandling attribute later in the code when a user choses to make the map fullscreen.
I can't get it to work. Do I have to reinitialise the map somehow?
Thanks in advance!
This is my Code:
map = L.map($map[0], {
center: new L.LatLng(47, 10),
zoom: 14,
minZoom: 2,
maxZoom: 18,
layers: [layerGroup],
gestureHandling: true
});
$('body').on('click','.resize-toggler',function(){
map.gestureHandling = false;
})
I found the solution. The following code works.
There seems to be a function you can call -> map.gestureHandling.disable();
map = L.map($map[0], {
center: new L.LatLng(47, 10),
zoom: 14,
minZoom: 2,
maxZoom: 18,
layers: [layerGroup],
gestureHandling: true
});
$('body').on('click','.resize-toggler',function(){
map.gestureHandling.disable();
})
Related
I'm new to Openlayers. While I was using Node.js, my codes were working fine. But I ran into some problems when I switched to Asp.Net Core.
I learned that when calling modules to use them in Asp.Net Core I need to add some prefixes to their heads.
For example to be able to use the "Map" module:
const map = new ol.Map({ });
But I don't know what prefix I should add before "defaultInteractions()" in this line
interactions: defaultInteractions().extend([select, translate]),
Here is my Map code snippet
const map = new ol.Map({
interactions: defaultInteractions().extend([select, translate]),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent,
}),
}),
rasterLayer, vectorLayer
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2,
maxZoom: 8,
}),
});
When I ctrl + left click on defaultInteraction(), the ol.interaction.js page opens,
When I ctrl + left click on extend([select, translate]) the ol.Collection.js page opens.
But both are not working.
Here is the error i got
Thanks in advance and have a good day <(^.^)>
[solved]
I changed the line to:
interactions: ol.interaction.defaults().extend([select, translate]),
I started working on a Vector Layer to render SQL Spatial Data in OpenLayers. When rendering this example (see Json) everything works perfectly fine. See code below:
//creates source to get json data from
let vSource = new VectorSource({
url: '/assets/germany.json',
format: new GeoJSON()
});
//set focus of the camera on this source
vSource.on('addfeature', () => {
this.map.getView().fit(vSource.getExtent());
console.log(this.map.getView().getCenter());
});
//add source to layer and afterwards load it into map
let vLayer = new VectorLayer({
source: vSource,
visible: true
});
//layer styling
vLayer.setStyle(new Style({
stroke: new Stroke({
color: '#FF5733',
width: 8
})
}));
this.map.addLayer(vLayer);
Map instantiation looks as following:
this.map = new Map({
view: new View({
center: [10, 10],
zoom: 3,
}),
layers: [],
target: 'ol-map'
});
But when i want to render this json file I am facing a blank map. Focus wont get set and not even errors appear. I am assuming its all about the boundaries?
How can Polygon coordinates get rendered which are our outside default boundaries, if there is such thing as "default"?
For example:
[12058.4521484375, 5345.98388671875],
[11408.95703125, 5345.98388671875]
Reading through the API I can deduce that the option extent may be key to solving this issue?
Best regards
A newbie at OpenLayers
Openlayers default projection is EPSG:3857. I think your geojson and center of map is EPSG:4326.
this.map = new Map({
view: new View({
projection: 'EPSG:4326',
center: [10, 10],
zoom: 3,
}),
layers: [],
target: 'ol-map'
});
let vSource = new VectorSource({
url: '/assets/germany.json',
format: new GeoJSON({ featureProjection: 'EPSG:3857' })
});
I'm adding a GeolocateControl in my Mapbox maps. It works fine and displays my current position. However it zoom way too much out out. By default my map is zoom at 10. But when I click the GeolocateControl is travels to new destination and zooms out. I've tried adding zoom: 10, but no luck...
map.addControl(
new mapboxgl.GeolocateControl({
zoom: 10,
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
})
);
It's a bit convoluted to follow the documentation, but basically instead of zoom going directly on the object you provide, it needs to go on an object called fitBoundsOptions:
map.addControl(
new mapboxgl.GeolocateControl({
fitBoundsOptions: {
zoom: 10,
},
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
})
);
I was interested in using google maps API with quite big KML imported as fusion table. I used the basic example from google tutorials on how to use fusion table as a layer in a map, and after ~8 hours of me just trying out stuff the API started to throw an error, that 25.000 map loads limit have been reached. Google developer console doesn't say it's even close hitting any limit. Does anybody know if KML complexity or size can affect API limits? Or maybe I've some potential loops in the code? Or generally what could cause the problem? Here is what I did:
<script type="text/javascript">
function initialize() {
console.log('asdf');
var mapDiv = document.getElementById('googft-mapCanvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(51.11786991747952, 17.001362352071737),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "col13",
from: "<TABLE>",
where: ""
},
options: {
styleId: 2,
templateId: 2
},
styles: [{
where: 'col3 \x3d \x27VALUE\x27',
polygonOptions: {
fillColor: '#0000FF'
}
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks
First, I get the native Google maps element, because as far as I can tell, the Angular 2 API doesn't expose it. That looks like the code below and works fine:
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
constructor(public mapApiWrapper: GoogleMapsAPIWrapper ) {}
this.mapApiWrapper.getNativeMap().then((map)=> {}
All this works great and I am able to set options on the native map element, for example, the code below works:
let position: any = new google.maps.LatLng(45.521, -122.677);
map.setOptions({
zoom: 1,
center: position
});
However, when I try to set MapOptions and move the zoom controls via ZoomControlOptions, I get a bunch of errors. What I try is this:
let zoomControlOptions: any = new google.maps.zoomControlOptions({
style: google.maps.ControlPosition.small,
position: google.maps.ControlPosition.LEFT_CENTER
});
This throws:
TypeError: google.maps.zoomControlOptions is not a constructor
If I try to do this:
map.setOptions({
zoom: 1,
center: position,
zoomControlOptions: {
style: google.maps.ControlPosition.small,
position: google.maps.ControlPosition.LEFT_CENTER
}
});
it throws:
Argument of type '{ zoom: number; center: any; zoomControlOptions: {
style: any; position: any; }; }' is not assignable to parameter of
type 'MapOptions'. Object literal may only specify known properties,
and 'zoomControlOptions' does not exist in type 'MapOptions'
I am pretty lost at this point, because I see that MapOptions takes a zoomControlOptions arg in the docs...
As you are manipulating directly the native map, you are outside angular2-google-maps universe.
EDIT
Previous answer for #1 was wrong, it seems there is no such thing than a ZoomControlOptions constructor. Creating an object litteral works fine.
let zoomControlOptions: any = new {
style: google.maps.ControlPosition.small,
position: google.maps.ControlPosition.LEFT_CENTER
);
As for issue #2, examples around (here and here) always set zoomControlOptions along with zoomControl: true