Et:OpenLayers Marker Example

From OpenStreetMap Wiki
Jump to: navigation, search
Keelte valik — OpenLayers Marker 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 · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް

See on lihtne näide kuidas lisada oma punkti tähistav marker OpenLayers kaardile.

iframe abil

Kõige lihtsam on lisada HTML fragment kasutades <iframe> tag-i. Selleks:

  1. Mine http://kaart.maakaart.ee/
  2. Suurenda/nihuta kaart soovitud kohta
  3. Kliki kaardi all paremal nurgas linki "Permalink"
  4. Veebiaadressi väljas on uus URL, mis annab kohe määratud kaardiakna.
  5. asenda saadud URL siin, ja saadki oma HTML-i:
<iframe src="http://kaart.maakaart.ee/?zoom=12&lat=58.25004&lon=22.47902">
</iframe>

PS. kui soovid lisada kaardi keskkohta ikooni, siis lisa URL-ile &marker= ja aadress millelt võtta pilt. Otse samas serveris on olemas näiteks /openlayers/img/marker-blue.png, seega URL-ile tuleks lisada &marker=/openlayers/img/marker-blue.png

Serveris on olemas selliseid pilte:

  • /openlayers/img/marker.png (punane)
  • /openlayers/img/marker-blue.png
  • /openlayers/img/marker-gold.png
  • /openlayers/img/marker-green.png

Võid kasutada ka mistahes muud veebis olevat väikest pilti, png või jpg formaadis. Põnevaid lahendusi annab Google Charts API abil genereerida. Pane tähele, et URL-ides tuleb erimärgid asendada (ehk URL-kodeerida). Mina kasutan selleks googlet - annan otsingusse URL-i ja vaatan kuidas google enda loodud URL-is see välja näeb.

Javascript abil

Näidis

Siin on vajalik kood (kopeeri see oma HTML faili ja vaata brauseriga) :

<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("OpenStreetMap Eesti", "http://kaart.maakaart.ee/tiles/1.0.0/osm_EPSG900913/${z}/${x}/${y}.png?origin=nw")); 

    var lonLat = new OpenLayers.LonLat( 22.486111 ,58.253333 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
          
    var zoom=12;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

Siin kasutatakse sama lonLat objekti et lisada marker ja määrata kaardi keskkoht. Võid lisada veel markereid kasutades markers.addMarker(new OpenLayers.Marker(newLonLat));, kui defineerid uue lonlat objekti.

Vaata ka

OpenLayers Simple Example - siin eestikeelse kaardi jaoks kasuta sellist käsku:

map.addLayer(new OpenLayers.Layer.OSM("OpenStreetMap Eesti", "http://kaart.maakaart.ee/tiles/1.0.0/osm_EPSG900913/${z}/${x}/${y}.png?origin=nw"));