I managed to center a marker inside a polygon path by extending the getBounds method:
//polyline
google.maps.Polyline.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPath().forEach(function(e) {
bounds.extend(e);
});
return bounds;
};
All I have to do is this:
var marker = new google.maps.Marker({
map: map,
position: flight_path.getBounds().getCenter()
});
Now I want the marker to be at 10%, 25% or 95% of the path.
How can I achieve that?
You can use the Geometry library to work this out. Add libraries=geometry to the Google Maps JS URL.
Then use the interpolate function to work out what percentage along your polyline you place your marker.
var inBetween = google.maps.geometry.spherical.interpolate(startLatlng, endLatLng, 0.5); // 50%
This is simple on one polyline, but if you have multiple lines forming one path, it might be a bit trickier! You could then maybe use computeLength to calculate the overall path length, do the maths yourself for where 95% is, and then I'm not sure...
Related
I am using here maps to display points on the map and I would like to draw a line between two specific points.
I tried to lineString.pushPoint and combined to Polyline, but I only have a linear result. I would like to be able to link two existing markers to another existing one
You can add a marker at the start and/or endpoint like this:
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
lineString.pushPoint({lat:53.3477, lng:-6.2597});
lineString.pushPoint({lat:51.5008, lng:-0.1224});
lineString.pushPoint({lat:48.8567, lng:2.3508});
lineString.pushPoint({lat:52.5166, lng:13.3833});
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
var startMarker = new H.map.Marker({lat:53.3477, lng:-6.2597});
map.addObject(startMarker);
var endMarker = new H.map.Marker({lat:52.5166, lng:13.3833});
map.addObject(endMarker);
}
I need to select multiple markers in a map. Something like this: Box/Rectangle Draw Selection in Google Maps but with Leaflet and OSM.
I think it could be done by modifying the zoom box that appears when you shift click and drag in an OSM map, but I don't know how to do it.
Edit:
I rewrote the _onMouseUp function, as L. Sanna suggested and ended up with something like this:
_onMouseUp: function (e) {
this._finish();
var map = this._map,
layerPoint = map.mouseEventToLayerPoint(e);
if (this._startLayerPoint.equals(layerPoint)) { return; }
var bounds = new L.LatLngBounds(
map.layerPointToLatLng(this._startLayerPoint),
map.layerPointToLatLng(layerPoint));
var t=0;
var selected = new Array();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
pt = new L.LatLng(a[0], a[1]);
if (bounds.contains(pt) == true) {
selected[t] = a[2];
t++;
}
}
alert(selected.join('\n'))
},
I think it could be easy modificating the zoom box that appears when
you shift clic and drag in an osm map, but I don't know how to do it
Good idea. The zoom Box is actually a functionality of leaflet.
Here is the code.
Just rewrite the _onMouseUp function to fit your needs.
Have you tried something like this?
markers is an array of L.latLng() coordinates
map.on("boxzoomend", function(e) {
for (var i = 0; i < markers.length; i++) {
if (e.boxZoomBounds.contains(markers[i].getLatLng())) {
console.log(markers[i]);
}
}
});
Not enough points to comment, but in order to override the _onMouseUp function like OP posted in their edit, the leaflet tutorial gives a good explanation. Additionally, this post was very helpful and walks you through every step.
A bit late to the party but it's also possible to achieve this using the leaflet-editable plugin.
// start drawing a rectangle
function startSelection() {
const rect = new L.Draw.Rectangle(this.map);
rect.enable();
this.map.on('draw:created', (e) => {
// the rectangle will not be added to the map unless you
// explicitly add it as a layer
// get the bounds of the rect and check if your points
// are contained in it
});
}
Benefits of using this method
Allow selection with any shape (polygon, circle, path, etc.)
Allow selection using a button/programmatically (does not require holding down the shift key, which may be unknown to some users).
Does not change the zoom box functionality
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example
I have two polylines drawn on a google maps api v3 directions service.
My problem is that where they overlap on part of the map, one covers the others. I wish to draw 6 lines in total which are bus routes in my city. All routes come back to the same area of the city but it will be very difficult to distinguish them apart.
Is there a way to slightly offset each line?
function busRoute2(source,destination){
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true,
polylineOptions: { strokeColor: '#000000', strokeOpacity: 0.5 }
});
directionsDisplay.setMap(map);
var request = {
origin:source,
destination:destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
Heres the working code (very basic) polyLine offset map animated Note: The icon 'offset' property is the percent offset of the icon along the line.
You need to manipulate the relative 'path' Coordinates (SVG format) of the icon (in your case a line) itself in order to offset it away from the line
Forget my suggestions. I tried to create a repeat icon (2 pixel dot) repeated every 4 pixels offset from the polyLine. It looks absolutely disgusting and lags the browser.
I am going to have to create a function that edits the coords of the polyline at load time according to angle dLat, dLng and zoom scale.
As you want your markers (stops, buses) and lines to be on one side of the road going one direction and the opposite going back. You also dont want to obscure the road name on the map
If anyone wants to help with this email me at huntington#beachincalifornia.com
I'm trying to let people draw a rectangle on Google Maps and store the bottomLeft and topRight coordinates.
I know I can draw a Rectangle codewise (see: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html#Rectangle), but before i can load the bounds from my DB the people need to define it themself first off course :)
So my question is, how can I let people draw a rectangle on Google Maps (API v3) and store the coordinates of the bottomLeft and topRight corner?
Already got it to work by looking into events. Took a lot of my time to make :)
This is how i've done it for people that need it to:
function mapsInitialize()
{
startPoint = new google.maps.LatLng(lat,lon);
options = { zoom: 16, center: startPoint, mapTypeId: google.maps.MapTypeId.HYBRID};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
google.maps.event.addListener(map, 'click', function(event) {
if (drawing == true){
placeMarker(event.latLng);
if (bottomLeft == null) {
bottomLeft = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
}
else if (topRight == null){
topRight = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
drawing = false;
rectangle = new google.maps.Rectangle();
var bounds = new google.maps.LatLngBounds(bottomLeft, topRight);
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: bounds
};
rectangle.setOptions(rectOptions);
}
}
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
If I understand you properly - You need a way to get users inputting some polyline/polygon. If so - take a look at this example, where polygon is created by clicking a map. It uses some class PolygonCreator and jquery. You can adopt this method, and save result in form field (there possible a number of options: JSON or your own method of serialization)
If you just need to show that polygons on map and nothing more: you even can take advantage of geometry.encoding library and store encoded polylines into database. Or, if you are going to use spatial queries (for instance - detect if some point falls into your polygons) you better use spatial extnsion of some sort: MySQL spatial extensions, PostGIS, etc. In MySQL you can store polyline into Polyline or Polygon typed columns, which is based on OpenGIS formats.
Frankly, here on stackoverflow is a whole bunch of related information.