OpenLayers Simple Example: Difference between revisions

From OpenStreetMap Wiki
Jump to navigation Jump to search
← Older editNewer edit →
Content deleted Content added
VisualWikitext
Avantman42 (talk | contribs)
283 edits
m →Instructions: - fixed a bug in the JavaScript
Sil (talk | contribs)
2 edits
Wrap up JavaScript in its own object so it doesn't collide with anyone else's script, and use shortloaded code rather than body onload
Line 14: Line 14:
<html>
<html>
<head>
<head>
<title>OpenStreetMap</title>
<title>OpenStreetMap</title>
<!-- bring in the OpenLayers javascript library
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
(here we bring it from the remote site, but you could
easily serve up this javascript youreself) -->
easily serve up this javascript youreself) -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>


<!-- bring in the OpenStreetMap OpenLayers layers.
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up to date with any necessary changes -->
Using this hosted file will make sure we are kept up to date with any necessary changes -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>


<script type="text/javascript">
<script type="text/javascript">
osm = {
//Start position for the map (hardcoded here for simplicity, but maybe you want to get from URL params)
//Start position for the map (hardcoded here for simplicity, but maybe you want to get from URL params)
var lat=51.50869333187912
lat: 51.50869333187912,
var lon=-0.11768043178514825
lon: -0.11768043178514825,
⚫
var zoom=13
zoom: 13,
⚫
⚫
var map; //complex object of type OpenLayers.Map
⚫
// Function to convert normal latitude/longitude to mercator easting/northings
⚫
⚫
lonLatToMercator: function(ll) {
⚫
// Function to convert normal latitude/longitude to mercator easting/northings
var lon = ll.lon * 20037508.34 / 180;
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);
var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
lat = lat * 20037508.34 / 180;
lat = lat * 20037508.34 / 180;
return new OpenLayers.LonLat(lon, lat);
⚫
},


//Initialise the 'map' object
⚫
return new OpenLayers.LonLat(lon, lat);
}
init: function() {
⚫
osm.map = new OpenLayers.Map ("mapdiv", {
⚫
controls:[
⚫
new OpenLayers.Control.MouseDefaults(),
⚫
new OpenLayers.Control.PanZoomBar(),
⚫
new OpenLayers.Control.Attribution()],
⚫
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
⚫
maxResolution:156543.0399, units:'meters', projection: "EPSG:900913"} );
⚫


//Initialise the 'map' object
//Define the map layer
⚫
//Note that we use a predefined layer that will be kept up to date with URL changes
⚫
function init() {
⚫
//Here we define just one layer, but providing a choice of several layers is also quite simple
map = new OpenLayers.Map ("map", {
osm.layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {wrapDateLine: true});
⚫
controls:[
⚫
new OpenLayers.Control.MouseDefaults(),
⚫
new OpenLayers.Control.PanZoomBar(),
⚫
new OpenLayers.Control.Attribution()],
⚫
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
⚫
maxResolution:156543.0399, units:'meters', projection: "EPSG:900913"} );


⚫
osm.map.addLayer(osm.layerTilesAtHome);
//Define the map layer
⚫
//Note that we use a predefined layer that will be kept up to date with URL changes
⚫
//Here we define just one layer, but providing a choice of several layers is also quite simple
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {wrapDateLine: true});


⚫
var lonLat = osm.lonLatToMercator(new OpenLayers.LonLat(osm.lon, osm.lat));
⚫
map.addLayer(layerTilesAtHome);


var lonLat = lonLatToMercator(new OpenLayers.LonLat(lon, lat));
osm.map.setCenter (lonLat, osm.zoom);
⚫
}
};


// Run the osm.init function on page load, without overwriting any other onloads
map.setCenter (lonLat, zoom);
(function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
⚫
}
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
⚫
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
⚫
</script>
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){ (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}else{window.onload=i;}})(osm.init);
⚫
</script>
</head>
</head>
<body>

<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">


<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
&lt;div style="width:100%; height:100%" id="map"></div>
&lt;div style="width:100%; height:100%" id="mapdiv"></div>
</body>
</body>

</html>
</html>
</PRE>
</PRE>

Revision as of 12:28, 11 December 2007

This simple example may help if you are Deploying your own Slippy Map. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!

Note: OpenStreetMap is serving the tile images

Please note that tile images are coming from the OpenStreetMap servers. OSM offers no guarantees about supporting this kind of usage going forward. The tile servers frequently suffer downtime, and the tile URLs may be changed. If you are expecting heavy user load, then you should discuss with everyone first (Contact).

You should consider following the other instructions on the "Deploying your own Slippy Map" page, to render and host your own tile images, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.

Of course the images themselves (our maps) change over time too, not necessarily for the better.

Instructions

Copy the following into a new HTML file, and view it in a browser. 

<html>
<head>
<title>OpenStreetMap</title>
    
<!-- bring in the OpenLayers javascript library
     (here we bring it from the remote site, but you could
     easily serve up this javascript youreself) -->
<script src="http://openlayers.org/api/OpenLayers.js"></script> 

<!-- bring in the OpenStreetMap OpenLayers layers.
     Using this hosted file will make sure we are kept up to date with any necessary changes -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript">
osm = {
    //Start position for the map (hardcoded here for simplicity, but maybe you want to get from URL params)
    lat: 51.50869333187912,
    lon: -0.11768043178514825,
    zoom: 13,
    
    // Function to convert normal latitude/longitude to mercator easting/northings
    lonLatToMercator: function(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);
    },

    //Initialise the 'map' object
    init: function() {      
        osm.map = new OpenLayers.Map ("mapdiv", {
            controls:[
                new OpenLayers.Control.MouseDefaults(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.Attribution()],
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                  maxResolution:156543.0399, units:'meters', projection: "EPSG:900913"} );
            

        //Define the map layer
        //Note that we use a predefined layer that will be kept up to date with URL changes
        //Here we define just one layer, but providing a choice of several layers is also quite simple
        osm.layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {wrapDateLine: true});

        osm.map.addLayer(osm.layerTilesAtHome);

        var lonLat = osm.lonLatToMercator(new OpenLayers.LonLat(osm.lon, osm.lat));

        osm.map.setCenter (lonLat, osm.zoom);
    }
};

// Run the osm.init function on page load, without overwriting any other onloads
(function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){     (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}else{window.onload=i;}})(osm.init);
</script>
</head>
<body>

    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="mapdiv"></div>
    
</body>
</html>

Develop this example?

Feel free to edit this page with improvements.

This example was created by Harry Wood (and anyone else who edits this page). It is based on http://informationfreeway.org (User:80n's site) It is intentionally more basic, with only one layer defined, and no support for URL params (permalink) etc. So adding these features is not necessarily an improvement. In fact if you have ideas for making this more simplistic, that'd be good.

Related

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=OpenLayers_Simple_Example&oldid=63679"