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
Related
Using Open Layers and leaflet-sidebar-v2, I've added the sidebar to my map, this works. However, I also need to add another layer to my map, this layer will outline each country. I have the coordinates stored in a 'borders.json' file. I'm attempting to use D3.json to to import the border coordinates and then L.geoJson to add the new layer to my map.
I'm currently getting the following error message:
Uncaught TypeError: t.getLayerStatesArray is not a function
Here is the relevant part of my code..
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], "EPSG:4326", "EPSG:3857"),
zoom: 3,
}),
});
var sidebar = new ol.control.Sidebar({
element: "sidebar",
position: "left",
});
map.addControl(sidebar);
d3.json(("borders.json"), function (json){
function style(feature) {
return {
fillColor: "transparent",
weight: 1,
opacity: 0.4,
color: 'grey',
fillOpacity: 0.3
}
}
geojson = L.geoJson(json, {
style: style,
}).addTo(map);
})
I think I might be adding the geojson layer to my map incorrectly, but I can't figure out what is wrong. I've spent quite a bit of time playing with it, but no luck.
Any helps is appreciated.
Cheers,
Beat
It might be hard to tell what the problem is without knowing other possible relevant parts of your code. I'd start by checking that the contents of borders.json follows valid GeoJSON format.
This is likely unrelated to your question, but is there a reason that you've declared style as a function like function style(feature) { ... }?
It looks like the style attribute of L.geoJson accepts an object rather than a function.
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 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();
})
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