 |
| Openlayer Maps |
Starting with OpenLayers
Here is how to create a basic map with OpenLayers. The only thing you need to do is to add the Openlayers JS file in your web page.
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
//Html
<div id="map"></div>
//JavaScript
var map = new OpenLayers.Map('map');
var osm_layer = new OpenLayers.Layer.OSM();
map.addLayers([osm_layer]);
Adding Zoom Level and Center Location
//Convert the coordinates into GPS format
var cent_lonlat = new OpenLayers.LonLat(77.2300, 28.6100)
.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:3857'));
//The layers
var osm_layer = new OpenLayers.Layer.OSM();
var map = new OpenLayers.Map({
div: "map",
displayProjection: new OpenLayers.Projection("EPSG:4326", "EPSG:3857"),
center: cent_lonlat,
zoom: 5,
layers: [osm_layer]
});
Add Google Maps Layer to OpenLayers
OpenLayers are flexible enough to support a number of layers like Google Maps. Here is how to add Google Map layers to OpenLayers:
Add Zoom Scale to OpenLayers
By default Openlayers provide two buttons for “Zoomin” and “Zoomout”. If you want complete scale for zoom, just add the following line:
map.addControl(new OpenLayers.Control.PanZoomBar());
Add Markers & Popups to Openlayers
For adding markers to our Openlayer maps, first of all we need to add a new “Vector Layer” to the map. Then a “Select” control is added to this vector layer. This select control will allow us to click on the layer so that we can add markers on the clicked location.
Draw Polygon on the Openlayers Map
Openlayers support drawing shapes on the maps. Here is an example of how to do that:
