Draw Circle on Map Using Overlayitem
Additional overlay types
So far we take looked at iii types of overlay: markers, lines and polygons. There are several other sorts of overlay supported by Google Maps, which we will consider briefly on this page.
Circles
A specialised form of polygon overlay is a circumvolve. Circles can be added to a map given a centre and a radius (and line and fill colours); they are made available through the type google.maps.Circle(). The listings beneath show an HTML document, a map setup file, and part of an associated data file. These draw a map with a set of markers representing (a subset of) secondary schools in the London Borough of Waltham Forest. Similar most local government, distance from a schoolhouse is one of the criteria used when selecting pupils for over-subscribed schools; each year data are published showing a 'cut-off' distance: the distance beyond which no pupils were accustomed in the previous year's entry. A circle is thus a good mode of illustrating the areas from which schools draw pupils (although of class, pupils aren't uniformly distributed in this area, and pupils may be accepted from outside this area on other pick criteria). The example also illustrates the dynamic modification of a web page using JavaScript, given some input data.
The first file shown is the containing HTML certificate. This is like to those used before; the but element that might exist worthy of initial note is the empty <OL> list element at the bottom of the page.
Code for lbwf_schools.html
<!DOCTYPE html>
<html>
<meta http-equiv="content-blazon" content="text/html; charset=utf-8" />
<script blazon="text/javascript"
src="http://maps.google.com/maps/api/js">
</script>
<script src="lbwf_schools_data.js" type="text/javascript"></script>
<script src="lbwf_schools_setup.js" type="text/javascript"></script>
<title>School catchment areas</title>
</caput>
<body onload="init()">
<h1>Schoolhouse catchment areas</h1>
<p>This map shows catchment areas for a selection
of secondary schools in Waltham Wood, using cut off
distances every bit applied for intake in September 2010.</p>
<div class="gmap" id="map_canvas"
style="width: 600px; height: 400px;"></div>
<h2>Notes</h2>
<ul>
<li>The colours of the map pins and the
associated circles are randomly assigned.
If whatever particular pivot is too dark, then the page
can be re-loaded in order to assign new colours
<li>Not all schools are currently included on the map
<li>Some schools (those which are not
over-subscribed) do not have a distance cut-off
<li>The distance information is taken from
<a href="http://world wide web.babcockwf.co.u.k./
idocument/stream_document.aspx?ObjectId=338373">
Moving on - a guide to applying for a secondary
school place for September 2011</a>
published past the London Civic of Waltham Forest
</ul>
<h2>Schools</h2>
<ol start="0" id=school_list>
</ol>
</body>
</html>
The 2nd file illustrated shows the construction of the data file; the first ii entries are shown. Just the name of the schoolhouse and a URL if available are included along with the location and cut-off distance, although conspicuously ane could include a variety of other performance information. The locations have already been converted to LatLng references.
Excerpt from code for lbwf_schools_data.js
var markers = [{
'breadth': 51.5567731,
'longitude': 0.0162396,
'url': 'http://www.buxtonschool.org.uk/',
'title': 'Buxton School',
'radius': 0
},
{
'breadth': 51.629601,
'longitude': -0.007813,
'url': 'http://www.chingford-school.co.uk/',
'title': 'Chingford Foundation School',
'radius': 4087
},
...
The third file illustrated is the map setup file. A lot of this repeats aspects that we take already seen in before examples, on which we do non need to dwell. In this instance, the markers are constructed as role of the primary loop, rather than through a specific 'addMarker' function.
Lawmaking for lbwf_schools_setup.js /* digit = new Array(five); return color; function init() { function infoCallback(infowindow, mark) { var latlng = new google.maps.LatLng(centreLat, centreLong); var schools = ''; for(id in markers) { var contentString = '<div class="iw">'+ var infowindow = myColour=genHex(); myLatlng = new schools = schools + '<li>' + markers[id].title; google.maps.event.addListener( // Add together a Circle overlay to the map. circle.bindTo('middle', marker, 'position'); certificate.getElementById('school_list').innerHTML = schools;
/*
* The starting position and initial zoom factor
*
* These could be determined using the supplied data...
*/
var centreLat = 51.half-dozen;
var centreLong = -0.02;
var initialZoom = 11;
var map;
* generate random colours
*/
role genHex(){
colors = new Array(fifteen);
colors[0]="0";
colors[ane]="ane";
colors[ii]="two";
colors[iii]="3";
colors[four]="4";
colors[five]="5";
colors[vi]="half dozen";
colors[7]="7";
colors[8]="8";
colors[nine]="9";
colors[10]="a";
colors[eleven]="b";
colors[12]="c";
colors[13]="d";
colors[fourteen]="due east";
colors[xv]="f";
color="";
for (i=0;i<6;i++){
digit[i]=colors[Math.circular(Math.random()*15)];
colour = color+digit[i];
}
}
return function() {
infowindow.open(map, marking);
};
}
var myOptions = {
zoom: initialZoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),myOptions);
'<h1 grade="iw_h1">'+ markers[id].title+'</h1>' +
'<ul>' + '<li>world wide web: '+'<a href="' + markers[id].url +
'">'+ markers[id].championship +'</a>' + '</ul>' + '</div>';
new google.maps.InfoWindow({content: contentString});
google.maps.LatLng(markers[id].latitude,markers[id].longitude);
var marking = new google.maps.Marking({
position: myLatlng,
map: map,
icon: 'http://chart.apis.google.com/nautical chart?chst=d_map_pin_letter&chld='+id+'|'+myColour+'|000000',
title: markers[id].title
});
marker, 'click', infoCallback(infowindow, marker));
var circle = new google.maps.Circumvolve({
map: map,
fillColor: '#'+myColour,
fillOpacity: 0.two,
strokeWeight: 1,
radius: markers[id].radius
});
}
}
The loop has the following significant characteristics:
- Prior to starting the loop, we declare an empty string variable:
var schools='';. We will use this in due course... - For each entry that is read from the data file, we get-go create a marker, every bit normal.
- We also generate some info text from the supplied schoolhouse information, and create an infowindow object.
- We append a string to the
schoolscord: 'schools = schools + '<li>' + markers[id].title;'. This adds '<li>', which denotes an HTML list detail, and the proper name of the school. - We create the circle object.
- Nosotros bind the circle to a marking.
The circle object declaration is like to those that we have used for polygons.
var circle = new google.maps.Circle({
map: map,
fillColor: '#'+myColour,
fillOpacity: 0.ii,
strokeWeight: 1,
radius: markers[id].radius
});
The options can include an explicit centre (as a LatLng object), but in this example we have only alleged a radius (and colour information). Hence, nosotros need the 2nd stage – that of binding the circle to the marking, using the bindTo() method (an underlying method for objects in the maps API). The bounden procedure is more complex than we necessarily demand (we could just identify a middle position), but allows the circle visibility to be based on that of the marking. Note that we do non explicitly add the circumvolve to the map in this instance, as the marker to which it is jump has already been added.
Finally, in this example, we use a general JavaScript method to set up the innerHTML property of the empty list that was added to our HTML page.
document.getElementById('school_list').innerHTML = schools;
Thus, without knowing in the HTML document how many schools we would use, or what they are called, we are able to update the text on the screen with a list of names.
Here'due south what it should look like:
Circle overlays are useful for speedily and hands conveying quantitative information, by making the area proportionate to a known value of a variable at a given location. The area of a circle is a=πrii ,so if the value to be mapped has value a, then the radius should be set to r=√(a/π).
Basis Overlay
Another course of overlay is a ground overlay, which allows us to place an image over the map, which may be useful in some cases. The code below shows the setup file for a map which uses a basis overlay. This is provided via google.maps.GroundOverlay(). The setup file is loaded by an HTML page similar to those used in our other examples (groundoverlay.html).
The map overlays a celebrated map of bomb damage in the London in the Second Globe War (bomb_crop.jpg) over the regular base map.
The code is relatively simple.
The code for groundoverlay_setup.js /*
/*
* The starting position and initial zoom factor
*/
var centreLat = 51.5615;
var centreLong = -0.088;
var initialZoom = 15;
var map;
* init() part - this is where we start
*/
function init() {
var latlng = new google.maps.LatLng(centreLat, centreLong);
var myOptions = {
zoom: initialZoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(certificate.getElementById("map_canvas"),myOptions);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(51.55546,-0.09130),
new google.maps.LatLng(51.56590,-0.07980)
);
var myOverlay = new google.maps.GroundOverlay("bomb_crop.jpg", imageBounds);
myOverlay.setMap(map);
}
Having done the usual map creation, we apply google.maps.LatLngBounds() to create a bounding box. This is defined by two co-ordinates, the south-westward and n-due east points of a box; the points must be given in this order. It is up to the programmer to work out the correct co-ordinates for the epitome to exist overlain!
Nosotros then create the overlay, supplying two parameters: the name of an image file (or a URL) and the bounding box that we have created. Finally, we add the image to the map using setMap() as in nearly of our previous examples.
Here's what it should wait like:
The pattern of flop impairment can exist easily seen, and the image remains present if the user switches to satellite view. Well-nigh the bottom right of the overlay prototype is a circle indicating a flop touch location. A primal attached to the original paradigm noted colour coding of households, from total destruction (the darkest shades) to minor damage.
Past default, the opacity of the overlay prototype cannot exist altered, which limits its usefulness; although this page illustrates modifications which permit variation in opacity. It would besides be possible to add a push to the HTML page which linked its 'onclick' outcome to a JavaScript role that toggled the visibility of the overlay.
One of the earlier examples showed how ward boundaries could be added to the map as polygon overlays. Still, just five generalised wards were used, and it was noted that this was close to the practical limit as to the number of polygons that could be added to a map. This is not ideal – clearly we may want to add many polygons to a map.
I arroyo is to create a raster image that can be used every bit an overlay layer, in which the raster image contains depictions of the polygons involved. Using this approach, a large number of polygons can exist rendered, although it may exist necessary to pause upward the raster image into a number of tiles.
[ Next: Using HTML to command JavaScript]
[Form Index]
Source: http://www.geog.leeds.ac.uk/courses/postgrad/web/lectures/googlemaps/advanced/3.html
0 Response to "Draw Circle on Map Using Overlayitem"
Post a Comment