I want to draw a polygon on the map using OpenLayers 6. Here how I did it using openlayers 2 and it works perfect:
return new OpenLayers.Geometry.Polygon([new OpenLayers.Geometry.LinearRing(pointsArr)]);
Here how I try to do it in OpenLayers 6:
function getShapeObject(raw) {
var coordinates = [];
raw.GeometryHlp.StrPoints.forEach(function (item, index, array) {
coordinates.push([item.X, item.Y]);
});
return new LinearRing(coordinates);
}
where is coordinates is array that looks like this:([x,y],[x1,y1],[x2,y2]...)
When I try to draw a polygon on open layers 6 the polygon is not displayed, and I don't get any errors in the console.
Do you have any idea what I am doing wrong? Why polygon is not displayed?
You cannot display a LinearRing. Use another pair of [] and create a Polygon:
return new Polygon([coordinates]);
Related
I am currently working on making clustered google maps. I have managed to cluster the markers. I have two types of markers in my map. Now when i cluster these, I can not show the underlying markers into groups.
I want to convert them into pie chart. Each marker count having their weight in the pie chart. Just like the below image.
Chart Marker Clusterer
I have also read about MarkerClustererPlus. But there are no examples using this in maps.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/
This link is not working. If there is any other documentation about this plz share.
I have two different types of marker in my map. When these two types of marker gets clustered, The cluster should become a pie chart which contains the weight of these two in proportionate to the underlying marker count.
If there is anything related to this please answer. Thanks.
All that you nead is here https://github.com/hassanlatif/chart-marker-clusterer
Traffic_accidents.json - is your data for simple_example.html
var accident_injuries = data.features[i].properties["5074"]; // Some like category ...
Then set data for your pie chart (group and title):
switch (Number(accident_injuries)) {
case 1:
accident_title = "Fatal";
break;
case 3:
accident_title = "Serious injuries";
break;
case 2:
accident_title = "Very serious injuries";
........
Set your up marker
var accident_LatLng = new google.maps.LatLng(Number(accident_lnglat[1]), Number(accident_lnglat[0]));
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title
});
Then push it into array
markers.push(marker);
After for loop just generate cluster
var markerCluster = new MarkerClusterer(map, markers, opt);
And thats all. Voalaa
I have a polygon drawn on map and it has to be a specific area where ONLY THERE can be drawn a polyline (some sort of geofencing)? Is it possible to do so?
I though of editable and clickable, but its not exactly what i want to do...
I actually found out the solution.
There is the code (in case someone will need it)
function addLatLng(event) {
var path = poly.getPath();
if(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle)){
path.push(event.latLng);
console.log(path);
}
}
I am working on GMap customization. I want a floating circle to move across a a Polyline. My question is that can we get all LatLng points in a Polyline after a specific interval for eg, all LatLng at interval of 100meters. My polyline code is:
/** polyline **/
var tpath = [
new google.maps.LatLng(15.508718,73.839337),
new google.maps.LatLng(15.511457,73.839165)
];
var travelPath = new google.maps.Polyline({
path : tpath,
map : map,
geodesic : true,
strokeColor : '#000',
strokeOpacity : 0.7,
strokeWeight : 1
});
i get only the end LatLng values. I want the values across the Polyline.
Thanks in advance.
You could use google.maps.geometry.spherical.computeHeading(startPoint, endPoint) to get the heading.
Then compute the distance with google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
If the distance is 475m and you want to make ~100 jumps just do 475/round(475/100) to calculate the distance you want to move the circle each time. round(475/100) will give you how many times (iterations) you should move the circle.
Then you could use computeOffset(from:LatLng, distance:number, heading:number, radius?:number)
Then you can use computeOffset(circleCenter, distance, heading) to get the new cirecle center point in a for loop the amount of iterations calculated above. Don't forget to include a delay in your loop.
I don't know how to get it with google maps api but you can draw a line to get the points from a start and end manually. It's simple math for a drawing a line and calculate.
You can set On click listener on Polyline by using GoogleMap.OnPolylineClickListener, after it returns the polyline you click on.
List<LatLng> mPoints=polyline.getPoints();
be sure to make your polyline clickable by setting.
lineOptions.clickable(true);
I need to highlight a section of a street between two intersections. I have found a similar question which was asked more than a year ago (see here) which says that Google, Bing, etc. do not provide street data through their APIs. Does anyone know if anything has changed in the APIs, and whether I can get street location latitude/longitude data from somewhere now?
I have done this in API V2, but it should not be to difficult to rewrite it for V3.
Have a look at this website http://www.fvs.de/anfahrt.php (in German) and click the "Weg in Karte zeigen" buttons ("show way in map") in the sections below the map. Each button highlights another street line in the map.
It is basically done by using directions object of Google Maps to plot a route between two arbitrary street points in the map (e.g. your two intersections). The points must be encoded with their LatLng coordinates. Here is a code example (as said this is API V2):
function initMap() { // called by page onload event
if (GBrowserIsCompatible()) {
// Display the map, with some controls and set the initial location
gMap = new GMap2(document.getElementById("map_canvas"));
gMap.addControl(new GLargeMapControl());
// ...
gMap.setCenter(GLatLng(49.238326, 6.977761), 15);
// init directions object and attach listener to handle route loads from function highliteRoute()
gDir = new GDirections();
gPoly = null;
GEvent.addListener(gDir, 'load', function(){
gPoly = gDir.getPolyline();
gMap.addOverlay(gPoly);
// zoom & pan to poly
var polyBds = gPoly.getBounds();
var polyZoom = gMap.getBoundsZoomLevel(polyBds);
gMap.setZoom(polyZoom);
gMap.panTo(polyBds.getCenter());
});
}
}
function highliteRoute(){
if(gPoly!=null) gPoly.hide();
gDir.load('from: 49.313530,6.969109 to: 49.238326,6.977761', {getPolyline:true});
}
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.