How to draw polygon with mouse using google api?
1,647 views
Skip to first unread message
Etratch
Feb 3, 2009, 12:30:45 PM2/3/09
to KML Developer Support - Google Earth Browser Plugin
Hi,
How to draw polygons with the mouse on google earth api, equal to the
example of google maps http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-a...
Help me
Thanks
How to draw polygons with the mouse on google earth api, equal to the
example of google maps http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-a...
Help me
Thanks
fraser [Earth API Guru]
Feb 3, 2009, 2:22:09 PM2/3/09
to KML Developer Support - Google Earth Browser Plugin
Hi,
Take a look at these two samples in the demo gallery.
Draw Shapes by Google Earth API Team
http://earth-api-samples.googlecode.com/svn/trunk/demos/draw/index.html
Polyplot by James Stafford
http://www.barnabu.co.uk/geapi/polyplot
Hope that helps.
Fraser
Take a look at these two samples in the demo gallery.
Draw Shapes by Google Earth API Team
http://earth-api-samples.googlecode.com/svn/trunk/demos/draw/index.html
Polyplot by James Stafford
http://www.barnabu.co.uk/geapi/polyplot
Hope that helps.
Fraser
Etratch
Feb 3, 2009, 2:37:36 PM2/3/09
to KML Developer Support - Google Earth Browser Plugin
thanks, I had already viewed the examples, see my code and you can
help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?
key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-
Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
var ge = null;
var isMouseDown = false;
var lineStringPlacemark = null;
var coords = null;
var pointCount = 0;
var doc = null;
var placemark;
var dragInfo = null;
function init() {
google.earth.createInstance("map3d", initCB, failureCB);
}
function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
doc = ge.createDocument('');
ge.getFeatures().appendChild(doc);
var geocoder = new google.maps.ClientGeocoder();
geocoder.getLatLng('{{ dados.endereco }},{{ dados.cidade }},
{{ estado.nome }},{{ dados.pais }}', pontoinicial);
//google.earth.addEventListener(ge.getGlobe(), 'mousemove',
onmousemove);
google.earth.addEventListener(ge.getGlobe(), 'mousedown',
onmousedown);
google.earth.addEventListener(ge.getGlobe(), 'mousedown',
onmouseclick);
google.earth.addEventListener(ge.getWindow(), 'mousedown',
placemarkmousedown);
google.earth.addEventListener(ge.getGlobe(), 'mousemove',
placemarkmousemove);
google.earth.addEventListener(ge.getWindow(), 'mouseup',
placemarkmouseup);
}
function pontoinicial(point){
if (point) {
var lookAt = ge.createLookAt('');
lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 0,
60, 20000);
ge.getView().setAbstractView(lookAt);
}
}
function onmousemove(event) {
if (isMouseDown) {
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
}
}
function onmouseclick(event) {
// alert(event.getTarget().getType());
if (event.getTarget().getType() == 'GEGlobe'){
if (isMouseDown) {
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(), 0);
placemark = ge.createPlacemark('');
ge.getFeatures().appendChild(placemark);
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
var point = ge.createPoint('');
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
placemark.setGeometry(point);
ge.getFeatures().appendChild(placemark);
}
if (lineString.getCoordinates().getLength() > 2){
convertLineStringToPolygon(lineStringPlacemark);
}
}
}
function convertLineStringToPolygon(placemark) {
var polygon = ge.createPolygon('');
var outer = ge.createLinearRing('');
polygon.setOuterBoundary(outer);
var lineString = placemark.getGeometry();
for (var i = 0; i < lineString.getCoordinates().getLength(); i++) {
var coord = lineString.getCoordinates().get(i);
outer.getCoordinates().pushLatLngAlt(coord.getLatitude(),
coord.getLongitude(),
coord.getAltitude());
}
placemark.setGeometry(polygon);
}
function placemarkmousedown(event){
if (event.getTarget().getType() == 'KmlPlacemark' &&
event.getTarget().getGeometry().getType() == 'KmlPoint') {
event.preventDefault();
var placemark = event.getTarget();
dragInfo = {
placemark: event.getTarget(),
dragged: false
};
}
}
function placemarkmousemove(event) {
if (dragInfo) {
event.preventDefault();
var point = dragInfo.placemark.getGeometry();
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
dragInfo.dragged = true;
}
}
function placemarkmouseup(event) {
if (dragInfo) {
if (dragInfo.dragged) {
event.preventDefault();
}
dragInfo = null;
}
}
function onmousedown(event) {
if (isMouseDown) {
isMouseDown = true;
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
convertLineStringToPolygon(lineStringPlacemark);
placemark = ge.createPlacemark('');
ge.getFeatures().appendChild(placemark);
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
var point = ge.createPoint('');
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
placemark.setGeometry(point);
ge.getFeatures().appendChild(placemark);
lineStringPlacemark = ge.createPlacemark('');
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
lineString.setTessellate(true);
lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle
();
lineStyle.setWidth(lineStyle.getWidth() + 2);
lineStyle.getColor().set('66ff0000');
var polyStyle = lineStringPlacemark.getStyleSelector().getPolyStyle
();
polyStyle.getColor().set('ddffffff'); // aabbggrr format
coords = lineString.getCoordinates();
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
doc.getFeatures().appendChild(lineStringPlacemark);
} else {
isMouseDown = true;
lineStringPlacemark = ge.createPlacemark('');
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
lineString.setTessellate(true);
lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle
();
lineStyle.setWidth(4);
lineStyle.getColor().set('ddffffff'); // aabbggrr formatx
lineStyle.setColorMode(ge.COLOR_RANDOM);
var polyStyle = lineStringPlacemark.getStyleSelector().getPolyStyle
();
polyStyle.getColor().set('ddffffff'); // aabbggrr format
polyStyle.setColorMode(ge.COLOR_RANDOM);
coords = lineString.getCoordinates();
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
doc.getFeatures().appendChild(lineStringPlacemark);
}
}
function failureCB(object) {
}
function limparmapa(){
}
</script>
</head>
<body>
<div id='map3d_container' style='border: 1px solid silver; height:
600px; width: 600px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
<br>
<!--<input type=button onclick='javascript:alert(doc.getKml())'
value='Show KML'>-->
</body>
</html>
On 3 fev, 17:22, fraser [Earth API Guru] wrote:
> Hi,
>
> Take a look at these two samples in the demo gallery.
>
> Draw Shapes by Google Earth API Teamhttp://earth-api-samples.googlecode.com/svn/trunk/demos/draw/index.html
>
> Polyplot by James Staffordhttp://www.barnabu.co.uk/geapi/polyplot
>
> - Mostrar texto entre aspas -
help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?
key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-
Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
var ge = null;
var isMouseDown = false;
var lineStringPlacemark = null;
var coords = null;
var pointCount = 0;
var doc = null;
var placemark;
var dragInfo = null;
function init() {
google.earth.createInstance("map3d", initCB, failureCB);
}
function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
doc = ge.createDocument('');
ge.getFeatures().appendChild(doc);
var geocoder = new google.maps.ClientGeocoder();
geocoder.getLatLng('{{ dados.endereco }},{{ dados.cidade }},
{{ estado.nome }},{{ dados.pais }}', pontoinicial);
//google.earth.addEventListener(ge.getGlobe(), 'mousemove',
onmousemove);
google.earth.addEventListener(ge.getGlobe(), 'mousedown',
onmousedown);
google.earth.addEventListener(ge.getGlobe(), 'mousedown',
onmouseclick);
google.earth.addEventListener(ge.getWindow(), 'mousedown',
placemarkmousedown);
google.earth.addEventListener(ge.getGlobe(), 'mousemove',
placemarkmousemove);
google.earth.addEventListener(ge.getWindow(), 'mouseup',
placemarkmouseup);
}
function pontoinicial(point){
if (point) {
var lookAt = ge.createLookAt('');
lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND, 0,
60, 20000);
ge.getView().setAbstractView(lookAt);
}
}
function onmousemove(event) {
if (isMouseDown) {
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
}
}
function onmouseclick(event) {
// alert(event.getTarget().getType());
if (event.getTarget().getType() == 'GEGlobe'){
if (isMouseDown) {
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(), 0);
placemark = ge.createPlacemark('');
ge.getFeatures().appendChild(placemark);
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
var point = ge.createPoint('');
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
placemark.setGeometry(point);
ge.getFeatures().appendChild(placemark);
}
if (lineString.getCoordinates().getLength() > 2){
convertLineStringToPolygon(lineStringPlacemark);
}
}
}
function convertLineStringToPolygon(placemark) {
var polygon = ge.createPolygon('');
var outer = ge.createLinearRing('');
polygon.setOuterBoundary(outer);
var lineString = placemark.getGeometry();
for (var i = 0; i < lineString.getCoordinates().getLength(); i++) {
var coord = lineString.getCoordinates().get(i);
outer.getCoordinates().pushLatLngAlt(coord.getLatitude(),
coord.getLongitude(),
coord.getAltitude());
}
placemark.setGeometry(polygon);
}
function placemarkmousedown(event){
if (event.getTarget().getType() == 'KmlPlacemark' &&
event.getTarget().getGeometry().getType() == 'KmlPoint') {
event.preventDefault();
var placemark = event.getTarget();
dragInfo = {
placemark: event.getTarget(),
dragged: false
};
}
}
function placemarkmousemove(event) {
if (dragInfo) {
event.preventDefault();
var point = dragInfo.placemark.getGeometry();
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
dragInfo.dragged = true;
}
}
function placemarkmouseup(event) {
if (dragInfo) {
if (dragInfo.dragged) {
event.preventDefault();
}
dragInfo = null;
}
}
function onmousedown(event) {
if (isMouseDown) {
isMouseDown = true;
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
convertLineStringToPolygon(lineStringPlacemark);
placemark = ge.createPlacemark('');
ge.getFeatures().appendChild(placemark);
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var style = ge.createStyle('');
style.getIconStyle().setIcon(icon);
placemark.setStyleSelector(style);
var point = ge.createPoint('');
point.setLatitude(event.getLatitude());
point.setLongitude(event.getLongitude());
placemark.setGeometry(point);
ge.getFeatures().appendChild(placemark);
lineStringPlacemark = ge.createPlacemark('');
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
lineString.setTessellate(true);
lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle
();
lineStyle.setWidth(lineStyle.getWidth() + 2);
lineStyle.getColor().set('66ff0000');
var polyStyle = lineStringPlacemark.getStyleSelector().getPolyStyle
();
polyStyle.getColor().set('ddffffff'); // aabbggrr format
coords = lineString.getCoordinates();
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
doc.getFeatures().appendChild(lineStringPlacemark);
} else {
isMouseDown = true;
lineStringPlacemark = ge.createPlacemark('');
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
lineString.setTessellate(true);
lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle
();
lineStyle.setWidth(4);
lineStyle.getColor().set('ddffffff'); // aabbggrr formatx
lineStyle.setColorMode(ge.COLOR_RANDOM);
var polyStyle = lineStringPlacemark.getStyleSelector().getPolyStyle
();
polyStyle.getColor().set('ddffffff'); // aabbggrr format
polyStyle.setColorMode(ge.COLOR_RANDOM);
coords = lineString.getCoordinates();
coords.pushLatLngAlt(event.getLatitude(), event.getLongitude(),
0);
doc.getFeatures().appendChild(lineStringPlacemark);
}
}
function failureCB(object) {
}
function limparmapa(){
}
</script>
</head>
<body>
<div id='map3d_container' style='border: 1px solid silver; height:
600px; width: 600px;'>
<div id='map3d' style='height: 100%;'></div>
</div>
<br>
<!--<input type=button onclick='javascript:alert(doc.getKml())'
value='Show KML'>-->
</body>
</html>
On 3 fev, 17:22, fraser [Earth API Guru] wrote:
> Hi,
>
> Take a look at these two samples in the demo gallery.
>
> Draw Shapes by Google Earth API Teamhttp://earth-api-samples.googlecode.com/svn/trunk/demos/draw/index.html
>
>
> Hope that helps.
>
> Fraser
>
> On Feb 3, 5:30 pm, Etratch wrote:
>
>
>
> > Hi,
>
> > How to draw polygons with the mouse on google earth api, equal to the
> > example of google mapshttp://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-a...
> > Help me
> > Thanks- Ocultar texto entre aspas -
> Hope that helps.
>
> Fraser
>
> On Feb 3, 5:30 pm, Etratch wrote:
>
>
>
> > Hi,
>
> > How to draw polygons with the mouse on google earth api, equal to the
> > example of google mapshttp://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-a...
> > Help me
>
> - Mostrar texto entre aspas -
AlexGeo
Feb 4, 2009, 7:58:22 PM2/4/09
to KML Developer Support - Google Earth Browser Plugin
what exactly is the problem you're having?
do you have a link where we can test this rather than putting it back
together ourselves?
do you have a link where we can test this rather than putting it back
together ourselves?
Etratch
Feb 5, 2009, 5:29:00 AM2/5/09
to KML Developer Support - Google Earth Browser Plugin
I'm not getting the points and put connect form a polygon, it works as
follows on Google Earth:
+ after the 3 points form a Polig, which can add more points, and
points already placed can be moved by changing its coordinates. Makes
4 days I'm trying to do and I am getting is my first application, if
someone can help me.
> > > - Mostrar texto entre aspas -- Ocultar texto entre aspas -
follows on Google Earth:
+ after the 3 points form a Polig, which can add more points, and
points already placed can be moved by changing its coordinates. Makes
4 days I'm trying to do and I am getting is my first application, if
someone can help me.
Reply all
Reply to author
Forward
0 new messages