Talk:OpenLayers Simple Example

including in <table>

I have tried the example and it worked out of the box, however when I tried to integrate the map in a html-table, it didn't render anymore. This is somewhat confusing because when I view the html in firebug, apparently init() worked properly and filled the div. Can anybody tell me what the cause of this is?

Thanks Brndnbg 21:48, 15 November 2009 (UTC)

Didn't work for me. I can't figure out why not. Checked all the javascript. Chub 12:47, 22 December 2009 (UTC)

lonLatToMercator() function

It would perhaps be a good idea to add the lonLatToMercator() function (from the OSM site here: [1]) to the example, parse the default lat/lon into with this function so that it is obvious what is happening at this step.

It would probably help to define the initial lat/lon as an OpenLayers lat/lon object, too. --Thomas Wood 19:22, 17 October 2007 (BST)

...and he did it! - Harry Wood 17:18, 11 December 2007 (UTC)

These days that's all nicely simplified by the provision of 'tranform' methods, as illustrated on the page now. There's also a nice document explaining projections in an OpenLayers context. At the moment I'm looking at the content and thinking we could farm off the proj4 stuff onto a separate page -- Harry Wood 12:31, 6 August 2010 (BST)

Reverted non-simple browser detecting and code wrapping stuff

User:Sil has made an edit which I think I'm going to revert because it's supposed to be a simple example. I think the point of this new code is to make it easier to drop the javascript in to a page which already has javascript. Am I understanding that right? I guess it also means it can appear inline without needing anything in the <body> tag.

But generally I would say it definitely doesn't fit the criteria of providing a simple example. One nice thing about keeping it simple, is that if a developer can understand it, then they'll be able to figure out the necessary shoehorning into existing pages anyway.

-- Harry Wood 17:18, 11 December 2007 (UTC)

Adding segments (lines) on an OpenLayers map?

So, this is the coolest thing since sliced butter. I've seen the Openlayers POI layer example for how I can add points of interest, but is there any way I can add segments (lines between points) on an OSM map? In particular, I'd like to graphically display flight routes (London-New York, etc) between arbitrary lat/lon points. Just a simple straight line would be fine for starters, but for extra credit, geometrically accurate curved line projections would be even nicer. Jpatokal 12:44, 18 July 2008 (UTC)

Reply to self: apparently PointTracks do pretty much what I need. Jpatokal 12:48, 18 July 2008 (UTC)

hmmm. Haven't tried it, but I was playing with the OpenLayers examples, and noticed there's one which lets the user draw lines onto the map: http://openlayers.org/dev/examples/drag-feature.html ...Positioning some static lines should be less complex than that I guess. -- Harry Wood 13:23, 18 July 2008 (UTC)

You can also render many common geographic files such as KML, GML, GeoRSS etc through use of the GML layer and the appropriate Format object. The API docs contain more info. --Thomas Wood 17:01, 18 July 2008 (UTC)

These days a lot of stuff can be done with a 'Vector' layer. simple Vector Linestring example. That's kind of the raw way of doing it, with more flexibility than reading KML/GML/GeoRSS in. -- Harry Wood 12:31, 6 August 2010 (BST)

add license

Even the simple example should include the license notice. Lulu-Ann

It does

When someone uses the OpenLayers.Layer.OSM layer class as in this example, OpenLayers will display the attribution text. This is defined in Layer/XYZ.js and currently reads "Data CC-BY-SA OpenStreetMap"

-- Harry Wood 16:19, 30 June 2010 (UTC)

OK then :-)

Needs updating for ol.js 5.3.0

I tried using this example for placing a marker and it did not work. I have modified it to use the latest naming for the library to ol.js and tried fixing the calls for the new methods. But, I am getting an error. Here's my verions of the add markers example:

   <!DOCTYPE HTML>
   <html>
       <head>
           <title>OpenLayers Simplest Example</title>
       </head>
       <body>

           <script src="./build/ol.js"></script>
           <script>
               var lat            = 47.35387;
               var lon            = 8.43609;
               var zoom           = 18;
               var fromProjection = new ol.proj.Projection("EPSG:4326");   // Transform from WGS 1984
               var toProjection   = new ol.proj.Projection("EPSG:900913"); // to Spherical Mercator Projection
               var position       = new ol.proj.toLonLat(lon, lat).transform( fromProjection, toProjection);
               map                = new ol.Map("Map");
               var mapnik         = new ol.Layer.OSM();
               map.addLayer(mapnik);
               var markers        = new ol.Layer.Markers( "Markers" );
               map.addLayer(markers);
               markers.addMarker(new ol.Marker(position));
               map.setCenter(position, zoom);
           </script>
       </body>
   </html>

But I get this error in my Chrome console:

   Uncaught TypeError: t.getCode is not a function
       at Le (proj.js:419)
       at Oe (proj.js:442)
       at Pe (proj.js:461)
       at new ux.proj.toLonLat (proj.js:375)
       at index.html:16

Minimal Working Example for OpenLayers 6.1.1

I have adapted OpenLayer's Quick Start example code for a 2019 edition of the OpenLayers Simple Example. To use it,

Get hold of the necessary code:
1. Either extract build/ol.js and css/ol.css from the current OpenLayer release, v6.1.1 at the time of writing.
2. Alternatively, download the two files here and here.
Create a new file index.html in the same directory as the two OpenLayer files.
Add code to it, see below.
Open index.html in your browser.
You should see a simple map titled "My Map".

Contents of index.html:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

Have fun! 0xffalbert (talk) 09:56, 6 November 2019 (UTC)

ViewInOsm EditInOsm

doesn someone have codded some nice buton/link ViewInOsm EditInOsm ? Marc marc (talk) 21:33, 5 July 2023 (UTC)