Script to view more points on Open Street Maps

Posted on May 19, 2018 by admin 
<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>

    var map;

	
    // The overlay layer for our marker, with a simple diamond as symbol
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: 'marker.png',
            graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
            title: '${tooltip}'
        })
    });

	


    // The location of our marker and popup. We usually think in geographic
    // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
    var myPoint1 = new OpenLayers.Geometry.Point(-0.1279688, 51.5077286)
        .transform('EPSG:4326', 'EPSG:3857');

    // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myPoint1, {tooltip: 'OpenLayers Tooltips 1'})
    ]);
	
	
	// The location of our marker and popup. We usually think in geographic
    // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
    var myPoint2 = new OpenLayers.Geometry.Point(-0.1279688, 51.5041111)
        .transform('EPSG:4326', 'EPSG:3857');

    // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myPoint2, {tooltip: 'OpenLayers Tooltips 2'})
    ]);



    // Finally we create the map
    map = new OpenLayers.Map({
        div: "mapdiv", 
		projection: "EPSG:3857",
        layers: [new OpenLayers.Layer.OSM(), overlay],
        center: myPoint1.getBounds().getCenterLonLat(), 
		zoom: 15
    });
    

  </script>
</body></html>
This entry was posted in Javascript, Web. Bookmark the permalink.