I tried integrating google maps tile layer into leaflet using leaflet-google plugin. Everything loads fine, but when i try to zoom in/out, first my custom feature layer zooms and then the google map tile layer zooms. Why don't they zoom together?
var map = new L.Map('map', {center: new L.LatLng(18.93718 , 72.79366), zoom: 10});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
and I am adding my feature layer by:
L.geoJson(inputgeoJson, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
Thanks!
The Google layer in Leaflet is a hack (a possibly illegal one), and involves using the Google Maps API within Leaflet. Since Leaflet and the Google Maps API have different zoom transition animations, you see this effect. You could use Google tiles directly in Leaflet, but that's definitely be illegal, not just maybe.
Related
I have a leaflet map set with a CRS of L.CRS.SIMPLE and several Markers.
The tiles are custom tiles pulled from my server (the usual /zoom/x/y.png) format.
I'm building a mobile app with Android using the same tiles and so using Google Map the coordinate system is different but I would like to reuse all my Markers coordinate.
Is there a way to convert the marker's simple coordinate to a coordinate that can be used on the google map coordinate system ?
More info:
The map is a fictional game map that I have tiled myself from a hung PNG file.
I had set my Leaflet MAP CRS like this:
crs: L.Util.extend({}, L.CRS, {
code: "simple",
projection: L.Projection.LonLat,
transformation: new L.Transformation(1, 0, -1, 0)
}),
The WebApp let users add their own Markers on it, I had saved all the Marker lat/lng using what the leaflet map was giving.
I'm now trying to build a native Android app using the exact same tiles which works fine however I do not know how to put all the Marker on it since Google Map use the normal earth lat/lng coords.
Is it even possible to covert from L.CRS.SIMPLE to whatever Google Map uses ?
I'm trying to display a map just like Google does here https://www.google.fr/maps
With google maps API, I'm struggling at finding the following :
makeing ctrl + drag change the tilt
programmatically setting the tilt to 0, but keep 3D imagery (for high resolution purpose basically)
programmatically setting the tilt to a custom value (say 30 degrees)
makeing ctrl + drag rotate the map
programmatically rotate the map to a custom value
Is that even possible ?
First off, the map in your link by default does not support 45 degree tilt nor rotate options, as that is a roadmap. In order to enable tilt and rotate options in your map, you will need to set your mapTypeId to "Satellite" or "Hybrid" first and set the rotateControl in your Map Object to true; this is an example adapted from Google Maps API:
function initialiseMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.390205, lng: 2.154007},
zoom: 12,
mapTypeId: 'satellite',
rotateControl: true
});
map.setTilt(45);
}
As far as I can tell from their documentation:
Google Maps JavaScript API support special 45 degree imagery for
certain location
You can set the heading option and tilt option dynamically by calling the respective method on the map object. But I do not think you can override the preset behavior programmatically unless this is something that I have missed from the documentation . This is another link to the 45 degree service for you.
if you are in 3d mode and using a desktop, you can tilt or rotate by holding SHIFT+CTRL at the same time. doesnt work in roadmap mode though
I Use Leaflet Map Plugin. i Write this code for create and load google map tiles in LeafLet
var map = L.map('map').setView([31.2744015, 48.7251283], 18);
// load a tile layer
//Satellite:
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
this code work fine. But I Want Load another google Map option in this plugin Like 3D View map
But will this be done?
thanks for help me.
Two things:
Loading map tiles from Google using just a L.TileLayer contravenes the terms&conditions of Google Maps (the part about "accessing the content only through the Google Maps API"). Do not be surprised if Google gets angry at that.
As pointed out in the answers to the question «Leaflet Map API with Google Satellite Layer» , look in the Leaflet plugins list. In particular, GoogleMutant might be of interest.
As of now, Leaflet is able to display 2D maps only. There are no plans to make it display oblique imagery, or provide tilt capabilities.
If you need these features, you might want to have a look at other web mapping libraries, such as https://www.mapbox.com/mapbox-gl-js/api/ or https://cesiumjs.org/. These can handle more degrees of camera freedom, and some degree of terrain elevation display.
https://labs.mapbox.com/bites/00093/
pls see the source code of it , as
window.setInterval(function(){
$('.rotating').attr('style','-webkit-transform:rotateZ('+angle+'deg);-moz-transform:rotateZ('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
if ($('.rotating').length>0) $('.pivotmarker').attr('style','-webkit-transform: rotateY('+angle+'deg);-moz-transform: rotateY('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
angle=angle*-1;
},1500);
may it help
I know I can add a Google map to an OpenLayers 2 map as an OpenLayers.Layer.Google(.v3) layer and can add the traffic layer to the included map using code like:
var map;
function init() {
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
map.addLayers([gmap, gphy]);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(gmap.mapObject);
map.setCenter(new OpenLayers.LonLat(-2, 50.9).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10);
}
However our site uses a set of standard base maps and we would like to be able to display the traffic layer over these. Is this possible?
We would also be interested in being able to display Google weather and the Streetview overlay in a similar fashion.
Our site already uses Spherical Mercator projection so this is not an issue.
From the Google Maps Terms of service:
(h) No Use of Content without a Google Map. You must not use or
display the Content without a corresponding Google map, unless you are
explicitly permitted to do so in the Maps APIs Documentation. In any
event, you must not use or display the Content on or in conjunction
with a non-Google map. For example, you must not use geocodes obtained
through the Service in conjunction with a non-Google map. As another
example, you must not display Street View imagery alongside a
non-Google map, but you may display Street View imagery without a
corresponding Google map because the Maps APIs Documentation
explicitly permits you to do so.
In short, you can't use Google Maps content with a non-Google map, but you can use it without a map, depending on what the API documentation says.
I am using Google map api V3, and in my application i m making gradable marker. Every thing is working fine except the marker icon while dragging.
What happens in Google Map V2 was it changes marker icon automatically when it was being dragged but in Google Map V3 when dragging the marker its icon doesn't change like it used to change in V2.
The answer is simple: in V3 they removed it, since they considered the animation to be of little use in mobile devices. They are trying to aim this V3 release to be as lightweight as possible.