please look into the image for reference
when i select the checkbox i am calling the getTerritory function from toggleTerritory(),that draws the polygon.But the problem i am facing is, i am not able to clear the polygon when checkbox is unselected.
Can anyone help me in doing this.
toggleTerritory function is below
$scope.toggleTerritory = function(item, list) {
var idx = list.indexOf(item);
if (idx > -1) {
list.splice(idx, 1);
//How to clear the polygon here
}
else {
list.push(item);
$scope.getTerritory(item);//this creates the polygon
}
};
$scope.drowTerritory={};
$scope.getTerritory= function (territory_id) {
setTimeout(function(){
$scope.drowTerritory= _.find($scope.territory, function(o) {
return o.territory_id === territory_id;
});
console.log("$scope.drowTerritory");
console.log($scope.drowTerritory.geometry);
//Edit Territory
console.log("$scope.drowTerritory");
console.log($scope.drowTerritory.geometry);
var wkt=$scope.drowTerritory.geometry.replace(/, /g, ",");
console.log("wktnewwwww");
console.log(wkt);
var regex = /\(([^()]+)\)/g;
var Rings = [];
var results;
while( results = regex.exec(wkt) ) {
console.log("wkt");
console.log(wkt);
Rings.push( results[1] );
}
var ptsArray=[];
var polyLen=Rings.length;
//now we need to draw the polygon for each of inner rings, but reversed
for(var i=0;i<polyLen;i++){
AddPoints(Rings[i]);
}
poly = new google.maps.Polygon({
paths:ptsArray,
strokeColor: '#1E90FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#1E90FF',
fillOpacity: 0.35,
editable: false,
});
poly.setMap(map);
//function to add points from individual rings
function AddPoints(data){
var pointsData=data.split(",");
var len=pointsData.length;
console.log("len");
console.log(len);
for (var i=0;i<len;i++)
{
var xy=pointsData[i].split(" ");
var pt=new google.maps.LatLng(xy[1],xy[0]);
ptsArray.push(pt);
};
}
},1000);
};
From this documentation, o remove a polygon from the map, call the setMap() method passing null as the argument. In the following example, bermudaTriangle is a polygon object:
bermudaTriangle.setMap(null);
Note that the above method does not delete the polygon. It simply removes the polygon from the map. If instead you wish to delete the polygon, you should remove it from the map, and then set the polygon itself to null.
Check this SO question, I think it can help you a lot.
Related
Please forgive me, this is my first question after searching a lot for it here.
I am trying to automatically select different color circles on a leaflet map for an attribute in an object.
The ID has different values in the database, so unfortunately I can't assign it to fixed colors.
The JSON object I am working with looks like this:
fcoord = { id: "xxxxxxxx", lat: "xxxxxx", lon: "xxxxxx" }
The thing is that for every different ID in the Object it should automatic mark a Circle on the map in a different Color.
My JavaScript Code looks like this:
var fMarkers = newSet([]);
for (var i:0;i<fcoord.length;i++) {
drawCirclef(fcoord[i], mymap, fMarkers);
}
function drawCirclef(fcoord, map, fMarkers){
var circle = L.circle(fcoord.lat, fcoord.lon] {
fillOpacity: 0.1,
radius: 1500,
fillColor: 'green',
}).addTo(map)
fMarkers.add(circle);
The result is that every ID in the object is highlighted in the same color because I have defined it as 'green'.
I'm stuck on how to make it mark in a different color for each ID.
Can someone please help me move forward or find a solution.
Many many thanks in advance
Create a function that retuns the wanted color for the id
function getColor(id){
switch(id){
case 'id1': return 'green';
case 'id2': return 'blue';
default: return 'red';
}
}
var fMarkers = newSet([]);
for (var i:0;i<fcoord.length;i++) {
drawCirclef(fcoord[i], mymap, fMarkers);
}
function drawCirclef(fcoord, map, fMarkers){
var circle = L.circle(fcoord.lat, fcoord.lon] {
fillOpacity: 0.1,
radius: 1500,
fillColor: getColor(fcoord.id),
}).addTo(map)
fMarkers.add(circle);
}
I found a solution/workaround with a friend of mine:
First creating a var for the Colors of the future Circles:
var colors = ['cyan', 'grey', 'pink', 'green', 'purple', 'black', 'orange']
var colorsForKey = {}
Edit the JSON-Object so that each ID will be a Key with all appearing Lat, Lon etc. inside it.
Creating a Counter which walks through the Var and everytime a new ID appears, jump to the next Color.
function createColors(fcoord){
counter = 0;
for (i in fcoord) {
counter = 0
colorsForKey[i] = colors[counter];
counter = counter + 1
}
}
function getColor(id) {
return colorsForKey[ID];
}
function drawCirclef(fcoord, map, fMarkers, ID){
var circle = L.circle([fcoord.lat, fcoord.lon] {
fillOpacity: 0.1,
radius: 1500,
fillColor: getColor(ID),
color: getColor(ID)
}.addTo(map)
.fMarkers.add(circle);
}
var fMarkers = newSet([]);
createColors(fcoord);
for (var ID in fcoord){
for (var i=0;<fcoord[ID].length;i++){
drawCirclef(fcoord[ID][i], mymap, fMarkers, ID);
At the outset, I inform you that I am a novice javascript programmer. I'm writing an application to dynamically draw a circle marker on a map. I use the leaflet library. As the source, it uses data loaded from a csv file. The csv file consists of three columns: date, x coordinate, y coordinate. At the moment the map works in such a way that it draws all markers at one time.
var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([51.95, 19.55], 6);
var myRenderer = L.canvas({ padding: 0.02 });
for (var j=1; j<lines.length; j++)
{
var values = lines[j].split(';'); // Split up the comma seperated values
var x= values[2];
var y = values[3];
var data2 = values[1];
var markery2 = [];
markery2.push(y,x);
document.getElementById("demo").innerHTML =
"Data: " + data2;
console.log("JSON");
console.log(data2);
L.circleMarker(markery2, {
color: 'blue',
fillColor: 'blue',
fillOpacity: 0.2,
weight: 1,
radius: 3,
renderer: myRenderer
}).addTo(map).bindPopup('marker ' + j);
//Set up the data arrays
}
}
});
Ultimately, I would like to read records from specific dates, ascending and drawn in such a order on the map with a 3-second time interval
Welcome to SO!
Look for setTimeout.
Or it can be easier for you to begin with setInterval.
EDIT This question has been answered but I've clarified it for future readers.
RouteBoxer provides a solution of 'boxing in' a route in Google maps so that I can list various points of interest along that route. This technic though creates borders around each box presented on the map. I've attached an image to describe what it looks like.
The code produced to create RouteBoxer looks like this:
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
var directionService = new google.maps.DirectionsService();
var rboxer = new RouteBoxer();
var distance = 20; // km
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Box the overview path of the first route
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
for (var i = 0; i < boxes.length; i++) {
var bounds = box[i];
// Perform search over this bounds
}
}
});
Is it possible to remove the borders surrounding each box on the map?
You have full control. Here is the example above in a fiddle, without black borders -> http://jsfiddle.net/ftgr8dyp/ Look at the function drawBoxes() :
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000', //<-- change color
strokeWeight: 0, //<-- change strokeWeight from 1 to 0
map: map
});
}
}
It is standard google.maps.Rectangle's you can style as you are used to. There is nothing in the RouterBoxer-code that forces certain design or styles.
I try to do this 3 months - I need to create a polygon by route direction like here:
so so I write this:
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
var r = [];
var z = 0.5;
var bla = result.routes[0].overview_path;
for(var i=0 in result.routes[0].overview_path) {
r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
}
bla.reverse();
for(var x=0 in bla) {
r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
}
var prva = new google.maps.Polyline({
path: result.routes[0].overview_path,
strokeColor: "#00000",
strokeOpacity: 1.0,
strokeWeight: 2
});
prva.setMap(map);
druga = new google.maps.Polygon({
paths: r,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
druga.setMap(map);
} else {
alert("Directions query failed: " + status);
}
});
but in some cases is good in some cases not, so my code produce this:
BAD case:
GOOD case:
So how I can solve this problem to get nice polygon by route direction ??? Does someody have idea?
How I can implement this into my code:
CONVOLUTION ALGORITHM
Is there any solution for my problem?
Is there some other way than this to create what I need?
The algorithm to produce the second image is quite simple geometrically. I'll write you some pseudocode, assuming you have an array of x,y arrays:
coordinates = [[x1,y1],[x2,y2] ... [xn,yn]]
leftcoords = []
rightcoords = []
projectionwidth = 1 # How wide the path is
for each coordinate in coordinates:
pathvector = coordinate(index + 1) - coordinate(index - 1)
normpathvector = pathvector/(length(pathvector))
perpvector = projectionwidth*[-normpathvector[1],normpathvector[0]]
leftcoords.append(coordinate + perpvector)
rightcoords.append(coordinate - perpvector)
You have to take care at the end of the path to only choose coordinates ahead or behind, but you get the idea. You end up with three sets of coordinate trajectories. You can set it up to average several points if you'd like to smooth the path.
Ok, so here is code that works, but you'll have to do some work to smooth it out to account for the jitter in the path. My suggestion would be to average several previous points, or just grab a point several back.
http://jsbin.com/uTATePe/2/
Does anyone have any examples or source for letting users draw curved maps from point a to point b?
Thanks,
Alex
You can draw Bezier curves this way:
var GmapsCubicBezier = function(lat1, long1, lat2, long2, lat3, long3, lat4, long4, resolution, map){
var points = [];
for(it = 0; it <= 1; it += resolution) {
points.push(this.getBezier({x:lat1, y:long1},{x:lat2, y:long2},{x:lat3, y:long3},{x:lat4, y:long4}, it));
}
for(var i = 0; i < points.length - 1; i++) {
var Line = new google.maps.Polyline({
path: [new google.maps.LatLng(points[i].x, points[i].y), new google.maps.LatLng(points[i+1].x, points[i+1].y)],
geodesic: true,
strokeOpacity: 0,
strokeColor: 'yellow',
icons: [{
icon: {
path: 'M 0,-2 0,2',
strokeColor: 'violet',
strokeOpacity: 1,
strokeWeight: 4
},
repeat: '36px'
},{
icon: {
path: 'M -1,-2 -1,2',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 2
},
repeat: '36px'
}]
});
Line.setMap(map);
}
};
GmapsCubicBezier.prototype = {
B1 : function (t) { return t*t*t; },
B2 : function (t) { return 3*t*t*(1-t); },
B3 : function (t) { return 3*t*(1-t)*(1-t); },
B4 : function (t) { return (1-t)*(1-t)*(1-t); },
getBezier : function (C1,C2,C3,C4, percent) {
var pos = {};
pos.x = C1.x*this.B1(percent) + C2.x*this.B2(percent) + C3.x*this.B3(percent) + C4.x*this.B4(percent);
pos.y = C1.y*this.B1(percent) + C2.y*this.B2(percent) + C3.y*this.B3(percent) + C4.y*this.B4(percent);
return pos;
}
};
You can modify the code, to provide differents strategies to draw the lines. The one implemented is pointed with "shadow".
The usage is pretty easy:
var curvedLine = new GmapsCubicBezier(initLat, initLong, control1Lat, control1Long, control2Lat, control2Long, endLat, endLong, 0.1, map);
you might have to use some sort of layer on top of google map. I know there's a cloud app that allows you to scrabble on a google map, but it uses flash to embed the google map scribblemaps.com/… i don't think it's possible to use two points to create a curve perhaps more than two points.
If i understand your application correctly, based on your website, the goal that you wish to achieve is to let users to "blaze a trail"? If that is the case maybe you can create a form where the users can submit Lat Lng coordinates of the "trials" that they've "blazed," and then use Polyline to draw the curve line similar to this google map draw curved line.
However, if users just want to know how to hike from point a to point b and etc, then you can use DirectionService and DirectionRenderer, and set the DirectionsTravelMode to google.maps.DirectionsTravelMode.WALKING and render the direction on the map that way so the user would know how to hike a route with directions drawn on the map + actual direction instructions.