metalx1000

Open Street Maps Marker Icon

Feb 21st, 2020 (edited)
817
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <body>
  3.     <div id="mapdiv"></div>
  4.     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  5.     <script>
  6.       map = new OpenLayers.Map("mapdiv");
  7.       map.addLayer(new OpenLayers.Layer.OSM());
  8.  
  9.       let zoom=16;
  10.       let size = new OpenLayers.Size(21,25);
  11.       let offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  12.       let lonLat = new OpenLayers.LonLat( -81.7692887,26.1741378 ).transform(
  13.       new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  14.       map.getProjectionObject() // to Spherical Mercator Projection
  15.       );
  16.       map.setCenter (lonLat, zoom);
  17.  
  18.  
  19.       let markers = new OpenLayers.Layer.Markers( "Markers" );
  20.       map.addLayer(markers);
  21.  
  22.       let marker_icon='https://p1.hiclipart.com/preview/365/352/961/simple-linux-logo-black-and-white-penguin-png-clipart.jpg';
  23.       let marker_icon2='https://p7.hiclipart.com/preview/368/650/539/tuxedo-linux-computer-icons-linux.jpg';
  24.       let marker_list=[
  25.         [-81.7680000,26.1741378,marker_icon],
  26.         [-81.7640001,26.1741470],
  27.         [-81.7780000,26.1741378,marker_icon2],
  28.         [-81.7640001,26.1721470]
  29.         ];
  30.  
  31.       for(m of marker_list){
  32.         addMarker(m[0],m[1],m[2]);
  33.       }
  34.  
  35.       function addMarker(lon,lat,icon_url){
  36.  
  37.  
  38.         let cor = new OpenLayers.LonLat(lon, lat).transform(
  39.         new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  40.         map.getProjectionObject() // to Spherical Mercator Projection
  41.         );
  42.  
  43.         if(icon_url !== undefined){
  44.           var icon = new OpenLayers.Icon(icon_url,size,offset);
  45.         }
  46.         markers.addMarker(new OpenLayers.Marker(cor,icon));
  47.       }
  48.  
  49.     </script>
  50.   </body>
  51. </html>
  52.  
Add Comment
Please, Sign In to add comment