From e020d6a443b49cef8261bbb5d6e8c95e1b22e6d0 Mon Sep 17 00:00:00 2001 From: "Rob G. Healey" Date: Sat, 24 Jul 2010 08:43:43 +0000 Subject: [PATCH] NarrativeWeb: Continuing work on getting FamilyMap and Place Page Map to look and work as I want it too. StyleSheet: Changing elements to match current modifications. svn: r15650 --- src/data/Mapstraction.css | 34 ++++- src/plugins/webreport/NarrativeWeb.py | 202 ++++++++++++-------------- 2 files changed, 120 insertions(+), 116 deletions(-) diff --git a/src/data/Mapstraction.css b/src/data/Mapstraction.css index 4a7b7ab36..77692d9f5 100644 --- a/src/data/Mapstraction.css +++ b/src/data/Mapstraction.css @@ -28,15 +28,32 @@ body#FamilyMap { background-color: #000; color: #000; margin: 0 auto; - width: 1060px; + width: 100%; padding: 0px 4px 0px 4px; } +div#largeYmap { + width: 800px; + margin: 0% 2% 0% 2%; +} +div#smallYmap { + width: 800px; + margin: 0% 7% 0% 7%; +} /* References ------------------------------------------------- */ -div#References { +body#FamilyMap div#References { background-color: #FFF; } +body#FamilyMap div#References ol { + list-style-type: decimal; +} +body#FamilyMap div#References ol li ol { + list-style-type: lower-alpha; +} +body#FamilyMap div#References ol li a { + text-decoration: none; +} /* Mapstraction ------------------------------------------------- */ @@ -63,17 +80,22 @@ div#geo-info { /* GoogleV3 ------------------------------------------------- */ div#googlev3 { - height: 500px; - width: 600px; border: solid 1px #000; } /* ************************************************************************************** - MiddleSection + middlesection ------------------------------------------------- */ -div#middlesection { +div#smallXMap { + height: 800px; float: center; + margin: 0% 0% 7% 0%; +} +div#largeXMap { + width: 1400px; + float: center; + margin: 0% 0% 2% 0%; } /* Family GoogleV3 diff --git a/src/plugins/webreport/NarrativeWeb.py b/src/plugins/webreport/NarrativeWeb.py index f0249a339..33a195e45 100644 --- a/src/plugins/webreport/NarrativeWeb.py +++ b/src/plugins/webreport/NarrativeWeb.py @@ -108,10 +108,29 @@ from libhtmlbackend import HtmlBackend from libgedcom import make_gedcom_date from PlaceUtils import conv_lat_lon #------------------------------------------------------------------------ -# # constants -# #------------------------------------------------------------------------ +# javascript header for family map and place page map +javascript_header = """ + var map; + var latlon; + + function initialize() { + + // create map object + map = new mxn.Mapstraction('familygooglev3', 'googlev3'); + + // add map controls to image + map.addControls({ + pan: true, + zoom: 'large', + scale: true, + disableDoubleClickZoom: true, + keyboardShortcuts: true, + scrollwheel: false, + map_type: true + });""" + # Translatable strings for variables within this plugin # gettext carries a huge footprint with it. AHEAD = _("Attributes") @@ -2509,44 +2528,26 @@ class PlacePage(BasePage): with Html("script", type = "text/javascript") as jsc: middle += jsc + jsc += javascript_header jsc += """ - var map; - var latlon; - - function initialize() { - - // create mxn object - map = new mxn.Mapstraction('googlev3','googlev3'); - - // add map controls to image - map.addControls({ - pan: true, - zoom: 'large', - scale: true, - disableDoubleClickZoom: true, - keyboardShortcuts: true, - scrollwheel: false, - map_type: true - }); - - latlon = new mxn.LatLonPoint(%s, %s);""" % (latitude, longitude) + latlon = new mxn.LatLonPoint(%s, %s);""" % (latitude, longitude) jsc += """ - // put map on page - map.setCenterAndZoom(latlon, 10); + // put map on page + map.setCenterAndZoom(latlon, 10); - var marker; + var marker; - // set marker at latitude/ longitude - marker = new mxn.Marker(latlon); + // set marker at latitude/ longitude + marker = new mxn.Marker(latlon); - // add marker InfoBubble() using place name - marker.setInfoBubble('
%s
'); """ % self.page_title + // add marker InfoBubble() using place name + marker.setInfoBubble('
%s
'); """ % self.page_title jsc += """ - // add marker to map - map.addMarker(marker, true); + // add marker to map + map.addMarker(marker, true); }""" # there is no need to add an ending "", # as it will be added automatically! @@ -3905,18 +3906,25 @@ class IndividualPage(BasePage): if not place_lat_long: return - # sort on X coordinates to get min and max X GPS Coordinates - place_lat_long = sorted(place_lat_long, key = operator.itemgetter(0, 1, 2)) - BoundMinX = place_lat_long[0][0] - BoundMaxX = place_lat_long[-1][0] + MinX = MaxX = "0.00000000" + MinY = MaxY = "0.00000000" + number_markers = len(place_lat_long) + if number_markers > 3: - # sort on Y coordinates to get min and max Y GPS Coordinates - place_lat_long = sorted(place_lat_long, key = operator.itemgetter(1, 0, 2)) - BoundMinY = place_lat_long[0][1] - BoundMaxY = place_lat_long[-1][1] - MinYint = int(Decimal(BoundMinY)) - MaxYint = int(Decimal(BoundMaxY)) - spanY = (MaxYint - MinYint) + # sort on X coordinates to get min and max X GPS Coordinates + place_lat_long = sorted(place_lat_long, key = operator.itemgetter(0, 1, 2)) + MinX = place_lat_long[0][0] + MaxX = place_lat_long[-1][0] + + # sort on Y coordinates to get min and max Y GPS Coordinates + place_lat_long = sorted(place_lat_long, key = operator.itemgetter(1, 0, 2)) + YCoordinates = place_lat_long + MinY = place_lat_long[-1][1] + MaxY = place_lat_long[0][1] + + # create span widths + spanX = Decimal(Decimal(MaxX) - Decimal(MinX)) + spanY = Decimal(Decimal(MaxY) - Decimal(MinY)) # sort place_lat_long based on chronological date order place_lat_long = sorted(place_lat_long, key = operator.itemgetter(4, 2, 0)) @@ -3939,28 +3947,14 @@ class IndividualPage(BasePage): url = self.report.build_url_fname(fname, None, self.up) head += Html("script", src = url, inline = True) - # set map dimensions based on width of Y Coordinates + # set map dimensions based on span of Y Coordinates if (-20 <= spanY > -1) or (20 <= spanY > 1): - head += """ - """ + map_size = "smallYmap" else: - head += """ - """ + map_size = "largeYmap" # begin familymap division - with Html("div", class_ = "content", id = "mapbody") as mapbody: + with Html("div", class_ = "content", id = map_size) as mapbody: body += mapbody # page message @@ -3972,8 +3966,13 @@ class IndividualPage(BasePage): "on the place’s name will take you to that place’s page.") mapbody += Html("p", msg, id = "description") + if (-20 <= spanX > -1) or (20 <= spanX > 1): + middlesection = "smallXMap" + else: + middlesection = "largeXMap" + # begin middle section division - with Html("div", id = "middlesection") as middlesection: + with Html("div", id = middlesection) as middlesection: mapbody += middlesection # begin inline javascript code @@ -3981,68 +3980,51 @@ class IndividualPage(BasePage): with Html("script", type = "text/javascript") as jsc: middlesection += jsc - jsc += """ - var map; - var latlon; - var coordinates = [] + jsc += javascript_header - function initialize() { - - // create map object - map = new mxn.Mapstraction('familygooglev3', 'googlev3'); - - // add map controls to image - map.addControls({ - pan: true, - zoom: 'large', - scale: true, - disableDoubleClickZoom: true, - keyboardShortcuts: true, - scrollwheel: false, - map_type: true - });""" index = 0 for (lat, long, p, h, d) in place_lat_long: j = index + 1 - jsc += """ - // Place name: %s - add_marker(%d, %s, %s);""" % ( p, j, lat, long ) + jsc += """ add_markers(%d, %s, %s, "%s");""" % ( j, lat, long, p ) index += 1 - jsc += """ - }""" - - if len(place_lat_long) > 6: - jsc += """ - // boundary southWest equals bottom left GPS Coordinates - var southWest = new mxn.LatLonPoint(%s, %s);""" % (BoundMinX, BoundMinY) - jsc += """ - // boundary northEast equals top right GPS Coordinates - var northEast = new mxn.LatLonPoint(%s, %s);""" % (BoundMaxX, BoundMaxY) - jsc += """ - var bounds = new google.maps.LatLngBounds(southWest, northEast); - map.fitBounds(bounds);""" - jsc += """ - function add_marker(num, latitude, longitude) { + }""" - var marker; + if (-20 <= spanY > -1) or (20 <= spanY > 1): + pass - // create latitude/ longitude point for marker - latlon = new mxn.LatLonPoint(latitude, longitude); + else: + # set southWest and northEast boundaries as spanY is greater than 20 + jsc += """ + // boundary southWest equals bottom left GPS Coordinates + var southWest = new mxn.LatLonPoint(%s, %s);""" % (MinX, MinY) + jsc += """ + // boundary northEast equals top right GPS Coordinates + var northEast = new mxn.LatLonPoint(%s, %s);""" % (MaxX, MaxY) + jsc += """ + var bounds = new google.maps.LatLngBounds(southWest, northEast); + map.fitBounds(bounds);""" - // create marker - marker = new mxn.Marker(latlon); + # include add_markers function + jsc += """ + function add_markers(num, latitude, longitude, title) { - // add number to individual markers - marker.setLabel(num.toString()); + latlon = new mxn.LatLonPoint(latitude, longitude); - // add marker to map - map.addMarker(marker, true); + var marker = new mxn.Marker(latlon); - // set Center and Zoom - map.setCenterAndZoom(latlon, 6); - }""" + marker.setInfoBubble(title); + + map.addMarker(marker, true);""" + + if (-20 <= spanY > -1) or (20 <= spanY > 1): + jsc += """ var zoomlevel = 6;""" + else: + jsc += """ var zoomlevel = 8;""" + jsc += """ + map.setCenterAndZoom(latlon, zoomlevel); + }""" # there is no need to add an ending "", # as it will be added automatically!