OSM/OpenLayers: Place marker on coordinates using custom image.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>OpenStreetMap & OpenLayers - Marker Example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> <script> /* OSM & OL example code provided by https://mediarealm.com.au/ */ var map; var mapLat = -33.829357; var mapLng = 150.961761; var mapDefaultZoom = 10; function initialize_map() { map = new ol.Map({ target: "map", layers: [ new ol.layer.Tile({ source: new ol.source.OSM({ url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([mapLng, mapLat]), zoom: mapDefaultZoom }) }); } function add_map_point(lat, lng) { var vectorLayer = new ol.layer.Vector({ source:new ol.source.Vector({ features: [new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')), })] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], src: "http://vps1.dyndns.info:8051/markers/svg/map-marker-blue.svg" }) }) }); map.addLayer(vectorLayer); } </script> </head> <body onload="initialize_map(); add_map_point(-33.8688, 151.2093);"> <div id="map" style="width: 100vw; height: 100vh;"></div> </body> </html>

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.