Vbulletin osm

From OpenStreetMap Wiki
Jump to navigation Jump to search
Vbulletin example map.png

Do you want to give your vbulletin users the options to include a map into a posting like the one to the right? They only have to put this code [map]latitude,longitude[/map] into a message.

Server

Create a directory osm in the root folder of your website. Put the viewer.php into it.

viewer.php

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
#map {
        width: 280px;
        height: 180px;
        border: 0px;
        padding: 0px;
        position: absolute;
	overflow:hidden;
	border: 1px solid #808080;
     }
body {

	background-color: #FFFFFF;
        border: 0px;
	padding: 8px;
        margin: 0px;
	width: 100%;
        height: 100%;
	font:Arial, Helvetica, sans-serif;
     }
    </style>
    <script src="http://openlayers.org/api/2.5-rc3/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        var map;

        function init(){

	//if (document.location.protocol != "file:") {
		//theArgs = OpenLayers.Util.getArgs();
	// } else {
    //    theArgs = {};
    //    theArgs.center = "0,0";
    //    theArgs.zoom = "0";            
    //}		
	
    var DEFAULT_LAT = 50.85017075668747;
    var DEFAULT_LON = 5.695231557715086;
    var DEFAULT_ZOOM_LEVEL = 13;
    
    var IDX_LAT = 0;
    var IDX_LON = 1;
	var safeArgs = {};
	
	//alert(theArgs.center);
	
	safeArgs.centerLat = DEFAULT_LAT; //theArgs.center ? parseFloat(theArgs.center.split(",")[IDX_LAT]) : DEFAULT_LAT;
	safeArgs.centerLon = DEFAULT_LON; //theArgs.center ? parseFloat(theArgs.center.split(",")[IDX_LON]) : DEFAULT_LON;
	safeArgs.zoom = 13; // theArgs.zoom ? parseInt(theArgs.zoom) : DEFAULT_ZOOM_LEVEL;		

			//alert(safeArgs.centerLon + " " + safeArgs.centerLat + " " + safeArgs.zoom);
		
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
                      numZoomLevels: 18,
                      maxResolution: 156543,
                      units: 'm',
                      projection: "EPSG:41001" });

            var layerMapnik = new OpenLayers.Layer.TMS( 
                      "Mapnik (updated weekly)",
                      "http://tile.openstreetmap.org/mapnik/",
                      {type:'png', getURL: get_osm_url} );

            map.addLayers([layerMapnik]);

//            map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.setCenter(lonLatToMercator(new OpenLayers.LonLat(DEFAULT_LON,DEFAULT_LAT)), 16);
			//map.setCenter(lonLatToMercator(new OpenLayers.LonLat(safeArgs.centerLon, safeArgs.centerLat)), safeArgs.zoom);
        }

        function get_osm_url (bounds) {
            var res = this.map.getResolution();
            var x = Math.round ((bounds.left - this.maxExtent.left) / (res *
            this.tileSize.w));
            var y = Math.round ((this.maxExtent.top - bounds.top) / (res *
            this.tileSize.h));
            var z = this.map.getZoom();
            var path = z + "/" + x + "/" + y + "." + this.type; 
            var url = this.url;
            if (url instanceof Array) {
                url = this.selectUrl(path, url); }
            return url + path;
        }

        function lonLatToMercator(ll) {
           var lon = ll.lon * 20037508.34 / 180;
           var lat = Math.log(Math.tan((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
           lat = lat * 20037508.34 / 180;
           return new OpenLayers.LonLat(lon, lat);
        }
        // -->
    </script>
  <title>Openstreetmap Notes - powered by Openlayers</title></head>
  <body onLoad="init()">
  < div id="map"></div>
  </body>
</html>

Remove the spaces before < div>

vbulletin admin

  1. Goto BB Code Manager
  2. Add New BB Code
Change the iframe url to the address where your local viewer.php is located.
Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=Vbulletin_osm&oldid=395948"