Is it possible to draw circles and polylines on Google maps based on pixel dimensions? Allow me to explain...
I have a marker on a map. Next, I want to draw a circle around it, with the marker being the exact center. I'd like the circle to have a fixed pixel-based radius. However, as the Google Maps API takes distance in meters to base the radius on, the size of the circle varies based on the zoom level, which is what I do not want.
Another example is an angled Polyline. I'm drawing such a line from the marker into a certain direction. Again the distance is based on meters, not pixels, thus the zoom shrinks or grows the size of the line. Another unwanted side effect is that due the sperical projection of the map (if I understand this correctly), a line angled at 90 degrees, will not draw it precisely at east.
What I'm looking for is the convenience of these drawing objects on the map, without tying them to map dimensions, just to hard pixels. Is such a thing possible, or does it mean I need to start from scratch with a custom div and some kind of SVG library?
It's easier than you might think, use Symbols.
For a circle there is a predefined path:
new google.maps.Marker({
position: centerLatLngOfTheCircle,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: yourDesiredRadius,
strokeWeight: 1,
},
map: map
});
For a polyline you must assign a custom path:
line = new google.maps.Marker({
position: startLatLngOfTheLine,
icon: {
path: ['M0 0 ',
(Math.cos(Math.PI * angle / 180)),
(Math.sin(Math.PI * angle / 180))].join(' '),
scale: desiredStrokeLength,
strokeWeight: 1
},
map: map
});
(the angle is counted clockwise, starting at 3:00)
Demo: http://jsfiddle.net/doktormolle/y8S8e/
Related
currently i have a little project that needs to make marker static and move map to the marker display on the map - i hope it makes any sense -
how to move map not marker - like i said the marker cannot move but the map needs to move to the marker when location changed - also marker is displayed at the bottom the map to make room for other events above the marker such as a path display and etc -
whats done already is when car moves it watches gps - then tells marker to move to that gps as a current location and then panby to the bottom of the map - this makes marker jerk at the bottom of the map when its location changed - so i figured if i keep marker static by placing it into a div above map and fixate it via css style - so it stays in the same place all the time - but this is wrong as it cannot be moved with map then when someone drags map with a finger - so this cannot be right solution - what is your solution to this dilema unless i am missing something -
To achieve what you want, you need to rotate the map on the correct axis, find the position of the center of the map, and finally center the map at the right place.
1 - Rotate the map
In your case (I presume you want the car always face of the road in front of the user position) you need to rotate the map before centering, otherwise the map is always oriented to the north and it can be anoying when the car move in other orientation (south for exemple). In this case the point of view is oriented in the wrong direction and the user don't see the upcoming road.
You can find an exemple here in the documentation. Basicaly you need to use setHeading() method. The rotation on gmap is not easy than it can be (see this post).
2 - Find the center of the map
To find the updated position of the center of your map, you need to retrieve the latLng location of a point always at the same distance (in pixel of the map container) above your marker fixed location. Use the methods fromLatLngToPoint() and fromPointToLatLng() to retrieve the position from the map to the real world or vice versa (see getProjection() for more details).
Exemple :
Your map is displayed in 1000*1000 px and the bottom position of the marker you choose is at 500px of the left side and 950px of the top side. If you want to move the center of the map without changing the position of the marker, you need to find the latLng position of the point at 450px above your marker.
function findMapCenter(map, markerLatLng) {
// need this to adjust from the actual zoom on the map
let scale = Math.pow(2, map.getZoom());
// position in pixel x.y from the container
let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng);
// calcul of the position of the center
let centerWorldCoordinate = new google.maps.Point(
markerWorldCoordinate.x,
markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker
);
// return latLng of the center point of the map
return map.getProjection().fromPointToLatLng(centerWorldCoordinate);
}
3 - Set the map at the right place
Use setCenter() method to center the map on a choosen latLng location.
let marker; // = config of your marker
let gMap = new google.maps.Map(document.getElementById('map'));
update({lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE});
// call this every time you want to update
function update(markerNewLatLng){
// ... first step : rotate the map if you need to
// then update marker position
marker.setPosition(markerNewLatLng);
// center the map
gMap.setCenter(findMapCenter(gmap, markerNewLatLng));
}
I've searched how to draw the circle in the mapbox using Javascript but couldn't find out the correct solution.
var myCircle = new MapboxCircle({lat: data.lat, lng: data.lng}, data.radius, {
editable: true,
minRadius: data.minRadius,
fillColor: data.color
}).addTo(map);
The above code is provided by Mapbox but it allows just add the circle Layer in fixed radius on the map.
But what I wanted is to draw the circle in dynamic radius by dragging.
You can pass these radii in meters using the latest version of Leaflet. The radius will change relative to zoom levels.
Here's some more information via Leaflet's documentation
L.circle([lat,lng], radius).addTo(map);
More documentation here: https://www.mapbox.com/mapbox.js/api/v2.1.9/l-circlemarker/
So problem is:
I have a geocoordinates of polylines, example:
`var lines = [
{"type":"polyline","latLngs":[{"lat":55.8662574578028,"lng":37.90008544921874},
{"lat":55.94227871136694,"lng":38.32134246826172}],"color":"#a24ac3"},
{"type":"polyline","latLngs":
[{"lat":55.9643834839687,"lng":38.111915588378906},
{"lat":55.857394661151226,"lng":38.14659118652344}],
"color":"#a24ac3"}]`
So i need to build a rectangle around every polyline with width of rectangle what will be with of polilyne, and height will be ~100 meters. Polyline must penetrate at the center inside of this rectangle and not extend beyond the boundaries.
It will be calculated on nodejs. I have no idea how to do that with geo
I have a UI where I give the user the ability to draw an area on the map, and I want him to draw a polygon with EXACTLY 4 points, how do I do that ?
This is done in this example here
The code they use to draw the bow is:
var boxLayer = new OpenLayers.Layer.Vector("Box layer");
map.addLayer(boxLayer);
drawControls = {
box: new OpenLayers.Control.DrawFeature(boxLayer,
OpenLayers.Handler.RegularPolygon, {
handlerOptions: {
sides: 4,
irregular: true
}
}
}
Use a polygon handler:
Handler to draw a polygon on the map. Polygon is displayed on mouse down, moves on mouse move, and is finished on mouse up.
To limit to 4 points use the sides property:
sides {Integer} Number of sides for the regular polygon.
Is it possible to hide markers that are not from a particular country? Eg I have a dropdown menu with England, Wales, Scotland etc.
If the user selects Wales - the map zooms to Wales and shows all the marker within a certain radius, but I would want to have any markers that are near the Welsh border to not appear as they are not within Wales.
Any ideas?
Figure out the polygon that encompasses only Wales (you'll have to do that yourself; I don't think Google will magically give you that). Only draw markers that fall within that polygon.
The hard part is figuring out if a latlng coordinate is within a polygon. Here's a solution someone's worked out, but it's using the Google Maps API v2 syntax, not v3 syntax that I guess you'll be using. Fortunately someone else has already rewritten it for API 3 as well.
To create the polygon, just do something like the following. I'm guessing you don't actually want to show this, just your markers, so have made it invisible by setting both stroke and fill opacities to zero.
polygon = new google.maps.Polygon({
paths: [
new google.maps.LatLng(51.478316,-0.002888),
new google.maps.LatLng(51.479245,-0.001051),
/// ... array of all the coordinates making up the path of your polygon
],
strokeOpacity: 0.0,
fillOpacity: 0.0,
map: map
});