I have seen 3D map of Google Maps JavaScript API WebGL beta. 3D buildings visualization was so beautiful and we want to use it. I have few queries regarding this API.
-- How will be the licensing for this product when we use for commercial purpose.
-- Is their support for adding our own building data to Google cloud, so that they can be rendered using Google webGL API.
-- I have seen making buildings transparent and highlighting with some color in the example given in URL: https://geo-devrel-io2021-travel.web.app/#hotels
I wanted to change the buildings rendering such as color, transparency, and all in the same manner. I am not able to find proper documentation for implementing such, Is there any documentation for implementing such features using Google WebGL API? screenshot is shown below
enter image description here
Thanks,
Gireesh
I'm not sure the exact mechanism by which the existing building is no longer visible, but the new building with highlighting was extruded using ThreeJS.
//hotels color
const hotelMaterial = new MeshStandardMaterial({
transparent: true,
opacity: 0.5,
color: 0x00ff00
});
const roofShape = new Shape();
points.forEach((p, i) => {
i === 0 ? roofShape.moveTo(p.z, p.x) : roofShape.lineTo(p.z, p.x);
});
const extrudeSettings = {
depth: BUILDING_HEIGHT,
bevelEnabled: false
};
const roofGeometry = new ExtrudeGeometry(roofShape, extrudeSettings);
const roof = new Mesh(roofGeometry, hotelMaterial);
roof.lookAt(UP_VECTOR);
roof.rotateZ(Math.PI * 1.5);
scene.add(roof);
I'll dig a bit more into this.
Related
I have a doubt, beyond looking for the code that solves my problem. Is it possible from the native cordova-plugin-googlemaps to perform this type of calculations? or should I import the javascript script from google maps? and would the google maps functions on the native google maps plugin? thank you very much
Use poly.containsLocation()
https://github.com/ionic-team/ionic-native-google-maps/tree/master/documents/poly#containslocationlocation-path
marker.on("position_changed").subscribe((params: any[]) => {
let latLng: ILatLng = params[0]; // or marker.getPosition();
let contain: boolean = Poly.containsLocation(position, POLYGON_POINTS);
marker.setIcon(contain ? "blue" : "red");
});
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/class/utilities/geometry/poly/containsLocation/README.md
Needing some help migrating my flying functionality from the Google Earth plugin to Cesium. Basically in ge I create a lookAt and called setAbstractView like below
var ge = google.earth.createInstance('map3d')
var lookAt = TVV.mapObject.createLookAt('');
lookAt.set(
21.2765107698755,
-157.825362273258,
0,
ge.ALTITUDE_RELATIVE_TO_GROUND,
20.1690873648706,
74.9605580474674,
764.534479411941
);
ge.getView().setAbstractView(lookAt);
That was my code for google earth plugin. In cesium following the migration guides I do:
// fly to code that works with cesium (but a little bit off)
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(-157.825362273258, 21.2765107698755, 764.534479411941),
orientation : {
heading : Cesium.Math.toRadians(20.1690873648706),
pitch : Cesium.Math.toRadians(74.9605580474674 - 90.0),
roll: 0
}
})
That code goes to almost the right place. I have to drag it down over to the right to see my placemark that I previously set (so the view is not exactly what it was in Google earth).
So I tried this code I also found.
// code that works with cesium
var center = Cesium.Cartesian3.fromDegrees(-157.825362273258, 21.2765107698755);
var heading = Cesium.Math.toRadians(20.1690873648706);
var pitch = Cesium.Math.toRadians(74.9605580474674);
var range = 764.534479411941;
viwer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
That code looks MUCH closer to the previous google earth plugin view. However, of course, it does not fly the camera to the view. It only sets the view right away.
My question is, how can I fly the camera to the lookAt view in cesium, taking advantage of my lat, lng, heading, pitch, and range values?
Here are the relevant API docs from GE and Cesium should you find them useful.
GE createLookAt
https://developers.google.com/earth/documentation/reference/interface_g_e_plugin.html#a82f1b3618531a6bfab793b04c76a43e7
GE Camera Control (search for "Panning to an absolute location")
https://developers.google.com/earth/documentation/camera_control
Cesium lookAt
https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#lookAt
Cesium flyTo
https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#flyTo
I also found this but was unsure about how to integrate it. If anybody could provide a codepen/jsfiddle or something of the like that would be greatly appreciated!
https://groups.google.com/forum/#!topic/cesium-dev/r5rddMUeS80
Thanks to Hannah Pinkos from the Cesium Forum for the answer.
After creating an entity and using values for heading, pitch(tilt), and range from the google earth plugin, you can fly to the entity with an offset...
var heading = Cesium.Math.toRadians(20.1690873648706g);
var pitch = Cesium.Math.toRadians(74.9605580474674 - 90);
var range = 764.534479411941;
TVV.mapObject.flyTo(entity, {
offset: new Cesium.HeadingPitchRange(heading, pitch, range)
});
Has anyone attempted to do this? As far as I can tell from the documentation, there doesn't seem to be a built in function for achieving this. Does anyone know if this is possible? Is it, possibly, a feature that the authors might intend to add to the platform?
The ImageryLayer documentation shows how to control brightness, contrast, hue, saturation, and gamma correction.
To get a globe with a solid color, you can remove the imagery layers like so:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false
});
var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.LIGHTSLATEGRAY;
A "minimalist map" (as you mention in the comments) is something you would probably need to get from a custom imagery provider. You may want to check out Stamen Maps for some examples of this. In particular, note their "Toner" map comes in a number of sub-varieties, any of which can be selected in Cesium.
For example, to try the "Toner Background" version, you would use:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
})
});
EDIT: #EmmanuelBuckski (OP) took this idea and ran with it, mixing the above two techniques together to produce a result that looks really nice! Check it out:
var viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false
});
var globe = viewer.scene.globe;
globe.imageryLayers.removeAll();
globe.baseColor = Cesium.Color.fromCssColorString('#f3f3f3');
var tonerLayer = globe.imageryLayers.addImageryProvider(
Cesium.createOpenStreetMapImageryProvider({
url : 'https://stamen-tiles.a.ssl.fastly.net/toner-background/',
credit : 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
})
);
tonerLayer.alpha = 0.1;
I am working on integrating Google Maps into a web application and I have a question of possibility.
I am using ASP .Net 4.0 as the basis for the code, but i suspect i will have to use JavaScript to achieve most of this, which is. Basically I want to display a bunch of markers on a map from Lat Long locations i have stored in a database, then have the user be able to draw a box on the map with the mouse, then get back the lat long of the four corners of the box.
If anyone knows how i could do this this would be of great help to me!
Thanks
The complexity of the Google Maps API has kept me scared for years. Recently I stumbled upon a jQuery plugin called GMap3 that does a lot of the heavy lifting for you.
I would suggest that after initializing and all that, you print a Javascript block from your .NET code, with something like this:
var markersFromDatabase = [
[60.164967,24.94758],
[59.956495, 10.764599]
//etc. This array should be printed from your serverside code
];
var markersToBeAdded = [];
jQuery.each(markersFromDatabase, function(indexOfItem, valueOfItem){
markersToBeAdded.push({
lat:valueOfItem[0],
lng:valueOfItem[1],
options: {
draggable: false,
icon: "img/your_awesome_icon.png",
title: "This is an icon from my database!"
}
});
});
jQuery("#map_canvas").gmap3(
{ action: 'addMarkers',
markers: markersToBeAdded
}
);
Edit: I realize now that I only answered half of your question. I'm afraid I have no apparent answer to the selection box. I suspect that you can use addRectangle or, in a worst case scenario, addFixPanel that lets you add a transparent <div> over your map canvas (and then trigger mouse events for that).
Here is one way to do it with Google Maps API 3's overlay editable feature.
Google Maps Overlay Editable
If your question is "How to select multiple markers with a rectangle", you can do something like this:
var markers = []; // This array must be filled with your data
var rectangles = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'rectanglecomplete', updateSelection);
function updateSelection(rectangle){
var lat_max = rectangle.getBounds().getNorthEast().lat();
var lat_min = rectangle.getBounds().getSouthWest().lat();
var lng_max = rectangle.getBounds().getNorthEast().lng();
var lng_min = rectangle.getBounds().getSouthWest().lng();
rectangles.push(rectangle);
for(var i=0;i<markers.length;i++){
if((lat_min < markers[i].getPosition().lat() ? (markers[i].getPosition().lat() < lat_max ? true:false):false)
&& (lng_min < markers[i].getPosition().lng() ? (markers[i].getPosition().lng() < lng_max ? true:false):false)){
triggeredMarkers.push(markers[i]);
}
}
}
The rectangles array is used to hold rectangles in order to be able to erase them later.
But if you just want a simple function that handle Polygons, there is this one that really can be helpful for you. It can be used like this:
var markers = [];
var polygones = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'polygoncomplete', updateSelection);
function updateSelection(polygon){
polygones.push(polygon);
for(var i=0;i<markers.length;i++){
if(google.maps.geometry.poly.containsLocation(markers[i].getPosition(),polygon)){
triggeredMarkers.push(markers[i]);
}
}
}
For rectangles and circles there's this answer that can help you.
I'm adding new layers to my google map application and want to add new logo there. Like in this case:
Is there some clean way how to do it in the google maps API, like using GCopyright and GCopyrightCollection classes in google maps API v2? Or is this missing in v3 (like many other features) and I have to do it manually?
In Google Maps API v3, there's no copyright API. Note that in v2, the GCopyright was used to add textual copyright information, not a logo.
To add a logo to the map you have to create a custom control.
Create a logo custom control:
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'img/my_logo.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.example.com';
});
}
Add the control to the map:
var logoControlDiv = document.createElement('DIV');
var logoControl = new MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoControlDiv);
Similarly a copyright information can be added. But you can't modify the default copyrights, you have to add yours somewhere next to the defaults.
If you want to add a copyright information that's bound to a bounding box and/or zoom level, you have to create such behaviour manually.