I have a Vaadin application where I would like to integrate Google heatmaps. I am using com.vaadin.tapio.googlemaps dependency for displaying a map and it works fine. However, I am not sure how to add a heatmap layer on top of the Google map and I couldn't find any relevant resource.
Relevant part of my trial code looks like this:
VerticalLayout rootLayout = new VerticalLayout();
rootLayout.setSizeFull();
// Google Map
GoogleMap googleMap = new GoogleMap("api_key", null, null);
googleMap.setZoom(10);
googleMap.setSizeFull();
googleMap.setMinZoom(4);
googleMap.setMaxZoom(16);
Panel mapsPanel = new Panel();
mapsPanel.setSizeFull();
mapsPanel.setContent(googleMap);
rootLayout.addComponent(mapsPanel);
double centerLon = 8.5417;
double centerLat = 47.3769;
googleMap.setCenter(new LatLon(centerLat, centerLon));
GoogleMapMarker centerMarker = new GoogleMapMarker("Zurich", new LatLon(centerLat, centerLon),true, null);
googleMap.addMarker(centerMarker);
HeatMapLayer heatMapLayer = HeatMapLayer.newInstance(HeatMapLayerOptions.newInstance());
// Add data to heatmap
...
// How can I add this HeatMapLayer to the existing map?
// Or do I need a different approach?
UI.getCurrent().setContent(rootLayout);
HeatMapLayer is a GWT (client-side) object, you can't use it directly with GoogleMap which is a server-side component. You can check this fork of com.vaadin.tapio.googlemaps, it adds support for HeatMapLayer with GoogleMapHeatMapLayer class.
Related
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)
});
in google maps how can weput numbers on map instead of generic (if multiple number of icons listed means number have to increment like 1,2,3 )
instead of
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
is this possible in google maps ???
here i found some link but it's not working.
It's not possible to do with the current API (v3) - but you can use the StyledMarker Library. It extends the marker class and allows you to style the icon and put text inside the icons if you want as well (which is what I believe you're looking for). Just include the script in your application (after you load the Maps API script). And then add the StyledMarker like you would the regular marker object:
var styleMaker1 = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.MARKER, {
color: "FFFFFF",
text: "1" //this is where you'll set your incremented value
}),
position: myLatLng,
map: map
});
Here's a fiddle of how it looks: http://jsfiddle.net/svigna/7L2wY/
I am using Google Map v2 and I only want map view and nothing more. I also would like to get rid of the zoom in and out buttons.
If anyone knows what I need to add to the following that would be great.
function stores()
{
$('#storelist ul#stores').html("");
fetch(203,"task=location&location=vic");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-37.810013, 144.962683), 8);
map.setUIToDefault();
yellowIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
markerOptions = { icon:yellowIcon };
}
Remove map.setUIToDefault(). It adds the default look and feel to the Map.
(Reference docs: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.setUIToDefault)
If you want, you can also customise how the map can be interacted with. For example map.disableDoubleClickZoom() or map.disableDragging(). See the reference above for details.
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.
I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}