I know I am overlooking/not considering something elementary, but I don't know what I don't know...
Trying to use Fusion Tables to populate an array of Google Maps API circle objects and place them on a map.
Currently I am able to hard-code the array like so:
citymap['Dane'] = {
center: new google.maps.LatLng(43.10599621690524, -89.38682556152344),
population: 5000000
};
...and place them on a map.
And I am able to return JSON from the Fusion Tables, loop through and create what I think is an array and display it, but I can't make the circle objects appear.
Any advice on what I need to google/learn would be appreciated.
Here's an example using the new Trusted Tester API to generate Polygons to display on the map:
https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles
The logic should be similar, but instead of a Polygon, you would create a Circle:
new google.maps.Circle({
center: new google.maps.LatLng(<lat>, <lng>),
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
radius: <radius>
});
You want to check out the Circle class; it provides a simple way to create circular shapes and place them on the map. Ok, so I see you've already found the shape class, so you are good there.
I think your problem is that you are turning everything into strings in your processing loop:
citymap = {};
for (var i = 0; i < data.table.rows.length; i++) {
citymap += 'citymap[\'' + data.table.rows[i][0] + '\'] = {' +
'center: new google.maps.LatLng(' + data.table.rows[i][1] + '),' +
'population: 2842518};';
}
I think you want code that looks more like this:
citymap = new Array();
for ( var i = 0; i < data.table.rows.length; i++ ) {
var circleData = {
center: new google.maps.LatLng( data.table.rows[i][1] );
position: 2842518
}
citymap.push( circleData );
}
I realize I have left some other bit of data out, but you get the idea. I believe your primary problem was that you were stringifying the code.
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'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.
I've set up some polygons, drew them on the map just fine. I also managed to fire console.log when they were clicked. However, how would I go on about figuring out which polygon was actually clicked?
As you can see in my sample code here I store each object within the collection "lots", however - clicking them only gives me the lat-long of the click. I figured I might need to loop through my polygons and check if the point was clicked is intersecting them and thus figure out which polygon it is... is there an easier solution?
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
google.maps.event.addListener(lot, 'click', function(event) {
console.log(event);
});
lots.push(lot);
Why don't assign to each polygon some id property when you create them and later just use this.myID? Truly speaking, you can hang all information you need on that polygon object.
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
lot.objInfo = obj;
google.maps.event.addListener(lot, 'click', function(event) {
console.log(this.objInfo);
});
lots.push(lot);
It would be more effective than path comparison in a loop, or am i missing something? :)
If I can step in a little late with a different solution, I was having the same problem and discovered that you can define custom properties on a polygon.
My example (which creates a state on a map of the U.S.)
poly = new google.maps.Polygon({
map_state_id: map_state_id,
paths: pts,
fillColor: colour,
fillOpacity: 0.66,
strokeWeight: 1,
clickable:true
});
In this case "map_state_id" is the custom property. I have defined it to be the ID of the state (1 for Alabama, 2 for Alaska, etc.)
Then when the particular state is clicked later, this "map_state_id" can be passed into the event function.
google.maps.event.addListener(poly, 'click', function()
{
var map_state_id = this.map_state_id; //retrieve correct state_id
$.ajax(
{
type: "POST",
url: "http://www...get_state_info.php",
data: {state_id : map_state_id},
dataType: "html",
success: function(data)
{
$("#state_info").html(data); //display some info
}
});
});
I found this particular concept at http://dominoc925.blogspot.com/2011/12/add-your-own-property-field-to-google.html
Turned out getPath() works like a charm. I did not realize I actually got the polygon reference passed on the click event, to match this with my stored "lots" I simply loop through my stored lots and compare this.getPath to other.getPath, if they match I know which lot was clicked and can now show info related to this particular object.
Here's a code sample:
(where parking is an array of my parking area objects which themselves have arrays containing parking lot objects)
google.maps.event.addListener(lot, 'click', function(event) {
var myPath = this.getPath();
for(var i = 0; i < parking.length; i++){
for(var j = 0; j < parking[i].lots.length; j++){
var lot = parking[i].lots[j];
var otherPath = lot.poly.getPath();
if(otherPath == myPath){
console.log(lot);
break;
}
}
}
});
I am in the midst of converting old googlemap v2 code to v3. Now i stumble upon a problem how to create custom markers for a polyline? I managed to create custom markers just for points on a map. But when i use the "new" google.maps.Polyline to create a route/path i don't now how i can set custom markers.
I don't have a reference to the individul markers
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
i tried flightPlanCoordinates.setIcon("img/icon.jpg");
In my case i like to use 3 different icons (start, doing, finished).
back in v2 i had a switch function
function returnGIcon(type) {
var icon = new GIcon();
switch(type) {
And i used
for(i=1;i<points.length-1;i++) {
marker = new GMarker(points[i],{icon:returnGIcon('doing')});
map.addOverlay(marker);
}
How can i fix this?
A polyline shows a line between the points and does not add markers. If you still want to show a marker on each (specified) point on the polyline you need to add a GMarker on those points. So basically you create both the line and the GMarkers like you did before.