Difference between revisions of "Widget:OpenStreetMap Marker"

From BuildBrighton
Jump to: navigation, search
(Created page with '<noinclude>__NOTOC__ This widget allows you to add '''[http://openstreetmap.org OpenStreetMap]''' widget with a marker to your wiki page. Created by Barney. == Using this widge…')
 
Line 11: Line 11:
 
</noinclude><includeonly>
 
</noinclude><includeonly>
 
<div id="osm_mapdiv"></div>
 
<div id="osm_mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
+
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
+
<script type="text/javascript">
    map = new OpenLayers.Map("osm_mapdiv");
+
map = new OpenLayers.Map("osm_mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
+
map.addLayer(new OpenLayers.Layer.OSM());
+
var lonLat = new OpenLayers.LonLat( <!--{$lon|escape:'quotes'}--> , <!--{$lat|escape:'quotes'}-->).transform(
    var lonLat = new OpenLayers.LonLat( <!--{$lon|escape:'quotes'}--> , <!--{$lat|escape:'quotes'}-->)
+
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          .transform(
+
map.getProjectionObject() // to Spherical Mercator Projection
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
+
);
            map.getProjectionObject() // to Spherical Mercator Projection
+
var zoom=<!--{$zoom|escape:'quotes'}-->;
          );
+
var markers = new OpenLayers.Layer.Markers( "Markers" );
+
map.addLayer(markers);
    var zoom=<!--{$zoom|escape:'quotes'}-->;
+
markers.addMarker(new OpenLayers.Marker(lonLat));
+
map.setCenter (lonLat, zoom);
    var markers = new OpenLayers.Layer.Markers( "Markers" );
+
</script>
    map.addLayer(markers);
+
+
    markers.addMarker(new OpenLayers.Marker(lonLat));
+
+
    map.setCenter (lonLat, zoom);
+
  </script>
+
 
</includeonly>
 
</includeonly>

Revision as of 17:40, 26 July 2010

This widget allows you to add OpenStreetMap widget with a marker to your wiki page.

Created by Barney.

Using this widget

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:OpenStreetMap Marker article.