I have a very simple question.
Is there a way to add multiple polygons to PrimeFaces GMap?
If yes, can someone share a snippet/example?
If no, are there any alternatives to GMap in JSF?
Any help will be appreciated! Thanks
The first sentence in the link you provided gives you the answer:
Any number of polygons can be displayed on map.
I would do it the following way:
#ManagedBean
public class PolygonsView implements Serializable {
private MapModel polygonModel;
#PostConstruct
public void init() {
polygonModel = new DefaultMapModel();
//Shared coordinates
LatLng coord1 = new LatLng(36.879466, 30.667648);
LatLng coord2 = new LatLng(36.883707, 30.689216);
LatLng coord3 = new LatLng(36.879703, 30.706707);
//Polygon
Polygon polygon = new Polygon();
polygon.getPaths().add(coord1);
polygon.getPaths().add(coord2);
polygon.getPaths().add(coord3);
polygon.setStrokeColor("#FF9900");
polygon.setFillColor("#FF9900");
polygon.setStrokeOpacity(0.7);
polygon.setFillOpacity(0.7);
polygonModel.addOverlay(polygon);
//here it should be possible to add additional overlays
}
public MapModel getPolygonModel() {
return polygonModel;
}
}
The source code is also from the link you provided. Just create more Polygons and add them as overlay to your MapModel.
Related
I have a page(fragment) that shows google maps together with 1 marker icon. So now i would like to pass source and destination coordinates to this map so that it can show the shortest route together with the distance in Km. E.g i want the map to show the blue path in the image below :
Here is my code :
private void SetUpMap()
{
if (GMap == null)
{
ChildFragmentManager.FindFragmentById<MapFragment>(Resource.Id.googlemap).GetMapAsync(this);
}
}
public void OnMapReady(GoogleMap googleMap)
{
this.GMap = googleMap;
GMap.UiSettings.ZoomControlsEnabled = true;
LatLng latlng = new LatLng(Convert.ToDouble(gpsLatitude), Convert.ToDouble(gpsLongitude));
CameraUpdate camera = CameraUpdateFactory.NewLatLngZoom(latlng, 15);
GMap.MoveCamera(camera);
MarkerOptions options = new MarkerOptions()
.SetPosition(latlng)
.SetTitle("Chennai");
GMap.AddMarker(options);
}
I got my answer from this post :
Adding polyline between two locations google maps api v2
I converted the java code to C# and it worked fine.
I am testing adding a collection of points to a map utilizing the Geotools API. I've been following this example as best I could Problem creating a point and adding it to FeatureCollection, as the example code is old, and things like FeatureCollections is deprecated. I tried using DefaultFeatureCollection instance instead, and I am not sure if I am using it correctly, and that is why the points do not appear on the map. What am I doing wrong? Here is some of my code:
private void plotMarkers() {
final SimpleFeatureType TYPE = this.createFeatureType();
final SimpleFeatureBuilder BLDR = new SimpleFeatureBuilder(TYPE);
DefaultFeatureCollection features = new DefaultFeatureCollection();
// arbitrary start position
Coordinate pos = new Coordinate(0, 0);
final double pointSpacing = 1.0;
String title = "Test";
features.add(creatureFeature(BLDR, pos, title));
// display points on screen
Style style = SLD.createPointStyle("circle", Color.RED, Color.RED, 1.0f, 5.0f);
Layer layer = new FeatureLayer(features, style);
this.getMapContent().addLayer(layer);
}
Maybe this can help you to make it work
private MapContent map;
private static Style pointStyle = SLD.createPointStyle("Circle", Color.RED, Color.RED, 0.5f, POINT_SIZE);
public static void CreatePoints(double X, double Y){
createPointLayer();
createFeatures(X,Y);
}
static void createFeatures(double X, double Y) {
Point point = geometryFactory.createPoint(new Coordinate(X, Y));
pointCollection.add(SimpleFeatureBuilder.build(pointType, new Object[]{point}, null));
//create map layer event
MapLayerEvent mple = new MapLayerEvent(pointLayer, MapLayerEvent.DATA_CHANGED);
//create maplayer list event
MapLayerListEvent mplle = new MapLayerListEvent(map, pointLayer, map.layers().indexOf(pointLayer), mple);
okvir.mapPane.layerChanged(mplle);
System.out.println(MessageFormat.format("Created Point: {0}", point));
}
private static void createPointLayer() {
if (pointType == null) {
pointFeatureTypeBuilder.setName("PointCreated");
pointFeatureTypeBuilder.setCRS(map.getCoordinateReferenceSystem());
pointFeatureTypeBuilder.add("the_geom", Point.class);
pointType = pointFeatureTypeBuilder.buildFeatureType();
pointCollection = new DefaultFeatureCollection(null, pointType);
}
pointLayer = new FeatureLayer(pointCollection, pointStyle);
map.addLayer(pointLayer);
}
Hi i am trying to simply drag an away3d mesh with the mouse but with no luck.
as i see it i need to convert the mouseX and MouseY to the 3d world coordinates
however, this is what i tried and it doesnt work. also i need it to be draged in enter frame or TIMER.
HELP PLEASE :)
PlayerHandle = new Mesh(new CubeGeometry(200, 100, 5));
_view.scene.addChild(PlayerHandle);
PlayerHandle.mouseEnabled = true;
PlayerHandle.addEventListener(MouseEvent3D.MOUSE_MOVE, HandlePlayerHandler);
public function HandlePlayerHandler(me3d:MouseEvent3D):void
{
PlayerHandle.x = me3d.scenePosition.x;
}
public function UpdateScene(e:Event):void
{
_view.render();
}
Away3D has built in class,
import away3d.tools.utils.Drag3D;
e.g.
private var _drag3D:Drag3D;
private var _sphere : Sphere;
//create sphere geometry here in a function
.
.
.
_drag3D = new Drag3D(_view, ObjectContainer3D(_sphere));
private function handleEnterFrame(e:Event) : void
{
_drag3D.updateDrag();
_view.render();
}
See this, Drag3DTest Class.
I want to store the previous location before dragging a marker using PrimeFaces GMap - Draggable Markers
How to do it ?
showcase : GMap - Draggable Markers :
http://www.primefaces.org/showcase/ui/gmapDraggableMarkers.jsf
You could store copies of the original Marker objects and then, in the onMarkerDrag handler, you could find the original Marker that corresponds to the one passed by the MarkerDragEvent.
I say "copies" because it is possible that Primefaces modifies the LatLng of original Marker instead of creating a new one (most likely). You can use the "data" or "title" attributes to give them IDs and correctly match the copied Markers.
I can probably explain this with code, let me know if you need help.
Edit:
To meet your requirement, I would adapt the Primefaces showcase example as follows (notice that it requires the Marker's title to be unique. If this is not possible, implement this using the data attribute of the Marker class.):
package org.primefaces.examples.view;
//...
public class MapBean implements Serializable {
private MapModel draggableModel;
private Map<String, LatLng> positions = new HashMap<String, LatLng>(); // new
public MapBean() {
draggableModel = new DefaultMapModel();
positions.put("Konyaalti", new LatLng(36.879466, 30.667648));
positions.put("Ataturk Parki", new LatLng(36.883707, 30.689216));
positions.put("Karaalioglu Parki", new LatLng(36.879703, 30.706707));
positions.put("Kaleici", new LatLng(36.885233, 30.702323));
for (Map.Entry<String, LatLng> e : positions.entrySet()) {
Marker m = new Marker(e.getValue(), e.getKey());
m.setDraggable(true);
draggableModel.addOverlay(m);
}
}
public void onMarkerDrag(MarkerDragEvent event) {
marker = event.getMarker();
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
// update position and get the old one
LatLng oldPosition = positions.put(marker.getTitle(), marker.getLatlng());
// ...
}
// ...
}
I am using Primefaces gmap to show markers and circle overlays on some markers. I want to toggle the circle overlay on a button click. Any idea how I can do that? I am using JSF 2.2 and Primefaces 3.4.2.
This is how I load the map in the jsf page.
<p:gmap center="21, 78" id="map"
zoom="2"
type="roadmap"
style="width:99%;height:90%;position:absolute"
model="#{SCNBean.supplyChainMapModel}"
widgetVar="mapVar">
This is how I load the markers and circle overlays in my backing bean.
#PostConstruct
public void viewSupplyChainNetwork(){
for (Node node : supplyChainNodes) {
LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
supplyChainMapModel.addOverlay(marker);
//adding circle overlay
Circle circle1 = new Circle(coord, riskval*10000);
circle1.setStrokeColor("#d93c3c");
circle1.setFillColor("#d93c3c");
circle1.setFillOpacity(0.7);
supplyChainMapModel.addOverlay(circle1);
}
Here is how the button on the map is created using javascript
function HeatMapControl(heatMapControlDiv, gmap) {
heatMapControlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.title = 'Heat Map';
heatMapControlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.innerHTML = '<strong>Heat Map</strong>';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
heatmap.setMap(heatmap.getMap() ? null : gmap);
});
I want to make the circle overlay toggle on the click of a button on the map. How can I achieve this?
I would move the mapModel to a requestScoped Bean, let's call it SomeRequestScopedMapBean
it should have a reference to your current bean as a ManagedProperty
Your xhtml could work like this: (I don't think there is any need to create it with javascript, but I dit it with a commandButton)
<p:gmap
model="#{someRequestScopedMapBean.supplyChainMapModel}"
widgetVar="mapVar"
id="pgmapId">
<p:commandButton value="Toggle Circles"
actionListener="#{sCNBean.toggleShowCircles}"
ajax="true"
update="pgmapId"
/>
Here's the callback for your action, in your viewScoped Backing bean
public void toggleShowCircles(){
if(showCircles)
showCircles = false;
else
showCircles = true;
}
The MapModel construction is moved to your SomeRequestScopedMapBean
#PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
supplyChainMapModel.addOverlay(marker);
if(sCNBean.showCircles){
//adding circle overlay
Circle circle1 = new Circle(coord, riskval*10000);
circle1.setStrokeColor("#d93c3c");
circle1.setFillColor("#d93c3c");
circle1.setFillOpacity(0.7);
supplyChainMapModel.addOverlay(circle1);
}
}