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
Related
I am referring the URL : https://housing.com/in/buy/search?f=eyJiYXNlIjpbeyJ0eXBlIjoiUE9MWSIsInV1aWQiOiJmMGZhNTIwNjI0ZjNhOGRlOWY4NSIsImxhYmVsIjoiUGltcGxlIFNhdWRhZ2FyIn1dLCJ2IjoyLCJzIjoiZCJ9
I am trying to make something similar, can anybody suggest how can I achieve it. I tried to search and explore google map APIs, but could not understand which API in particular can be used.
Try to read the Google Maps Showcase. Millions of apps and sites are using Google Maps APIs. Browse the showcase to see some of our favorite implementations.
You can use the MarkerClusterer library in combination with the Google Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map.
Here's a sample project for MarkerCluster: https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer
Polygon is one feature of Drawing tools of Google Maps. The DrawingManager class provides a graphical interface for users to draw polygons, rectangles, polylines, circles, and markers on the map.
The Drawing Tools are a self-contained library, separate from the main Maps API JavaScript code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>
Once you’ve added the libraries parameter, you can create a DrawingManager object as follows:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
Reference: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
I have recorded flight track data (lat, lon, altitude, angle, speed...) and want to simulate a cockpit view of the recorded flight.
Is there a JavaScript API to do this in 3D Google Maps (set and move camera view in Google Maps 3D)?
I am new to Google Maps API and cannot find documentation for this.
I think you can't do it using Javascript API. But closest thing for this is by using Styled Maps. As of now only Google Maps Android API and Google Maps SDK for iOS
can do it.
I found the very cool framework cesiumjs
which provides excatly what i was searching for.
Set camera with heading, roll, pitch and altitude.
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.
I'm not sure where to start looking in the documentation, but I'm trying to load map images of cities with their boundaries outlined.
Like this...
Any help getting started would be greatly appreciated, I'm pretty new to the maps api.
Thanks
There is currently no way to request a map with boundaries automatically rendered on it. Your best bet is to pull the polygon information from another system and render using an encoded polyline if you're using the Static Map API or regular overlays in the JavaScript API.
Google Static Map API
Here it is
here, some links to help you:
Geographical boundaries of states/provinces -> Google Maps Polygon
EInsert extension
Boundary Draw - Google Map Application
Getting neighbourhood boundaries from Google Maps API
https://stackoverflow.com/questions/8441467/can-you-draw-custom-search-boundaries-in-google-map
Ability to draw boundaries on Google Maps
I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).
How can I do this?
Thanks.
Bin
If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:
var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):
#!/bin/bash
tiles=`ls -d */*/*`
for thisPath in $tiles
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1<<zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done
Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)
There's Google Maps, of course. I'm totally serious: GMaps API allows you to create custom map types, you'll need to give it a way to show the "tiles" (parts of your image) at a given zoom level.
The most work I'd assume would be in creating the "tiles" from your image at various zoom levels (split the image into smaller rectangles), but I suppose that can be automated. The UI, dragging, zooming and whatnot is then handled by the JavaScript script of Google Maps.
(this works, I've made a boardgame with such custom tiles, using Google Maps as the underlying framework for showing it.)
I've just found this library, which is quite slick: http://polymaps.org/