~nicolas-dumoulin/+junk/djangopld

« back to all changes in this revision

Viewing changes to templates/pois/index.html

  • Committer: Nicolas Dumoulin
  • Date: 2011-02-23 11:44:53 UTC
  • Revision ID: nicolas@dumoulin63.net-20110223114453-1mef2j4e89h3i2ig
initial version

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
{% extends "base.html" %}
 
2
 
 
3
{% block body %}
 
4
<style type="text/css">
 
5
#bandeau {
 
6
  position: absolute;
 
7
  z-index: 10000;
 
8
  left: 0px;
 
9
  top: 0px;
 
10
  background-color: #FFF;
 
11
  width:100%;
 
12
  height:180px;
 
13
}
 
14
#message {
 
15
  padding-left:2%;
 
16
}
 
17
#poiinfos, #poinotes {
 
18
  font-size:1.2em;
 
19
}
 
20
#poiinfos {
 
21
  position: absolute;
 
22
  width:420px;
 
23
}
 
24
#poinotes {
 
25
  position: absolute;
 
26
  margin-left:420px;
 
27
  margin-top:-60px;
 
28
}
 
29
.hide { display: none; }
 
30
#auth {
 
31
  position: absolute;
 
32
  z-index: 10000;
 
33
  margin-left:5px;
 
34
  margin-top:5px;
 
35
  font-size:0.8em;
 
36
}
 
37
#auth>a {
 
38
  text-decoration:none;
 
39
}
 
40
</style>
 
41
<div id="auth">
 
42
{% if logged %}
 
43
  <a href="/logout">Déconnexion</a> − <a href="/admin">Administration</a>
 
44
{% else %}
 
45
  <a href="/login">Connexion</a>
 
46
{% endif %}
 
47
</div>
 
48
<div class="hide" id="bandeau"><div id="message"></div></div>
 
49
<div id="map"></div>
 
50
<script type="text/javascript">
 
51
  var lon = 3.11257;
 
52
  var lat = 45.75086;
 
53
 
 
54
  var zoom=15;
 
55
  var map;
 
56
 
 
57
  OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
 
58
 
 
59
  map = new OpenLayers.Map ("map", {
 
60
    controls:[new OpenLayers.Control.Navigation(),
 
61
      new OpenLayers.Control.Permalink(),
 
62
      new OpenLayers.Control.LayerSwitcher(),
 
63
      new OpenLayers.Control.ScaleLine({geodesic:true}),
 
64
      new OpenLayers.Control.Attribution()],
 
65
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 
66
    maxResolution: 156543.0399,
 
67
    numZoomLevels: 19,
 
68
    units: 'm',
 
69
    projection: new OpenLayers.Projection("EPSG:900913"),
 
70
    displayProjection: new OpenLayers.Projection("EPSG:4326")
 
71
  });
 
72
{% if logged %}
 
73
  OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
 
74
      defaultHandlerOptions: {'single': true,'double': false,'pixelTolerance': 0,'stopSingle': false,'stopDouble': false},
 
75
      initialize: function(options) {
 
76
          this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
 
77
          OpenLayers.Control.prototype.initialize.apply(this, arguments); 
 
78
          this.handler = new OpenLayers.Handler.Click(this, {'click': this.trigger}, this.handlerOptions);
 
79
      }, 
 
80
      trigger: function(e) {
 
81
          var lonlat = map.getLonLatFromViewPortPx(e.xy);
 
82
          var lonlat2 = new OpenLayers.LonLat(lonlat.lon, lonlat.lat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"))
 
83
          window.location = "/saisie?lon="+lonlat2.lon+"&lat="+lonlat2.lat;
 
84
      }
 
85
  });
 
86
  var click = new OpenLayers.Control.Click();
 
87
  map.addControl(click);
 
88
  click.activate();
 
89
{% endif %}
 
90
 
 
91
  function onFeatureSelect(feature) {
 
92
    $('message').innerHTML = feature.data.content;
 
93
    document.getElementById('bandeau').className='';
 
94
  }
 
95
  function onFeatureUnselect(feature) {
 
96
    $('message').innerHTML = "";
 
97
    document.getElementById('bandeau').className='hide';
 
98
  }
 
99
  function poiDetails(titre,concerne,pointdevuede,raison,notes) {
 
100
    return "<h2>"+titre+"</h2>"+
 
101
      "<table id='poiinfos'>"+
 
102
        "<tr><td>Concerne</td><td>"+concerne+"</td></tr>"+
 
103
        "<tr><td>Point de vue de</td><td>"+pointdevuede+"</td></tr>"+
 
104
        "<tr><td>Pour une raison de</td><td>"+raison+"</td></tr>"+
 
105
      "</table>"+
 
106
      "<div id='poinotes'>"+notes+"</div>"+
 
107
      //"<p><a href='#' onclick='fermeBandeau();'>fermer</a></p>"+
 
108
      "";
 
109
  }
 
110
 
 
111
  map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
 
112
  map.addLayer(new OpenLayers.Layer.OSM("MapQuest", "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",       {
 
113
    displayOutsideMaxExtent: true, isBaseLayer: true,
 
114
    'attribution': '<a href="http://www.openstreetmap.org" target="_blank">OpenStreetMap</a> - <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>'
 
115
  }));
 
116
  map.addLayer(new OpenLayers.Layer.OSM("Hike & Bike Map","http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png",    {
 
117
      displayOutsideMaxExtent: true, isBaseLayer: true,
 
118
      'attribution': 'Map Data from <a href="http://www.openstreetmap.org/">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA 2.0</a>)'
 
119
  }));
 
120
  map.addLayer(new OpenLayers.Layer.OSM("Relief","http://toolserver.org/~cmarqu/hill/${z}/${x}/${y}.png", {
 
121
    displayOutsideMaxExtent: true, isBaseLayer: false,
 
122
    transparent: true, "visibility": true,
 
123
    'attribution':'NASA SRTM3 v2'
 
124
  }));
 
125
  var vectors= new OpenLayers.Layer.Vector("Limite de commune");
 
126
  vectors.addFeatures(getLimiteCommune())
 
127
  map.addLayer(vectors);
 
128
 
 
129
 
 
130
  var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
 
131
  style_blue.fillOpacity = 1;
 
132
  style_blue.strokeColor = "red";
 
133
  style_blue.fillColor = "black";
 
134
  style_blue.graphicName = "circle";
 
135
  style_blue.pointRadius = 9;
 
136
  style_blue.strokeWidth = 2;
 
137
  style_blue.label = function(feature) { return feature.attributes.numero; };
 
138
  style_blue.fontColor = "orange";
 
139
  style_blue.fontWeight = "bold";
 
140
 
 
141
  var symbolizer = OpenLayers.Util.applyDefaults({
 
142
      fillOpacity: 1,
 
143
      strokeColor: "red",
 
144
      fillColor: "black",
 
145
      graphicName: "circle",
 
146
      pointRadius: 9,
 
147
      strokeWidth: 2,
 
148
      label: "${numero}",
 
149
      fontColor: "white",
 
150
      fontSize: "12px",
 
151
      fontWeight: "bold"
 
152
    }, OpenLayers.Feature.Vector.style["default"]);
 
153
  var styleBads = new OpenLayers.StyleMap({"default": symbolizer, "select": {
 
154
    pointRadius: 11,
 
155
    fontSize: "16px"
 
156
  }});
 
157
  var vectors= new OpenLayers.Layer.Vector( "Points noirs", {styleMap: styleBads} );
 
158
  map.addLayer(vectors); 
 
159
  {% for poi in bads %}
 
160
    var lonLat = new OpenLayers.LonLat({{poi.longitude}},{{poi.latitude}}).transform(
 
161
      new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
 
162
      new OpenLayers.Projection("EPSG:900913")// to Spherical Mercator Projection
 
163
    );
 
164
    var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
 
165
    var pointFeature = new OpenLayers.Feature.Vector(point,{ numero: "{{poi.numero}}" },null);
 
166
    pointFeature.data.content=poiDetails("{{poi.numero}} − Problème identifié","{{poi.get_concerne_display}}","{{poi.get_pointedevuede_display}}","{{poi.get_raison_display}}","{{poi.notes|linebreaks}}");
 
167
    vectors.addFeatures([pointFeature])
 
168
  {% endfor %}
 
169
  var symbolizer2 = OpenLayers.Util.applyDefaults({
 
170
      fillOpacity: 1,
 
171
      strokeColor: "blue",
 
172
      fillColor: "yellow",
 
173
      graphicName: "circle",
 
174
      pointRadius: 9,
 
175
      strokeWidth: 2,
 
176
      label: "${numero}",
 
177
      fontColor: "black",
 
178
      fontSize: "12px",
 
179
      fontWeight: "bold"
 
180
    }, OpenLayers.Feature.Vector.style["default"]);
 
181
  var styleGoods = new OpenLayers.StyleMap({"default": symbolizer2, "select": {
 
182
    pointRadius: 11,
 
183
    fontSize: "16px"
 
184
  }});
 
185
  var vectors2= new OpenLayers.Layer.Vector( "Réussites", {styleMap: styleGoods} );
 
186
  map.addLayer(vectors2); 
 
187
  {% for poi in goods %}
 
188
    var lonLat = new OpenLayers.LonLat({{poi.longitude}},{{poi.latitude}}).transform(
 
189
      new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
 
190
      new OpenLayers.Projection("EPSG:900913")// to Spherical Mercator Projection
 
191
    );
 
192
    var point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);
 
193
    var pointFeature = new OpenLayers.Feature.Vector(point,{ numero: "{{poi.numero}}" },null);
 
194
    pointFeature.data.content=poiDetails("{{poi.numero}} − Réussite","{{poi.get_concerne_display}}","{{poi.get_pointedevuede_display}}","{{poi.get_raison_display}}","{{poi.notes|linebreaks}}");
 
195
    vectors2.addFeatures([pointFeature])
 
196
  {% endfor %}
 
197
  var selectControl = new OpenLayers.Control.SelectFeature([vectors,vectors2],
 
198
      {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
 
199
  map.addControl(selectControl);
 
200
  selectControl.activate();
 
201
 
 
202
 
 
203
  var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
 
204
  if (!map.getCenter()) {
 
205
    map.setCenter (lonLat, zoom);
 
206
  }
 
207
</script>
 
208
{% endblock %}