Hi,
I am having some difficulty in plottings some points on a gmap with
informational attributes and I hope someone can help me understand what
mistakes I am making. I am aware that these cities are already marked on
the map, but I want to
add these markers for a quiz app I'm making.
The points plot correctly, but when I click on the marker, instead of
getting information of "state_name, latitude, longitude" values, I get
the string, %(statename)s %(capital_latitude)s %(capital_longitude)s
I don't understand how to modify the files to display the right values.
I created a copy of the welcome application and then installed the
gmap_plugin
that Massimo Di Pierro provided via the wp2 file in an application called
"testmap".
I can see the map successfully shown if I click on "index" under the
gmap_plugin controller in the ide.
When I add the line
{{=LOAD('plugin_gmap')}}
into the view/default/index.html file, the map shows up there as well.
I made a csv file containing the 50 USs states, their capital city name,
and the lat, long of the capitals, and loaded that into a db file named
db5.py.
db.define_table('capitals',
Field('state_name','string', requires=IS_NOT_EMPTY()),
Field('capital_name','string',requires=IS_NOT_EMPTY()),
Field('capital_latitude','double',requires=IS_FLOAT_IN_RANGE(0,10**7)),
Field('capital_longitude','double',requires=IS_FLOAT_IN_RANGE(0,10**7)),
)
In the ide, the fields show up ok:
In [7] : print db.capitals.fields
['id', 'state_name', 'capital_name', 'capital_latitude',
'capital_longitude']
After the csv import, I can see the data: (snip)
50 selected
capitals.id capitals.state_name capitals.capital_name
capitals.capital_latitude capitals.capital_longitude
1 Alabama Montgomery 32.361538 -86.279118
2 Alaska Juneau 58.301935 -134.41974
3 Arizona Phoenix 33.448457 -112.073844
4 Arkansas Little Rock 34.736009 -92.331122
etc.
At this point, I should be able to do a select in the gmap_plugin.py in the
models directory, and then be able to plot the points as markers on the map
by
editing the views/default/index.html file or the index file in the
gmap_plugin directory. This part worked ok.
Here's what I've tried but the info in the marker is not working. Could
someone please give
me suggestions why it is wrong? Thanks.
First I check that a selection into lat,long points works.
points =
db(capitals.capital_latitude,capitals.capital_longitude,orderby=capitals.state_name)
.
points =
db(db.capitals.capital_latitude,db.capital.capital_longitude).select()
print points
snip --
'Wisconsin', 'capital_name': ' Madison', 'id': 49}, {'capital_longitude':
-104.802042, 'capital_latitude': 41.145547999999998, 'state_name':
'Wyoming', 'capital_name': ' Cheyenne', 'id': 50}]
:w!
rows =db().select(db.capitals.ALL, orderby=capitals.state_name)
print rows
gives all information
{'capital_longitude': -104.802042, 'capital_latitude': 41.145547999999998,
'state_name': 'Wyoming', 'capital_name': ' Cheyenne', 'id': 50}]
Here is the modified plugin_gmap.py model file:
from gluon.storage import Storage
plugin_gmap=Storage()
plugin_gmap.key='ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA'
# key for localhost
plugin_gmap.set=db(db.capitals.id>0).select() ### change this to a query
that lists records with latitude and longitute
points=db(db.capitals.id>0).select() ### change this to a query that lists
records with latitude and longitute
plugin_gmap.represent=lambda row: '%(state_name)s %(capital_latitude)s
%(capital_longitude)s '
# include plugin in views with {{=LOAD('plugin_gmap')}}
Here is the modified plugin_gmap.py controller file:
def index():
width = request.vars.width or 400
height = request.vars.height or 300
#rows = plugin_gmap.set.select()
rows = db(db.capitals.id>0).select()
for row in rows:
row.plugin_gmap_popup = plugin_gmap.represent(row)
return
dict(width=width,height=height,rows=rows,GOOGLEMAP_KEY=plugin_gmap.key)
~
Here is the modified plugin_gmap view file:
<script
src="http://maps.google.com/maps?file=api&v=2&key={{=GOOGLEMAP_KEY}}";
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0), 1);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";;
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 14);
var blueIcon = new GIcon();
blueIcon.image =
"http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";;
blueIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";;
blueIcon.iconSize = new GSize(37, 34);
blueIcon.shadowSize = new GSize(37, 34);
blueIcon.iconAnchor = new GPoint(9, 34);
blueIcon.infoWindowAnchor = new GPoint(9, 2);
blueIcon.infoShadowAnchor = new GPoint(18, 14);
function createMarker(point, i, message) {
// Set up our GMarkerOptions object
if(i==0) markerOptions = { icon:blueIcon };
else markerOptions= {}
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(message);
});
return marker;
}
{{for row in rows:}}{{if row.capital_latitude and
row.capital_longitude:}}
var point = new
GLatLng({{=row.capital_latitude}},{{=row.capital_longitude}});
map.addOverlay(createMarker(point, 0,
'{{=str(row.plugin_gmap_popup).replace("'","\\'")}}'));
{{pass}}{{pass}}
}
}
//]]>
</script>
<center>
<div id="map" style="width: {{=width}}px; height: {{=height}}px"></div>
<script>load();</script>
</center>
Thanks for any help.
Margaret
![http://www.google.com/mapfiles/shadow50.png"](https://www.google.com/mapfiles/shadow50.png"){kind=link}
![http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"](https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"){kind=link}