Fred
/
pcards
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implementation (foireuse) des popups sur OpenStreetMap.

This commit is contained in:
Fred Pauchet 2012-07-18 17:10:28 +02:00
parent 192fe2d974
commit 7157ed7b7c
1 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
templates/osm/map.html
View File

@ -1,51 +1,77 @@
{% load osm_tags %}
<html>
<body>
<div id="mapdiv"></div>
<body onload="init()">
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var zoom=2;
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
{% for coord in coordinates %}
var lonLat = new OpenLayers.LonLat({{ coord.longitude|floatdot }}, {{ coord.latitude|floatdot }})
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
function init() {
// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
styleMap: new OpenLayers.StyleMap({
externalGraphic: 'http://www.openlayers.org/dev/img/marker.png',
graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
title: '${tooltip}'
})
});
var popups = []
{% for coord in coordinates %}
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point({{coord.longitude|floatdot}}, {{coord.latitude|floatdot}} )
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
myLocation.getBounds().getCenterLonLat(), null,
'{{ coord }} ', null,
true
);
// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup",
lonLat.getBounds().getCenterLonLat(), null,
'<a target="_blank" href="http://openlayers.org/">We</a> ' +
'could be here.<br>Or elsewhere.', null,
true // <-- true if we want a close (X) button, false otherwise
);
markers.addMarker(new OpenLayers.Marker(lonLat));
map.addPopup(popup);
popups.push(popup);
{% endfor %}
{% endfor %}
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.setCenter (lonLat, zoom);
// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myOtherLocation = new OpenLayers.Geometry.Point(48.9, 10.2)
.transform('EPSG:4326', 'EPSG:3857');
// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
new OpenLayers.Feature.Vector(myOtherLocation, {tooltip: 'OpenLayers'})
]);
// Finally we create the map
map = new OpenLayers.Map({
div: "map", projection: "EPSG:3857",
layers: [new OpenLayers.Layer.OSM(), overlay],
center: myLocation.getBounds().getCenterLonLat(), zoom: 2
});
for(var i = 0; i < popups.length; i++)
{
map.addPopup(popups[i]);
}
}
</script>
<ul>
{% for coord in coordinates %}
<li>{{ coord }}</li>
{% endfor %}
</ul>
<div id="map" class="smallmap">
</div>
</body></html>