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,
})
);
Related
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 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();
})
Does anyone know how to click on a country, then have it zoom in on that country/area in a 2D geo world map?
I am using the world 2D map that is provided in eCharts 3. So my options look like this:
geo: {
name: '2D Global Map',
type: 'map',
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
...
Here is what I have thus far. When I click it just zooms straight in to 4 rather than where I clicked.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
zoom: 4
}
});
});
myChart.setOption(option);
I have tried to find ways to zoom in on the x and y offsets, but that doesn't work.
I also tried to center the map first like this but you need the latitude and longitude of where to center the map inside the array. The map uses JSON for the coordinates, and I can see them, but I can't get them to pull into the array.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
center: [(need to get lat/long of where clicked)],
zoom: 4
}
});
});
myChart.setOption(option);
Any thoughts on ways to do this?
Just in case anyone else is having this same problem, I was able to solve it in this manner:
myChart.on('click', function(params) {
if (params.data) {
myChart.setOption({
geo: {
center: params.data.value,
zoom: 6
}
});
} else {
myChart.setOption({
geo: {
center: [0,0],
zoom: 1
}
});
}
myChart.setOption(option);
});
It doesn't fully solve the problem where I wanted to be able to zoom in on any country, but it does solve the problem in the fact that I can zoom into a data point inside a country.
If anyone else has suggestions on how to do the country part please let me know.
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
I have a set of places saved from GoogleEarth as a KML file. I am trying to get the same locations to display on a simple OpenLayer2 map using the following Js code :
var map;
function init() {
var bounds = new OpenLayers.Bounds();
bounds.extend( new OpenLayers.LonLat(0.2, 52.3).transform('EPSG:4326', 'EPSG:3857'));
bounds.extend( new OpenLayers.LonLat(1.9, 51.5).transform('EPSG:4326', 'EPSG:3857'));
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Streets", // the default
{ numZoomLevels: null, minZoomLevel: 1, maxZoomLevel: 16 }
),
],
controls: [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
],
center: new OpenLayers.LonLat( 1.0, 52.1)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
restrictedExtent: bounds,
zoom: 9,
});
var layer = new OpenLayers.Layer.Vector("KML", {
animationEnabled: true,
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "/static/OL3Example/kml/locations.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
}) ;
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
The Restricted Extends make the map display just SUffolk, Uk, and all but 4 of the locations are in Suffolk (so should be on the map). Looking at the KML data I can confirm that the locations in the KML are correct Decimal Lon/Lat.
When I remove the Restricted Extent from the map - I can pan around the world, and I can then see a cluster of Icons at 0 Lon, 0 Lat.
I have looked at the documentation - and a number of stackoverflow related questions : for instance OpenLayers not displaying kml layer, but none have answered the question.
I have used Firebug to investigate the map object and it's layers - and I can confirm that the layer is visible - and is drawn, and there are no unrenderedFeatures on the layer - suggesting that the layer is loading fine - and it is a projection thing - though what is confusing.