Google Maps Drawing Iterate all shapes on overlay - google-maps

I have been toying around with Google Maps Drawing tools v3. If a user creates a new polygon, I used this example to be able to track the location of the polygons:
getpaths() polygons google maps api
Code:
var polygons = [];
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function (polygon) {
polygons.push(polygon);
console.log("polygon complete");
});
google.maps.event.addDomListener(savebutton, 'click', function () {
document.getElementById("savedatapolygon").value = "";
console.log(polygons.length);
for (var i = 0; i < polygons.length; i++) {
var polygonBounds = polygons[i].getPath();
// Iterate over the polygonBounds vertices.
var PolyNum = i
console.log(PolyNum);
polygonBounds.forEach(function (xy, i) {
console.log('Coordinate: ' + PolyNum + ':' + i + '<br>' + xy.lat() + ',' + xy.lng());
});
}
});
This is fine for when a user creates a Polygon, but what if they delete the Polygon? The data is still stored in the array. I can't seem to find a method to either track which array was deleted or have it iterate through all shapes at the end when the user clicks save. Looking through the console, I can see that there might be a unique id assigned to each shape called __gm_id:, but i'm not sure if this would be the best way to track it.
The other strange thing is that when you edit a shape, those changes are somehow getting updated to the polygon array even though there is nothing in the code stating that it should.

Google examples show the way to delete an object is to use:
selectedShape.setMap(null);
I found it easier to track the the polygon end result by making the visibility false instead of deleting:
selectedShape.setOptions({ visible: false });
That way, when reading the array you can check if it is invisible:
polygons[i].getVisible()
That in the codebehind you can deal with the data however you want when saving the coordinates. You will get everything that was made, but can choose to only save the shapes that are visible.

Related

Wrong code in tutorial for event listeners

I am following this tutorial to build a store locator page with a Mapbox map.
I don't want to add custom markers because I already have custom map labels (symbols?), which means I don't need the optional last section of the tutorial and stop right after Add Event Listeners.
Once this is completed, the page should react to clicks in the side panel list, as well as on the map (2 event listeners). However, in the demo provided in the tutorial for that particular step, you can tell the code for the second event listener, the one making the map clickable, is not functioning, which makes me believe there is a mistake in the provided code:
// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
// Query all the rendered points in the view
var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
if (features.length) {
var clickedPoint = features[0];
// 1. Fly to the point
flyToStore(clickedPoint);
// 2. Close all other popups and display popup for clicked store
createPopUp(clickedPoint);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
// Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
var selectedFeature = clickedPoint.properties.address;
for (var i = 0; i < stores.features.length; i++) {
if (stores.features[i].properties.address === selectedFeature) {
selectedFeatureIndex = i;
}
}
// Select the correct list item using the found index and add the active class
var listing = document.getElementById('listing-' + selectedFeatureIndex);
listing.classList.add('active');
}
});
Would anyone be able to tell what is wrong with this code?
Turns out the code is incomplete in that the cursor doesn't change to a pointer as you hover over a map label/marker so it doesn't clue you into realising you can click on it, hence my assumption it wasn't working at all. I assume the general users who would then face the map would be equally deceived unless the pointer shows up. So in the tutorial, if you do go ahead and click the marker, it will have the expected behaviour and display the popup, although no pointer is shown.
Here is how to create the pointer, based on this fiddle: https://jsfiddle.net/Twalsh88/5j70wm8n/25/
map.on('mouseenter', 'locations', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'locations', function() {
map.getCanvas().style.cursor = '';
});

Select multiple entities in a datasource with Cesium

I am trying to write a function where I can select multiple buildings of GeoJSON and/or CZML in Cesium
for example with the ctrl button held down, I will be able to create a list to select several buildings, and also change the color of the selected building as well.
I can change the color of one selected building now, and was told I should use the (entity.push) to add to the a list. but I'm still stuck!
Here is my initial code
*var scene = viewer.scene;
var handler = viewer.screenSpaceEventHandler;
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject) ) {
highlightedEntity= pickedObject.id;
// console.log (pickedObject.id);
} else{
highlightedEntity = undefined;
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);*
can someone help me out in completing it?
Here you can find a sample of the geojson

why setMap(null) is not working google maps api v3?

I am using google maps api 3.9 .In app user can add marker or delete marker.when user click on map an Infowindow will be displayed.in which user can enter name,lat,long and click the save image as follows:
google.maps.event.addListener(map, 'click', function(event) {
point = new google.maps.Marker({
position: event.latLng
, map: map
, icon: 'resource/image/mapIcons/point.png'
, id: id
, type:"point"
});
type = point.type;
newPoint = true;
existingPoint = false;
markerObj = this;
inputInfowindow.setContent("<table style='width:92%;' id='inputTable'>" +
"<tr> <td>point</td> </tr>" +
"<tr> <td><input class='infoInput' type='text' id='name' placeholder='name'/> </td> </tr>" +
"<tr> <td><input class='infoInput'type='text' id='lat' placeholder='latitude'/></td> </tr>" +
"<tr> <td><input class='infoInput'type='text' id='lon' placeholder='longitude'/></td> </tr>" +
"<tr><td><input type='image' src='resource/image/mapIcons/save.png' onclick='save()' class='saveImage' alt='save'/> </td></tr>");
event1 = event.latLng;
currentMarker = point;
inputInfowindow.open(map,point);
});
marker saved in DB.
when user cliclks on delete button follwing method ll be called:
function deleteMarker(id,rev) {
var marker = markerObj;
markerObj = undefined;
var x = confirm("are you sure to delete marker?");
if(x){
deleteLocations(id,rev);//removes marker details from DB
if(marker){
console.log(marker);
marker.setMap(null);
}
}
}
but at marker.setMap(null); marker is removed from map still its on map.I checked with console.log(marker); marker object coming properly,no errors on console.i went through lot of googling but no result.Please help about this.
From the documentation-
To remove an overlay from a map, call the overlay's setMap() method,
passing null. Note that calling this method does not delete the
overlay; it simply removes the overlay from the map. If instead you
wish to delete the overlay, you should remove it from the map, and
then set the overlay itself to null.
so after the marker.setMap(null) you should also write marker=null
Update1-
function deleteMarker(id,rev) {
var x = confirm("are you sure to delete marker?");
if(x)
{
deleteLocations(id,rev);//removes marker details from DB
if(markerObj)
{
console.log(markerObj);
markerObj.setMap(null);
markerObj=null;
}
}
}
Update 2-
Here is a simple demo that works. See the code and check where your code is wrong. Probably some variable scope issue exists in your code.
WORKING DEMO
marker.setMap(null) does not delete the object, it only hides it. To delete it do marker = null;
I had same problem. You should call these methods before markers[index].setMapp(null) :
map.setCenter(desMarker[index].getPosition());
desMarker[index].setPosition(null);
after these call:
markers[index].setMapp(null)
In the map click event you assign this to the markerObj. Though this refers to the map object and not the marker object.
Change it to
markerObj = point;
and it should work as expected.
I had a similar error, I'm not sure if my solution applies to your case, nevertheless.. I set up my code so that when my page loaded the map would be filled up with any markers from coordinates denoted in my database. Then I allowed the user to add more points to the database and then added a marker to the user's selected location on the map.
What I didn't realize is that any time a coordinate was changed or created in my database my code was re-adding markers to all the coordinates on my map. So anytime I created a point I was both manually adding a marker to the coordinates and my database was adding a marker to the coordinates. So when I thought my code was broken what was really happening is I was deleting one of two points in the same location.
So I don't know exactly how you're pulling in coordinates and markers from you database but it's worth looking into.
For future people, using "marker.setVisible(false);" works for me
marker.setVisible(false);//this line works
marker.setMap(null);
marker.setPosition(null);
marker = null;

Calling map.fitBounds() Multiple Times in Google Maps API v3.0

I've just begun using the Google Maps API (v3.0) and have had a good deal of success so far. I am loading a set of objects with Latitude & Longitude values from a database, passing them into my script, and looping over them in the script in order to add them to the map.
I am using the "bounds.extend() / map.fitBounds()" method of setting the map's zoom & bounds (see code below), which works as expected the first time around; however, if I clear out the existing markers, fetch another set of objects, and do the same thing on the same map instance, it sets the bounds incorrectly, usually resulting in a minimum zoom (an astronaut's view).
My suspicion is that my map object has some memory of the previous set of bounds that I've given it and that I need to find a way to clear these bounds before assigning my new ones, but I really can't be too sure.
Any help is greatly appreciated!
var locationList = [];
for (var i = 0; i < mapPoints.length; i++) { // mapPoints is a collection of DTOs
var mapPoint = mapPoints[i];
var location = new google.maps.LatLng(mapPoint.Latitude, mapPoint.Longitude);
locationList.push(location);
var marker = new google.maps.Marker({
map: map,
icon: '/Content/images/map/' + mapPoint.Status.Icon,
shadow: '/Content/images/map/shadow.png',
position: location
});
markers.push(marker); // markers is an Array that is managed outside this loop
}
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < locationList.length; j++)
bounds.extend(locationList[j]);
map.fitBounds(bounds);
This isn't the answer, so to speak, but a (slightly hacky) workaround that I discovered on a thread in the Google Maps Javascript API v3 group:
//map.fitBounds(bounds);
setTimeout( function() { map.fitBounds( bounds ); }, 1 );
if the above answer doesn't work for you (it didn't for me), the problem might lie in bootstrap (assuming you're using it). bootstrap modals specifically generate all sorts of wonky behaviour when i embed a map object in it.. curiously correcting itself if/when i drop an 'alert' in there.. in any case, i solved all my problems by just building my own modal (ie, not using bootstraps modals).

Snap to nearest marker

i am using GoogleMaps and i have 2 or more markers and they are draggable.
I want to snap 2 markers if they are near and merge them into 1.
is this possible ?
Can someone give me pointers .. how i can realize that ?
You need to handle the drag event on the GMarker object. The trick is what do you do when you detect that you are near enough to another marker to snap them together. I played around a little with this and thought maybe hiding the currently dragged marker might be a good way to go.
GEvent.addListener(marker, "drag", function(point) {
// iterate over your points and for each otherPoint...
if (near (point, otherPoint))
{
// hide this marker
marker.hide ();
// move nearby marker to indicate merge?
// then delete the dragged marker on the dragend (if it was merged)
}
}
Not an entirely elegant solution, but it might suit your purposes.
Edit: I wondered if you were looking for the code to check nearby points, so I updated my example to do that:
function near (point1, point2)
{
sw = new GLatLng(point2.lat() - 0.005, point2.lng() - 0.005);
ne = new GLatLng(point2.lat() + 0.005, point2.lng() + 0.005);
var bounds = new GLatLngBounds(sw, ne);
if (bounds.contains (point1))
return true;
return false;
}