templates/CRM/Contact/Form/Task/Map/OpenStreetMaps.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | CiviCRM version 4.5                                                |
   4  +--------------------------------------------------------------------+
   5  | Copyright CiviCRM LLC (c) 2004-2014                                |
   6  +--------------------------------------------------------------------+
   7  | This file is a part of CiviCRM.                                    |
   8  |                                                                    |
   9  | CiviCRM is free software; you can copy, modify, and distribute it  |
  10  | under the terms of the GNU Affero General Public License           |
  11  | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
  12  |                                                                    |
  13  | CiviCRM is distributed in the hope that it will be useful, but     |
  14  | WITHOUT ANY WARRANTY; without even the implied warranty of         |
  15  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
  16  | See the GNU Affero General Public License for more details.        |
  17  |                                                                    |
  18  | You should have received a copy of the GNU Affero General Public   |
  19  | License and the CiviCRM Licensing Exception along                  |
  20  | with this program; if not, contact CiviCRM LLC                     |
  21  | at info[AT]civicrm[DOT]org. If you have questions about the        |
  22  | GNU Affero General Public License or the licensing of CiviCRM,     |
  23  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  24  +--------------------------------------------------------------------+
  25 *}
  26 {if $showDirectly}
  27   {assign var=height value="350px"}
  28   {assign var=width  value="425px"}
  29 {else}
  30   {assign var=height value="600px"}
  31   {assign var=width  value="100%"}
  32 {/if}
  33 {assign var=defaultZoom value=12}
  34 {literal}
  35 <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
  36 <script type="text/javascript">
  37     var popup = new Popup();
  38
  39     function Popup() {
  40         this.popup = null;
  41         this.active = false;
  42     }
  43
  44     Popup.prototype.create = function(evt) {
  45         this.destroy();
  46
  47         this.popup = new OpenLayers.Popup.FramedCloud
  48             (
  49                 "data",
  50                 evt.object.customLonLat,
  51                 new OpenLayers.Size(200,200),
  52                 evt.object.customContent,
  53                 null,
  54                 true,
  55                 function() {
  56                     this.toggle();
  57                 }
  58             );
  59         evt.object.customMarkers.map.addPopup(this.popup);
  60         OpenLayers.Event.stop(evt);
  61     }
  62
  63     Popup.prototype.destroy = function() {
  64         if(this.active) {
  65             this.popup.destroy();
  66             this.popup = null;
  67         }
  68     }
  69
  70     function initMap() {
  71         var map = new OpenLayers.Map("osm_map");
  72         map.addLayer(new OpenLayers.Layer.OSM());
  73
  74         var lonLat = new OpenLayers.LonLat(
  75             {/literal}{$center.lng}{literal},
  76             {/literal}{$center.lat}{literal}).transform(
  77                 new OpenLayers.Projection("EPSG:4326"),
  78                 map.getProjectionObject()
  79             );
  80
  81         map.setCenter(lonLat, {/literal}{$defaultZoom}{literal});
  82
  83         setMapOptions(map);
  84     }
  85
  86     function setMapOptions(map) {
  87         markers = new OpenLayers.Layer.Markers("Markers");
  88         map.addLayer(markers);
  89
  90         bounds = map.calculateBounds();
  91         {/literal}
  92         {foreach from=$locations item=location}
  93             {if $location.url and ! $profileGID}
  94             {literal}
  95                 var data = "{/literal}<a href='{$location.url}'>{$location.displayName}</a><br />{if !$skipLocationType}{$location.location_type}<br />{/if}{$location.address}";
  96             {else}
  97                 {capture assign="profileURL"}{crmURL p='civicrm/profile/view' q="reset=1&id=`$location.contactID`&gid=$profileGID"}{/capture}
  98                 {literal}
  99                 var data = "{/literal}<a href='{$profileURL}'>{$location.displayName}</a><br />{if !$skipLocationType}{$location.location_type}<br />{/if}{$location.address}";
 100             {/if}
 101             {literal}
 102             var address = "{/literal}{$location.address}{literal}";
 103             {/literal}
 104             {if $location.lat}
 105                 point = new OpenLayers.LonLat(
 106                     {$location.lng},
 107                     {$location.lat}).transform(
 108                         new OpenLayers.Projection("EPSG:4326"),
 109                         map.getProjectionObject()
 110                 );
 111                 {if $location.image && ( $location.marker_class neq 'Event' ) }
 112                     var image = '{$location.image}';
 113                 {else}
 114                     {if $location.marker_class eq 'Individual'}
 115                         var image = "{$config->resourceBase}i/contact_ind.gif";
 116                     {/if}
 117                     {if $location.marker_class eq 'Household'}
 118                         var image = "{$config->resourceBase}i/contact_house.png";
 119                     {/if}
 120                     {if $location.marker_class eq 'Organization' || $location.marker_class eq 'Event'}
 121                         var image = "{$config->resourceBase}i/contact_org.gif";
 122                     {/if}
 123                 {/if}
 124                 {literal}
 125                 createMarker(map, markers, point, data, image);
 126                 bounds.extend(point);
 127                 {/literal}
 128             {/if}
 129         {/foreach}
 130         map.setCenter(bounds.getCenterLonLat());
 131         {if count($locations) gt 1}
 132             map.zoomToExtent(bounds);
 133         {elseif $location.marker_class eq 'Event' || $location.marker_class eq 'Individual'|| $location.marker_class eq 'Household' || $location.marker_class eq 'Organization' }
 134             map.zoomTo({$defaultZoom});
 135         {else}
 136             map.zoomTo({$defaultZoom});
 137         {/if}
 138         {literal}
 139         //attribution sits awkwardly high, move it down
 140         jQuery('.olControlAttribution').css('bottom','0px');
 141     }
 142
 143     function createMarker(map, markers, point, data, image) {
 144         var marker = new OpenLayers.Marker(point);
 145
 146         var size = new OpenLayers.Size(20,20);
 147         var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
 148         marker.icon.size = size;
 149         marker.icon.offset = offset;
 150         marker.icon.url = image;
 151
 152         marker.customContent = data;
 153         marker.customLonLat = point;
 154         marker.customMarkers = markers;
 155
 156         marker.events.register('mousedown', marker, markerClick);
 157
 158         markers.addMarker(marker);
 159     }
 160
 161     function markerClick(evt) {
 162         popup.create(evt);
 163     }
 164
 165     if (window.addEventListener) {
 166         window.addEventListener("load", initMap, false);
 167     } else if (window.attachEvent) {
 168         document.attachEvent("onreadystatechange", initMap);
 169     }
 170
 171     function gpopUp() {
 172         var from   = document.getElementById('from').value;
 173         var to     = document.getElementById('to').value;
 174         var URL    = "http://maps.google.com/maps?saddr=" + from + "&daddr=" + to;
 175         day = new Date();
 176         id  = day.getTime();
 177         eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=780,height=640,left = 202,top = 100');");
 178     }
 179 </script>
 180 {/literal}
 181 <div id="osm_map" style="width: {$width}; height: {$height}"></div>