i'm trying to use google maps with markers. i do not have any problems with the placement of markers in the map, but how can i get the markers to split like google earth when i have to markers in the same place? like this : Example
Thanks !
I didn't understand what you're trying to accomplish, but ...
Did you already check a marker clustering algorithm like this one or the google semi-official ?
//Here is my attempt... a Archimedes spiraling out of the markers:
// calc a spiraling out position based on marker count at that location
// this function is very tweeky
function spiral_coords(lat_long, i) {
i = (i == 1)? 0: i+1;
var r = i * 0.002;
// .8 is a fudge number to adjust to real appearance on the map
return [lat_long[0] + (r * .8 * Math.sin(.5 * (i + 2))), lat_long[1] + (r * Math.cos(.5 * (i + 2)))];
}
// this is from a fusion table query... but your source could be anything
// I take the coords and check against a hash count of them and calc out the spiral position
function data_handler(d) {
var map = $("#map")[0];
map.markers = [];
var rows = d.rows;
var fields = d.columns;
var index = {};
for (var i in fields) {
index[fields[i]] = i;
}
var location_count = {};
for (var i in rows) {
var row = rows[i];
var location = row[index["Location"]];
var lat_long = location.split(" ");
lat_long[0] = parseFloat(lat_long[0]);
lat_long[1] = parseFloat(lat_long[1]);
// here are the active ingredients
if(!(location in location_count)) {
location_count[location] = 0;
}
location_count[location]++;
lat_long = spiral_coords(lat_long, location_count[location]);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat_long[0], lat_long[1]),
map: map.map
});
}
}
Related
I would like to accomplish a feature that I can do in Three.js but cannot in Autodesk Forge viewer. Here is the link to test: http://app.netonapp.com/JavaScript/Three.js/select_inner_objects.html
The requirement is to select objects inside an object. This job can be done with THREE.Raycaster in the above demo, to use a raycaster to detect all elements which are on the line the ray going through. Then I can get objects behind or inner another object.
I tried this concept in Autodesk Forge viewer but having no success. Here is the code:
// Change this to:
// true to use original Three.js
// false to use Autodesk Forge Viewer API
var useThreeJS = true;
var container = $('div.canvas-wrap')[0];
container.addEventListener('mousedown', function (event) {
if (useThreeJS) {
var canvas = _viewer.impl.canvas;
var containerWidth = canvas.clientWidth;
var containerHeight = canvas.clientHeight;
var camera = _viewer.getCamera();
var mouse = mouse || new THREE.Vector3();
var raycaster = raycaster || new THREE.Raycaster();
mouse.x = 2 * (event.clientX / containerWidth) - 1;
mouse.y = 1 - 2 * (event.clientY / containerHeight);
mouse.unproject(camera);
raycaster.set(camera.position, mouse.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length == 1) {
var obj = intersects[0].object;
obj.material.color.setRGB(1.0 - i / intersects.length, 0, 0);
} else if (intersects.length > 1) {
// Exclude the first which is the outer object (i == 0)
for (var i = 1; i < intersects.length; i++) {
var obj = intersects[i].object;
obj.material.color.setRGB(1.0 - i / intersects.length, 0, 0);
}
}
} else {
var vp = _viewer.impl.clientToViewport(event.canvasX, event.canvasY);
var renderer = _viewer.impl.renderer();
var dbId = renderer.idAtPixel(vp.x, vp.y);
if (dbId) {
console.debug("Selected Id: " + dbId);
_viewer.select(dbId);
_viewer.impl.invalidate(true);
}
}
}, false);
I found the Forge viewer has viewer.impl.renderer().idAtPixel method which is great to get an element at the picking pixel. However, I want it to do more, to select all elements (which are under or nested) at the picking pixel. How I can do it with the Forge Viewer API?
Based on the suggestion of Zhong Wu in another post, here is the final solution to select element which is under or inside another element. I created an Autodesk Forge viewer extension to use it easily.
///////////////////////////////////////////////////////////////////////////////
// InnerSelection viewer extension
// by Khoa Ho, December 2016
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
Autodesk.ADN.Viewing.Extension.InnerSelection = function (viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
var _self = this;
var _container = viewer.canvas.parentElement;
var _renderer = viewer.impl.renderer();
var _instanceTree = viewer.model.getData().instanceTree;
var _fragmentList = viewer.model.getFragmentList();
var _eventSelectionChanged = false;
var _viewport;
var _outerDbId;
_self.load = function () {
_container.addEventListener('mousedown',
onMouseDown);
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onItemSelected);
console.log('Autodesk.ADN.Viewing.Extension.InnerSelection loaded');
return true;
};
_self.unload = function () {
_container.removeEventListener('mousedown',
onMouseDown);
viewer.removeEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onItemSelected);
console.log('Autodesk.ADN.Viewing.Extension.InnerSelection unloaded');
return true;
};
function onMouseDown(e) {
var viewport = viewer.impl.clientToViewport(e.canvasX, e.canvasY);
_viewport = viewport; // Keep this viewport to use in onItemSelected()
var dbId = _renderer.idAtPixel(viewport.x, viewport.y);
if (_outerDbId == dbId) {
_outerDbId = -1;
// Deselect everything
viewer.select();
} else {
_outerDbId = dbId;
// Hide outer element temporarily to allow picking its behind element
viewer.hideById(dbId);
_eventSelectionChanged = true;
}
viewer.impl.sceneUpdated(true);
}
function onItemSelected(e) {
if (_eventSelectionChanged) {
// Prevent self looping on selection
_eventSelectionChanged = false;
// Show outer element back
viewer.show(_outerDbId);
// Get inner element Id after the outer element
// was just hidden on mouse down event
var innerDbId = _renderer.idAtPixel(_viewport.x, _viewport.y);
if (innerDbId > -1) {
// Select the inner element when it is found
viewer.select(innerDbId);
console.debug("Selected inner Id: " + innerDbId);
} else if (_outerDbId > -1) {
// Select the outer element if the inner element is not found
viewer.select(_outerDbId);
console.debug("Selected outer Id: " + _outerDbId);
}
}
}
};
Autodesk.ADN.Viewing.Extension.InnerSelection.prototype =
Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.InnerSelection.prototype.constructor =
Autodesk.ADN.Viewing.Extension.InnerSelection;
Autodesk.Viewing.theExtensionManager.registerExtension(
'Autodesk.ADN.Viewing.Extension.InnerSelection',
Autodesk.ADN.Viewing.Extension.InnerSelection);
As of now (Dec/16), when you select using mouse click, the Viewer will not ignore transparent elements, so it will select an element even if it is transparent. Below is a code I used to track what's under the cursor, maybe can be useful.
// use jQuery to bind a mouve move event
$(_viewer.container).bind("mousemove", onMouseMove);
function onMouseMove(e) {
var screenPoint = {
x: event.clientX,
y: event.clientY
};
var n = normalize(screenPoint);
var dbId = /*_viewer.utilities.getHitPoint*/ getHitDbId(n.x, n.y);
//
// use the dbId somehow...
//
}
// This is a built-in method getHitPoint, but the original returns
// the hit point, so this modified version returns the dbId
function getHitDbId(){
y = 1.0 - y;
x = x * 2.0 - 1.0;
y = y * 2.0 - 1.0;
var vpVec = new THREE.Vector3(x, y, 1);
var result = _viewer.impl.hitTestViewport(vpVec, false);
//return result ? result.intersectPoint : null; // original implementation
return result ? result.dbId : null;
}
function normalize(screenPoint) {
var viewport = _viewer.navigation.getScreenViewport();
var n = {
x: (screenPoint.x - viewport.left) / viewport.width,
y: (screenPoint.y - viewport.top) / viewport.height
};
return n;
}
I see method viewer.impl.renderer().idAtPixel works better than viewer.impl.hitTestViewport to select element on mouse pick. The first one can click through the hidden/ghost element to get the objectId of element behind. While the second cannot. Here is the code to test:
var container = $('div.canvas-wrap')[0];
container.addEventListener('mousedown', function (event) {
var clickThroughHiddenElement = true;
if (clickThroughHiddenElement) {
var vp = _viewer.impl.clientToViewport(event.canvasX, event.canvasY);
var renderer = _viewer.impl.renderer();
var dbId = renderer.idAtPixel(vp.x, vp.y);
if (!!dbId) {
_viewer.select(dbId);
}
console.debug("Selected Id: " + dbId);
} else {
var screenPoint = {
x: event.clientX,
y: event.clientY
};
var viewport = _viewer.navigation.getScreenViewport();
var x = (screenPoint.x - viewport.left) / viewport.width;
var y = (screenPoint.y - viewport.top) / viewport.height;
// Normalize point
x = x * 2.0 - 1.0;
y = (1.0 - y) * 2.0 - 1.0;
var vpVec = new THREE.Vector3(x, y, 1);
var result = _viewer.impl.hitTestViewport(vpVec, false);
if (!!result) {
var dbId = result.dbId;
_viewer.select(dbId);
console.debug("Selected Id: " + dbId);
}
}
}
However, they are not what I want, to click through transparent element to get elements behind. If user selects transparent element, it will be selected. If user selects inner elements, it will ignore outer transparent element to select the pick inner element.
I check Forge viewer uses THREE.Raycaster with element bounding box to detect intersection on mouse click. It seems my problem is doable with the Forge viewer like it does in my Three.js demo.
I am using MarkerClusterer. When I have two or more markers on the exact same spot, The API only displays 1 marker - the top one. But somehow I want to show all the markers as each one will be opening distinct popup.
I have searched found few solutions but none are seem to be working
Anybody had similar issue and would pls share a solution??
Finally got it working. This is for all those who still haven't found a solution. Below code adds offset to the markers on same location:
In your createMarker function add this code:
//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;
//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
//if a marker already exists in the same position as this marker
if (latlng.equals(pos)) {
//update the position of the coincident marker by applying a small multipler to its coordinates
var newLat = latlng.lat() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
var newLng = latlng.lng() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
finalLatLng = new google.maps.LatLng(newLat,newLng);
}
}
}
Refer this
Now update your google.maps.Marker object for each marker with new position value – finalLatLng.
var marker = new google.maps.Marker({
map: msf_namespace.mapParams.resultmap,
position: finalLatLng,
title: name,
icon: markericon
});
//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.push(marker);
MarkerClusterer has option to define maxZoom upto which cluster should be visible in map. You can set its value to 18, so it wont show cluster when user zoomed in to its maximum:
const markerCluster = new MarkerClusterer(map, markers,{maxZoom: 18});
FYI - Precision
decimal places decimal degrees N/S or E/W at equator
2 0.01 1.1132 km
3 0.001 111.32 m
4 0.0001 11.132 m
5 0.00001 1.1132 m
Those who are looking out for a solution in ANDROID for the same -
Issue - https://github.com/googlemaps/android-maps-utils/issues/384
Solution - https://github.com/menismu/android-maps-utils/blob/master/demo/src/com/google/maps/android/utils/demo/ClusteringSameLocationActivity.java
Or if you just want to show a list on clicking on the marker, do the below -
clusterManager.setOnClusterClickListener {
if (googleMap?.maxZoomLevel == googleMap?.cameraPosition?.zoom) {
val items = it.items.map { assetItem -> assetItem.title }
MaterialAlertDialogBuilder(requireContext())
.setTitle("Choose an asset")
.setItems(items.toTypedArray()) { dialog, which ->
dialog.dismiss()
onItemClicked(it.items.elementAt(which))
}
.show()
return#setOnClusterClickListener true
}
return#setOnClusterClickListener false
}
I need to convert this function to v3 API. This function is used to create an ellipse under a marker when selected. I have tried with projection and overlay, but without success.
function makePolyPoints(_marker)
{
var polyPoints = Array();
var markerPoint= _marker.getLatLng();
var projection = G_NORMAL_MAP.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = projection.fromLatLngToPixel(markerPoint, mapZoom);
var ellipseRadA = 20;
var ellipseRadB = 10;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var pixelX = clickedPixel.x + ellipseRadA * Math.cos(aRad);
var pixelY = -3 + clickedPixel.y + ellipseRadB * Math.sin(aRad);
var polyPixel = new GPoint(pixelX,pixelY);
var polyPoint = projection.fromPixelToLatLng(polyPixel,mapZoom);
polyPoints.push(polyPoint);
}
return polyPoints;
}
Here the function for v3 that doesn't work, i think a problem of zoom level but I can't find how to replace projection.fromLatLngToPixel(markerPoint, mapZoom);
function makePolyPoints(_marker)
{
var polyPoints = Array();
var markerPoint= _marker.getPosition();
var projection = map.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = projection.fromLatLngToPoint(markerPoint);
var ellipseRadA = 20;
var ellipseRadB = 10;
var polyNumSides = 20;
var polySideLength = 18;
for (var a = 0; a<(polyNumSides+1); a++) {
var aRad = polySideLength*a*(Math.PI/180);
var pixelX = clickedPixel.x + ellipseRadA * Math.cos(aRad);
var pixelY = -3 + clickedPixel.y + ellipseRadB * Math.sin(aRad);
var polyPixel = new google.maps.Point(pixelX,pixelY);
var polyPoint = projection.fromPointToLatLng(polyPixel);
polyPoints.push(polyPoint);
}
return polyPoints;
}
Hmm.. Im going to use one of my favorite gmap examples to help you out.
Using var clickedPixel = projection.fromLatLngToPoint(markerPoint); dont give you yet clickedPixel coordinates, they are still world coordinates. See projection specs.
Specifying own mercator projection when calculating that kind of stuff is useful. Look closely to following lines: (in this code example)
var worldCoordinate = projection.fromLatLngToPoint(chicago);
var pixelCoordinate = new google.maps.Point(
worldCoordinate.x * numTiles,
worldCoordinate.y * numTiles);
(you can view source with firebug or similar).
If you dont have it (in mozilla: Tools -> web developer -> page source)
Hopefully, this will help you get through the problem :)
I’m trying to test whether a Google Maps polyline passes through a Google Maps polygon. Sounds simple. But I’ve searched and searched... and found no real answers.
Closest I got was this function. It works but, frustratingly, returns the occasional false positive.
//nvert = the number of points in the polygon
//vertx = an array of all the polygon's latitudes
//verty = an array of all the polygon's longitudes
//elat = the current point's latitude
//elng = the current point's longitude
function pnpoly( nvert, vertx, verty, elat, elng) {
var i, j, c = false;
for( i = 0, j = nvert-1; i < nvert; j = i++ ) {
if( ( ( verty[i] > elng ) != ( verty[j] > elng ) ) &&
( elat < ( vertx[j] - vertx[i] ) * ( elng - verty[i] ) / ( verty[j] - verty[i] ) + vertx[i] ) ) {
c = !c;
}
}
return c;
}
Before I try a whole new method (a crazy math idea that brings me back to Grade 12 calculus), I’m wondering anyone knows how to accomplish this.
I've come across a working solution.
https://github.com/albertsun/JavaScript-Geometry
This geometry package includes a function called findIntersections().
I ran an $.each loop on each polygon on my map, then pushed each point in the polygon into an array, then each point in the polyline into an array. Finally, I ran two loops and pushed the lat/lon coordinates into variables for the function. It returns empty when it doesn't find anything and returns the coordinates of intersection when it finds something.
function processPath(polyline, polygons){
$.each(polygons, function(i,polygon){
var polygonArr = [] // array for storing each point in polygon
polygon.getPaths().forEach(function(k,g){
$.each(k.b, function(l,m){
polygonArr.push({'lat':m.lat(),'lng':m.lng()});
});
});
//Get the number of points in the polyLINE
var numStops = polyline.getPath().b.length -1;
//Get the path and coordinates of the polyLINE
var polylineArr = [];
polyline.getPath().forEach(function(z,y){
polylineArr.push({'lat':z.lat(),'lng':z.lng()});
});
$.each(polygonArr, function(j, polygon){
$.each(polylineArr, function(k, polyline){
if(k+1 != polylineArr.length){
var lineCoor1x = polylineArr[k].lat;
var lineCoor1y = polylineArr[k].lng;
var lineCoor2x = polylineArr[k+1].lat;
var lineCoor2y = polylineArr[k+1].lng;
var polyCoorx = polygonArr[j].lat;
var polyCoory = polygonArr[j].lng;
if(j+1 == polygonArr.length){
// We've reached the end, go back to the start
var polyCoorNextx = polygonArr[0].lat
var polyCoorNexty = polygonArr[0].lng
} else {
// Go to the next point
var polyCoorNextx = polygonArr[j+1].lat
var polyCoorNexty = polygonArr[j+1].lng
}
if(findIntersections([[[lineCoor1x,lineCoor1y], [lineCoor2x,lineCoor2y]], [[polyCoorx,polyCoory],[polyCoorNextx,polyCoorNexty]] ]).length != 0){
whereInside[i] = i;
return;
}
}
})
})
It's probably a bit messy but it works.
When I create Gmap she needed to establish the center and zoom
Once we've created a map via the GMap2
constructor, we need to initialize it.
This initialization is accomplished
with use of the map's setCenter ()
method. The setCenter () method
requires a GLatLng coordinate and a
zoom level and this method must be
sent before any other operations are
performed on the map, including
setting any other attributes of the
map itself.
Because of this route is not positioned at the center - this is an example http://grab.by/4OD6
I should on the basis of the coordinates to get the center?
And get a zoom which displays all objects map?
My code:
var TrainingGMap = Class.create ((
initialize: function (div_id, points, options) (
this.options = Object.extend ((), options)
this.points = points;
this.map = new GMap2 (document.getElementById (div_id));
this.map.setCenter (new GLatLng (this.points [0]. lan, this.points [0]. lon), 12);
this.map.setUIToDefault ();
this.set_route ();
)
set_route: function () (
var line = new Array ();
for (var i = 0; i <this.points.length; i + +) (
line [i] = new GLatLng (this.points [i]. lat, this.points [i]. lon);
)
var polyline = new GPolyline (line, "# aa0000", 5);
this.map.addOverlay (polyline);
)
));
I resolve my problem
this.map.setCenter(polyline.getBounds().getCenter());
this.map.setZoom(this.map.getBoundsZoomLevel(polyline.getBounds()));
New code
var TrainingGMap = Class.create({
initialize: function(div_id, points, options) {
this.options = Object.extend({}, options)
this.points = points;
this.map = new GMap2(document.getElementById(div_id));
this.map.setCenter(new GLatLng(this.points[0].lan, this.points[0].lon), 12);
this.map.setUIToDefault();
var line = new Array();
for (var i = 0; i < this.points.length; i++) {
line[i] = new GLatLng(this.points[i].lan,this.points[i].lon);
}
var polyline = new GPolyline(line, "#aa0000", 5);
this.map.setCenter(polyline.getBounds().getCenter());
this.map.setZoom(this.map.getBoundsZoomLevel(polyline.getBounds()));
this.map.addOverlay(polyline);
}
});
var TrainingGMap = Class.create({
initialize: function(div_id, points, options) {
this.options = Object.extend({}, options)
this.points = points;
this.map = new GMap2(document.getElementById(div_id));
this.map.setCenter(new GLatLng(this.points[0].lan, this.points[0].lon), 12);
this.map.setUIToDefault();
var line = new Array();
for (var i = 0; i < this.points.length; i++) {
line[i] = new GLatLng(this.points[i].lan,this.points[i].lon);
}
var polyline = new GPolyline(line, "#aa0000", 5);
var tengah=Math.round(polyline.getVertexCount()/2)-1;
this.map.setCenter(polyline.getVertex(tengah));
this.map.setZoom(this.map.getBoundsZoomLevel(polyline.getBounds()));
this.map.addOverlay(polyline);
}
});