I have the example below that creates a google maps Rectangle Object. I want to only declare the Object, something like 'rectangle = new google.maps.Rectangle()' and then access its properties like 'rectangle.bounds' but seem that this doesn't work
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
bounds is not a property, but a parameter of constructor. CMIIW.
According to the documentation, you can get the bounds property with method getBounds()
This should work. I haven't tried.
var bounds = rectangle.getBounds()
According to the docs the Rectangle class accepts an optional parameter of type google.maps.RectangleOptions This is the object which actually holds the properties like bounds, editable, and so on.
If you instantiate a new instance of Rectangle like
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
only the three properties you defined actually exist. Furthermore the bounds property will be undefined since it's assigned a bounds variable which does not exist.
Unfortunately Google doesn't offer a direct way to create such a RectangleOptions object.
So the proper way would be to create a new general object with all those properties available for a RectangleOptions object and feed those to the constructor of Rectangle.
var options = {
bounds: new google.maps.LatLngBounds(),
clickable: true,
draggable: false,
editable: false,
fillColor: '#FF0000',
fillOpacity: 1,
map: new google.maps.Map(""),
strokeColor: '#FF0000',
strokeOpacity: 1,
strokePosition: google.maps.StrokePosition.CENTER,
strokeWeight: 1,
visible: true,
zIndex: 1
}
var rectangle = new google.maps.Rectangle(options);
console.log(rectangle.bounds);
var rectangle = {}
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
try like above, pls
Related
I'm using google maps api v3 for my project and i'm using a set of polygon coordinates to highlight a region. But i'm highlighting 15 regions and each regions have more than 100 polygon coordinates. Is there any way i can create another file where i can put all the coordinates with their corresponding region's name and i can use those regions name in my html page.
Here is my code
var kerala = new google.maps.Polygon({
map: map,
paths: [
new google.maps.LatLng(12.758232,74.86084),
new google.maps.LatLng(12.736801,75.014648),
new google.maps.LatLng(12.329269,75.432129),
new google.maps.LatLng(12.093039,75.794678),
new google.maps.LatLng(11.942601,75.959473),
/* n number of coordinates */
],
strokeColor: '#873600',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#873600',
fillOpacity: 0.5
});
But i want something like this
var kerala = new google.maps.Polygon({
map: map,
paths: /* here i should give the name of a region, which will be defined with coordinates in another file */
});
Some one please help me with this , i don't even know how to define that polygon coordinate file, and which extension should that file be defined with.
make array of state name with latlng object and use as a path
example:
var maharashtraArray = [];
maharashtraArray.push(new google.maps.LatLng("latitude","longitude"))
then use this array as polygon path
var kerala = new google.maps.Polygon({
map: map,
paths: maharashtraArray
});
I use Leaflet JS, and I need same polygon on a one map
Now:
I need:
Thank's for your help!
If I set the noWrap:true on the tileLayer or the worldCopyJump:true I get:
Fiddle – jsfiddle.net/paRxe/5
var map = L.map('mapId',{
center: [35.67989, 139.76463],
zoom: 2,
// worldCopyJump: true,
maxZoom: 18,
minZoom: 1,
// reuseTiles: true,
// continuousWorld: trie
// reuseTiles: true,
// continuousWorld: true
worldCopyJump: true
}
);
Your 2 polygons are actually part of a multipolygon, forming a single feature.
You could use Turf.js for example, in order to 1) translate one of the part by 360 degrees, and 2) merge those 2 parts. Then record the new feature geometry to replace your current GeoJSON data.
For step 1), you should also be able to use directly Leaflet with latLng.wrap() method.
i have a String variable:
var street= "33.87928761152994,35.486247539520264,33.86875861815386, 35.486247539520264,33.86008146647083, 35.48592567443848";
i want it to be converted to a polyline path:
road = new google.maps.Polyline({
path: convertedStreet,
geodesic: true,
strokeColor:color,
strokeOpacity: 1.3,
strokeWeight:HW
});
road.setMap(map);
You need to prepare path as below.
convertedStreet.push(new google.maps.LatLng(lat, lng));
Loop through your values and push it in convertedStreet variable.
You can split your string and use it in above example:
var arr=street.split(',');
In your Question i am considering after split by , odd number is lat and even number value is lng.
for(var i=0;i<arr.length;i+=2)
{
convertedStreet.push(new google.maps.LatLng(parseFloat(arr[i]),parseFloat(arr[i+1] ));
}
road = new google.maps.Polyline({
path: convertedStreet,
geodesic: true,
strokeColor:color,
strokeOpacity: 1.3,
strokeWeight:HW
});
road.setMap(map);
working fiddle
So I have managed to create a circle in OpenLayers on click. However, the circle always appears at the origin of the map, I want it to appear wherever I click. This is my code -
circleStyle = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWidth: 3,
fillOpacity: 0.8
}
lon = mapApp.get("mapModel").get("mouse").get("longitude")
lat = mapApp.get("mapModel").get("mouse").get("latitude")
circleLayer = new OpenLayers.Layer.Vector "Alpr GeoSearch"
circle = new OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(100,100),
10000,
60
)
feature = new OpenLayers.Feature.Vector(circle,testPoint,circleStyle)
circleLayer.addFeatures(feature)
console.log(circleLayer)
mapApp.map.openLayersMap.addLayer circleLayer
Am I missing something here, this line...
new OpenLayers.Geometry.Point(100,100),
Should surely be
new OpenLayers.Geometry.Point(lon,lat)
Or the other way round (lat,lon), I can never remember. As far as I can see the code you are using is creating at point at coordinates '100,100', and you are never using your lon and lat variables you have grabbed.
In V3 of the javascript api for the polygon array there is a function insertAt(), does anyone have an example of how this is used?
You need to create your MVCArray object:
pathCoords = new google.maps.MVCArray();
Then set up your map:
myPoly = new google.maps.Polyline({
path: pathCoords,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 2
});
myPoly.setMap(map);
You can then insert latLng objects:
myPoly.getPath().insertAt(pathCoordinates.length, latLng);
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
http://code.google.com/apis/maps/documentation/javascript/examples/maptype-overlay.html