Geofencing with Google Maps - sqlite

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.

Related

Leaflet polyline not moving on drag/zoom

I'm using leaflet with custom CRS.Simple projection. If I draw a polyline at the page Load it is more or less drawn ok (Although much more accurate in firefox than in chrome) but if I drag the map the polyline remains in the same place of the browser window, so then appears shifted respect of the background map.
Example:
Initial load
After drag the map, the map moves but the polyline remains in the same place
To add the polyline I'm converting the coordinates to the CRS.Simple projection. I don't think there is a problem here as every other map marker or text appears correctly
.....
//initialize leaflet map
map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.Simple //simple coordinates system
}).setView([0, 0], mapMaxZoom);
//set the bounds of the map to the current dimension
var mapBounds = new L.LatLngBounds(
map.unproject([0, mapHeight], mapMaxZoom),
map.unproject([mapWidth, 0], mapMaxZoom)
);
//load the tiles
map.fitBounds(mapBounds);
L.tileLayer(mapData.info.tiles+'/{z}/{x}/{y}.png', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: '',
noWrap: true,
continuousWorld: true
}).addTo(map);
.....
var pointList = [getMapCoordinates(1750,1750),
getMapCoordinates(1520,1764),
getMapCoordinates(1300,1560),
getMapCoordinates(1132,1258),
getMapCoordinates(1132,1060),
getMapCoordinates(926,960)];
polyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
polyline.addTo(map);
....
function getMapCoordinates(px,py)
{
//as we use simple system, transform the point (based on pixel) on map coordinates that leaflet understand
return map.unproject([px, py], map.getMaxZoom());
}
Any idea what I'm doing wrong, or is it a bug? Any workaround would be appreciated
Ok, it seems the problem was in stable version (0.7.3) Using dev version (1.0-dev) works ok and even solves the problem with the different browser drawing

how to remove Polyline API v3

I am using the following code to create a polyline on google maps where pts in a list of points.
walkroute = new google.maps.Polyline({
path: pts,
strokeColor: "#FF0000",
strokeOpacity: 0.4,
strokeWeight: 3,
geodesic: true'
});
walkroute.setMap(map);
I am using the following code to then try and remove the polyline but it does not appear to remove the polyline. can someone please give me the correct way to check if a polyline exists on the map and if so how to remove it.
function clearploylines();
if (walkroute === "undefined"){
if (walkroute.getMap === null) {
walkroute.setMap(null);
}
}
I created an JS Fiddle for you which shows how to hide or show same polyline.
It basically boils down to rows of:
function removePolyline() {
// polyline exists, remove
if(typeof polyline !== 'undefined') {
polyline.setMap(null);
}
}
Within your case, polyline variable is same as walkroute, but you will get the point when you open the js fiddle code.

Autocomplete polygons while drawing with drawingManager using the Google Maps API v3

I have a basic Google Map, with a drawingManager, like this:
var mapOptions = {
center: centroid,
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP]
}
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
polygonOptions: {
clickable: true,
draggable: true,
editable: true,
fillColor: '#ffff00',
fillOpacity: 0.8,
strokeWeight: 5
}
});
drawingManager.setMap(map);
Drawing polygons on the map works like a charm, except for one little thing. I have to explicitly close my polygon, either by clicking the first point, or by double clicking somewhere (or at least, I can't find another way). But I would like for my polygon to be closed at all times while drawing, a bit like this:
http://www.birdtheme.org/useful/v3tool.html
(select 'polygon' in the first select box next to the title).
Now I know this example doesn't use the drawingManager, but creates the polygon by hand, but I am wondering if something similar is possible using the drawingManager. I'm afraid there isn't, since I can't seem to find any reference to it in the manual, but that also kind of surprised about that, since I would think it is something that more people would like to have.
You could just make it yourself; you can easily register the click events.
google.maps.event.addListener(map, 'click', addLatLng);
poly = new google.maps.POLYGON(polyOptions);
poly.setMap(map);
function addLatLng(event) {
path = poly.getPath();
path.push(event.latLng);
}
Because you know the latlng of every point in you're polygon; you can just draw it.
You'll have to redraw it every time a new point is added.

Populating google map with array of circle objects created from Fusion Table data

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.

how can i make custom icons on a polyline?

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.

Resources