{% extends "pylucid/css_anchor_div.html" %}

{% block plugin_content %}
{% extrahead %}
<!-- OpenStreetMap.html extrahead START -->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js" onerror="JavaScript:alert('Error loading file:\n\nhttp://www.openlayers.org/api/OpenLayers.js');"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" onerror="JavaScript:alert('Error loading file:\n\nhttp://www.openstreetmap.org/openlayers/OpenStreetMap.js');"></script>
<script type="text/javascript">
function draw_osm_map(map_slug, lang_code, map_lon, map_lat, map_zoom, marker_html, marker_lon, marker_lat, marker_width, marker_height){
	OpenLayers.Lang.setCode(lang_code);
    var map = new OpenLayers.Map("osm_map_"+map_slug, {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.OverviewMap(),
        ],
        layers:[
            new OpenLayers.Layer.OSM(),
            new OpenLayers.Layer.OSM.Osmarender("Tiles@Home"),
            new OpenLayers.Layer.OSM.CycleMap("CycleMap")
        ],
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326")
    });
    function transformed_lonlat(lon, lat){
        return new OpenLayers.LonLat(lon, lat).transform(
            map.displayProjection, map.projection
        )
    }

    map.setCenter(transformed_lonlat(map_lon, map_lat), map_zoom);
    var marker_center=transformed_lonlat(marker_lon, marker_lat)

    var size = new OpenLayers.Size(21, 25)
    var icon = new OpenLayers.Icon('http://www.openlayers.org/api/img/marker.png',
        size, offset= new OpenLayers.Pixel(-(size.w/2), -size.h)
    );
    var markers = new OpenLayers.Layer.Markers("Markers");
    markers.addMarker(new OpenLayers.Marker(marker_center, icon));
    map.addLayer(markers);

    if (marker_html) {
		map.addPopup(
		  new OpenLayers.Popup(
		      id = "osm_popup_" + map_slug,
			  lonlat = marker_center,
			  size = new OpenLayers.Size(marker_width, marker_height),
			  contentHTML = marker_html,
			  closeBox = true
		  )
	   );
	}
}
</script>
<!-- OpenStreetMap.html extrahead END -->
{% endextrahead %}
<div id="osm_map_{{ map.name }}" class="osm_map" style="width: {{ map.width }}; height: {{ map.height }};">
    <noscript><h3 class="no_anchor">Error: Javascript is needed.</h3></noscript>
</div>
{% include "StreetMap/includes/edit_link.html" %}
{% include "StreetMap/includes/OpenStreetMap_link.html" %}
<script type="text/javascript">
    marker_html = "{{ marker_html }}";
</script>
<script type="text/javascript">
    try {marker_html} catch (e) {
        log("Wrong marker html code!");
		marker_html="";
    }
	draw_osm_map("{{ map.name }}", "{{ lang_code }}", {{ map.lon }}, {{ map.lat }}, {{ map.zoom }}, marker_html, {{ marker_lon }}, {{ marker_lat }}, {{ map.marker_width }}, {{ map.marker_height }});
</script>
{% endblock %}