Marker from User Input
Application which shows a marker at user provided input
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
<div id="map"></div>
<div id="inputForm">Latitude:
<input id="latitude" type="text" value="40"/>
Longitude:
<input id="longitude" type="text" value="-118"/>
<input id="foo" type="button" value="Add Marker" />
</div>
CSS
#map {
width:800x;
height:400px;
}
JavaScript
var map, basemap, markers;
$(document).ready(function () {
init_map();
$("#btn_addmarker").on("click", function () {
var lat = $("#latitude").val();
var lon = $("#longitude").val();
add_marker(lat, lon);
});
});
function init_map() {
map = new OpenLayers.Map('map');
basemap = new OpenLayers.Layer.OSM("Simple OSM Map");
map.addLayer(basemap);
markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
}
function add_marker(latitude, longitude) {
var lonLat = new OpenLayers.LonLat(longitude, latitude)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var point = new OpenLayers.Marker(lonLat);
markers.addMarker(point);
map.setCenter(lonLat, 8);
//console.log(latitude + ", " + longitude);
}
function foo(){
var lonLat = new OpenLayers.LonLat(-117, 41)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
map.setCenter(lonLat, 1);
}