I was looking for a solution but all are how to draw polylines from the json file etc. Main question is how to get the functionality to create a new polyline and store old in array each time when click on button "New Polyline"? Second how to leave polylines and draw new on map after click "New Polyline" button and clean and restore only when click right button? May better way is to store Polylines outside the class, or make a new separately class for this? May you have to approach this differently?
Bad demo but highlight what I mean I hope: jsfiddle
Array was moved to global scope but can't setMap on last polyline works only via clearOverlays function. Now complications arise on other buttons. I create additional global object newPoly but don't know whether is good idea may better get object from myPolyline? In other side restore case can't set on map stored in array polylines.
To save the polylines you've made, create another global variable to store the polylines and push them in, and at the same time, setMap(null) on the last polyline in the array. You can't store the polylines you've made in the same object, since you're making a new one each time.
So move:
this.polyLines = [];
out of the class, and into the global scope, or into another class, its fine to leave the marker array in there, since that's local to that polyline instance.
this should also help - https://developers.google.com/maps/documentation/javascript/overlays#OverlaysOverview
Related
Using renderToStaticMarkup to render html to a DomIcon in HereMaps. That's working and quick when there's not that many markers and updates. However, 100 markers frequently updating and re-rendering is causing a slow page open. It's even slowing the map render.
I've looked into best practices around re-using a DomIcon. I've also been looking into clustering -- but not sure how updating would work. Is clustering the only way to go further here? Curious if there's any other best practices for performance
Clustering solves the potential performance issues, however H.map.Group is used to associate the markers together and the group.getBounds() method to find the minimal bounding box holding all of the group's contents. The map.viewBounds() can then be updated.
function addMarkersAndSetViewBounds() {
// create map objects
var toronto = new H.map.Marker({lat:43.7, lng:-79.4}),
boston = new H.map.Marker({lat:42.35805, lng:-71.0636}),
washington = new H.map.Marker({lat:38.8951, lng:-77.0366}),
group = new H.map.Group();
// add markers to the group
group.addObjects([toronto, boston, washington]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.getViewModel().setLookAtData({
bounds: group.getBoundingBox()
});
}
forEachDataPoint (callback)
This method invokes the specified callback for each data point in the given cluster which can work for updating the data points.
A clustering algorithm groups data points by collapsing two or more
points positioned close to one another on the screen into a single
cluster point. All other (not collapsed) points are still visible on
map as noise points.
If this actually suits the use case, go for clustering. It helps to uplift the performance issue. for more details refer :
developer.here.com/documentation/maps/topics/clustering.html
I would like to show some specific data when user mouseover the polyline in google map. I get LatLng object in in mouseover event. I would like to save custom field (index to another array with data to show) to the LatLng object, so I don't need to scan another collection.
I am not expert on Javascript. Can I add a custom property to LatLng or can I inherit/extend myLatLng object? What is the best approach?
google.maps.event.addListener(polyline, 'mouseover', function (event) {
var indexOfPointInPolyline = SomeFunc(event);//I don't know how to do this properly
});
Basically a LatLng is an object, you can assign any property you want to via:
obj.myProperty='myValue'
for the given code it would be like:
event.latLng.someProperty='someValue';
But: this will not work because:
the mouseover-event will always pass a new LatLng-instance
it's also useless to implement other solutions based on the coordinates. When you log the returned values you'll see that they are always different(the accuracy will be up to centimeters or even millimeters ), it's nearly impossible for a user to touch a polyline repeatedly at the exact same point.
I am creating a polygon with multiple event handlers -- I can click-drag to draw freehand, hold shift and click to snap to roads, and do a normal click as well. Originally, I had one array that I pushed each of these points to. However, since the event handlers are unique, debugging an array that I pass everywhere and modify everywhere seems like bad form.
I've made it so that the polygon paths is an array of arrays of points. When I shift-click, it makes an array of points, when I click-drag, it makes an array of points, and then I push these to the array of arrays.
However, how do I connect these together? I am currently not able to connect the endpoints of one array to the start of the next. Because I'm trying to modularize my code, I don't want to have to pass the last point of an array to the event listener that makes the next array, because that defeats the purpose of having separate arrays.
The documentation is pretty thin on multiple paths for a polygon.
Here's what I have so far.
http://jsfiddle.net/skitterm/fn4g5/1/
Pseudocode:
array C = new Array();
addEventListener for click {
populate array A
C.push(A);
}
addEventListener for shift-click {
populate array B
C.push(B);
}
addEventListener for right-click {
create polygon {
paths: C
}
}
I can create a polygon by just shift-clicking, or by clicking, or clicking and dragging, but I can't make a polygon where one side is done by shift-clicking and the rest by normal clicks.
Any ideas?
I want to push a custom var to dynamically loaded Google Maps markers (with live user positions) {via javascript}. In this case, I want to push a UNIX timestamp into the marker, so that way I can keep track of marker timing. After a set interval, JS scans for markers timestamps that reach an expired time period -> then remove them.
I wanted to see if any one else played with this similar idea.
The good thing about the Google Maps API using Javascript is that the objects you create function just as any other object or variable you would usually find in Javascript.
This means that you can easily push a new var into the marker. I have done this myself a couple of times and it works like a charm :)
Simply go :
var marker = new google.maps.Marker();
marker.timestamp = WHATEVER_YOU_WANT;
I currently have a implementation where some markers coming from JSON list is shown, on a particular area, Now I want to filter these marker depending upon some criteria, I have done the filtering part, and got the filtered list. Now to render this markers on the map again, The current implementation loads the js with a key again, also creates the GMap2 object and draws the list of marker on the newly created map, which is really annoying. I want map to be there and only markers to be added and removed from the map.
Any help is appreciated
You can use addOverlay and removeOverlay to add/remove markers from an already displayed map. See the examples here: http://code.google.com/apis/maps/documentation/overlays.html#Markers
var latlng = new GLatLng(lat, lng);
map.addOverlay(new GMarker(latlng));
You can make drawMap() and drawMarkers() as two separate functions. And after map has been created redefine drawMap to empty function like this:
drawMap = function(){}; After that only drawMarkers() will be executed.
Hope this is what you need. If not, provide some code.