Openlayers POI layer example

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — Openlayers POI layer example
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen Kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk bokmål norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português português do Brasil română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
Screenshot of the result

Purpose

The intention is to show markers for POIs on top of an OSM Slippy Map. This example shows a very simple way of doing this.

Screenshot


The files

index.html

Copy the following into a new HTML file and name it index.html.

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 // create layer switcher widget in top right corner of map.
    var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
    map.addControl(layer_switcher);
    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 9.5788, 48.9773 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=11;
    map.setCenter (lonLat, zoom);  
    
  </script>
</body></html>

Attention: Don't work normally with <!DOCTYPE html>, see the discussion page

textfile.txt

Then create a second file called textfile.txt. It is a tab separated text file, each column being defined in the first line. An example of this file could be:

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Title One	Description one	Ol_icon_blue_example.png 24,24	0,-24
48.9899851	9.5382032	Title Two	Description two Ol_icon_red_example.png	16,16	-8,-8

Attention: Please make sure you press enter after the last character in the last line. Otherwise the last POI will not work. The space in the title and description items is not the same as the TAB which separates the items.

Also see OpenLayers documentation on Layer.Text for more details.

Icon files

Then you want to download the two icon files that are needed by this example:

  • Ol_icon_blue_example.png Blue icon
  • Ol_icon_red_example.png Red icon

Result

All four files have to be in the same folder on your web server.

Now you can open a browser window with the URL of your new index.html file. You will see OSM maps, served from the main server. If you click on the layers switcher symbol ("+" in the top right corner of the map), you will see an overlay layer called "My Points". This layer shows the markers defined by the file textfile.txt. The blue and the red marker on the map are the visible result.

Important

If you publish this example on your website, you are responsible to add all license requirements!

See also