So here is one of my layers:
TurksAndCaicosLayer = L.geoJson(TurksAndCaicos, {
style: {
weight: 0.5,
color: 'white',
fillOpacity: 1,
fillColor: 'brown',
}})
I have 8 of these polygon layers for my Leaflet map. I am trying to construct a loop which will go through the array of my layers and add them to the map, but it doesn't seem to be working. Can anyone spot why?
let layers = [AnguillaLayer, BermudaLayer, BritishVirginIslandsLayer, GibraltarLayer, GuernseyLayer, IsleOfManLayer, JerseyLayer, TurksAndCaicosLayer]
for (let layer of layers) {
map.addLayer(layer)}
try
layers.forEach(addLayer);
function addLayer(item, index) {
map.addLayer(item);
}
An alternative approach would be to add your layers to a layerGroup and add the layerGroup to the map - saves writing an explicit loop.
let layers = [AnguillaLayer, BermudaLayer, BritishVirginIslandsLayer, GibraltarLayer, GuernseyLayer, IsleOfManLayer, JerseyLayer, TurksAndCaicosLayer];
let myLayerGroup = L.layerGroup(layers).addTo(map);
Related
I'm using zeppelin and angular interpreter.
I have tried three different ways. None of them was successful. But simple markers showed up.
1st one
var array = [];
all_properties.forEach(item =>{
array.push(new L.LatLng(item[0], item[1]));
});
var firstpolyline = new L.polyline(array, {
color: 'red',
weight: 5,
opacity: 1,
smoothFactor: 1
});
firstpolyline.addTo(map);
2nd one
var poly = new L.polyline(all_properties, {
color: 'green',
weight: 5,
opacity: 1,
smoothFactor: 1
});
poly.addTo(map);
3rd one
var polylinePoints = [
[lat, long],
[lat1, long1]
];
var polyline = L.polyline(polylinePoints).addTo(map);
There is no error...
Any ideas? Thx
Edit: When I show points as markers, all of them showed up one the map. This set of markers should me polyline tho...
arr_markers = [];
all_properties.forEach(item =>{
arr_markers.push(L.marker([ item[0], item[1]], {icon: basicIcon}));
});
polyGroup = L.layerGroup(arr_markers).addTo(map);
Weird thing happened. I just logged off and logged in and the polygon showed up. Actually all of them. Maybe something was cached in my browser (Firefox), or in Zeppelin, or interpreter (restarting of angular interpeter did not help tho...)
Just a quick query - I'm sure it has a quick answer :)
I'm trying to loop through an array of points defining a polygon in google maps and change them (my test programme is just decrementing the latitude by a small amount, to see if I can get it to work). I've taken my experimental code from the Bermuda Triangle example, but with a LatLong array rather than MVC.
triangleCoords = [
new google.maps.LatLng(25.774, -80.190 ),
new google.maps.LatLng(18.466, -66.118 ),
new google.maps.LatLng(32.321, -64.757 )
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
And I'm trying to alter the points with this:
var vertices = bermudaTriangle.getPath();
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
vertices.setAt(i, new google.maps.LatLng( xy.lat()-0.01, xy.lng() ));
}
But it doesn't work. Can anyone see what is wrong? Thanks
You've got an array of coordinates, saved as the variable vertices, which you've then updated with new values... and then what? All you've done is update an array.
If you want to redraw the polygon, you also need to then do:
bermudaTriangle.setPath(vertices);
I'm currently really confused, and I do need an advice.
My current aim is to get a Satellite view of a random building, with the tipical RoadMap\3d effect of Google maps:
and being able to use three.js on it, rendering polys overlapping that map.
I've followed example from this git repo:
ubilabs/google-maps-api-threejs-layer
But I can include particles on a map...I can't put on it geometries like polygons, splines and such.
I don't know what to do know...maybe Cesium is the answer?
But Cesium doesn't have the same "3d" option on buildings...
Any help would be appreciated!
Thanks!
For polygon, line and marker you can use google maps v3
You can see this link google developer link for a firts evaluation
i'm talking about native polygon , polyline, marker . or native drwing tools of google maps v3
https://developers.google.com/maps/documentation/javascript/examples/drawing-tools and https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
but more useful is this link Dyer
http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/
where with proper function you can build your 3d object
function drawExcrudedShape(map, coordinates, height, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity) {
var pairs = [],
polygons = [];
// build line pairs for each wall
for (var i=0; i<coordinates.length; i++) {
var point = coordinates[i],
otherIndex = (i == coordinates.length-1) ? 0 : i+1,
otherPoint = coordinates[otherIndex];
pairs.push([point, otherPoint]);
}
// draw excrusions
for (var i=0; i<pairs.length; i++) {
var first = pairs[i][0],
second = pairs[i][1],
wallCoordinates = [
new google.maps.LatLng(first[0],first[1]),
new google.maps.LatLng(first[0]+height,first[1]),
new google.maps.LatLng(second[0]+height,second[1]),
new google.maps.LatLng(second[0],second[1])
],
polygon = new google.maps.Polygon({
paths: wallCoordinates,
strokeColor: strokeColor,
strokeOpacity: strokeOpacity,
strokeWeight: strokeWeight,
fillColor: fillColor,
fillOpacity: fillOpacity
zIndex: zIndexBase+i
});
polygon.setMap(map);
polygons.push(polygon);
}
return polygons;
}
I know this is a common question, and I'm a JS newbie, but I'm completely stumped even after searching StackOverflow for hours.
I'm using the Google Maps API, and want to keep track of my markers by association with an ID. So I have var pinArray = new Object() as a global variable, and add markers like this:
function CreateMarkers (data){
data.forEach(function(store) {
<!-- CREATE MAP MARKER -->
var mapLat = store.latitude;
var mapLong = store.longitude;
var mapLatLng = { lat: parseFloat(mapLat), lng: parseFloat(mapLong) };
var marker = new google.maps.Marker({
position: mapLatLng,
title: store.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: 'Green',
fillOpacity: 0.8,
strokeWeight: 0.6,
},
zIndex: 0
});
cluster.addMarker(marker);
var key = store.Id;
pinArray['${key}'] = marker;
})
}
Where cluster is var cluster = new MarkerClusterer(map);.
When I try to do console.log(pinArray); back outside of the function, I get an empty object: Object {}. I've tried not using string interpolation as well, like pinArray[store.Id] = marker;, but get the same problem.
I need to keep this global associate between pins and IDs because I need to reference and update markers by their ID in other functions. Or at least, I think I do, I'm open to other ways of doing this. Help is very much appreciated; thank you in advance.
Typically when I've done something like this in the past I'll use a standard javascript array instead of an ID'd object:
var pinArray = [];
Then use push to add the markers to it as you go:
pinArray.push(Marker);
When you create the pin you can include your key in its property definition:
var marker = new google.maps.Marker({
position: mapLatLng,
title: store.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: 'Green',
fillOpacity: 0.8,
strokeWeight: 0.6,
},
zIndex: 0,
key: store.Id
});
and you can write a simple looping lookup function to find the individual map marker if you need to pull them by ID. Something like:
function GetMarkerByKey(key) {
var i = 0;
while (pinArray[i].key != key) {i++}
return pinArray[i];
}
Also, if you're using it in a dynamic event handler for click or hover you can use the this property to identify which marker they are activating it with.
~~~Edited to fix a syntax error~~~
var pinArray assigns the variable within the scope of function it's defined. The safest way to ensure you're defining a variable as global, regardless of where you are inside a function, is to assign it to window.
window.pinArray = new Object();
I want to create a hole in my Javascript Google API V3, so i follow Beginning Google Map API V3. But the code is rendering the whole area. Here is my Javascript code.
(function() {
window.onload = function() {
// Creating a map
var options = {
zoom: 6,
center: new google.maps.LatLng(36.5, -79.8),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array with the points for the outer polygon
var polyOuter = [
new google.maps.LatLng(37.303, -81.256),
new google.maps.LatLng(37.303, -78.333),
new google.maps.LatLng(35.392, -78.333),
new google.maps.LatLng(35.392, -81.256)
];
// Creating an array with the points for the inner polygon
var polyInner = [
new google.maps.LatLng(36.705, -80.459),
new google.maps.LatLng(36.705, -79),
new google.maps.LatLng(35.9, -79),
new google.maps.LatLng(35.9, -80.459)
];
var points = [polyOuter, polyInner];
// Creating the polygon
var polygon = new google.maps.Polygon
({
paths: points,
map: map,
strokeColor: '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
};
})();
One of the paths has to be reverted so polygons are drawn in different directions, for example:
var polyInner = [
new google.maps.LatLng(35.9, -80.459),
new google.maps.LatLng(35.9, -79),
new google.maps.LatLng(36.705, -79),
new google.maps.LatLng(36.705, -80.459)
];
My assumption is that the reason is how SVG or canvas render closed loops. If I am not wrong explanation lies in nonzero winding rule. See explanation at wikipedia.
Outer path is drawn clockwise, inner path is drawn counter-clockwise.
Set a counter to zero. Pick a point in object area and draw a line in direction out of object space. If the line cross clockwise path, add one. If the line cross counter-clockwise path segment, subtract one. If the final result for selected point is non-zero, the browser fills the area. If the final result is zero, the browser does not fill it.
So, if you pick up point in the 'hole', the result will be zero and area will not be filled.