132 lines
3.7 KiB
HTML
132 lines
3.7 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<title>OpenLayers Simplest Example</title>
|
||
|
|
<div id="demoMap" style="height:400px"></div>
|
||
|
|
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
map = new OpenLayers.Map("demoMap");
|
||
|
|
var mapnik = new OpenLayers.Layer.OSM();
|
||
|
|
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
|
||
|
|
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
|
||
|
|
//var position = new OpenLayers.LonLat(37.443195, 55.888869).transform( fromProjection, toProjection);
|
||
|
|
//var position = new OpenLayers.LonLat(30.2158, 60.0052).transform( fromProjection, toProjection);
|
||
|
|
|
||
|
|
//var zoom = 12;
|
||
|
|
|
||
|
|
map.addLayer(mapnik);
|
||
|
|
//map.setCenter(position, zoom);
|
||
|
|
|
||
|
|
var markers = new OpenLayers.Layer.Markers( "Markers" );
|
||
|
|
map.addLayer(markers);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Interaction; not needed for initial display.
|
||
|
|
selectControl = new OpenLayers.Control.SelectFeature(markers);
|
||
|
|
map.addControl(selectControl);
|
||
|
|
|
||
|
|
//To be filled before passing to web browser
|
||
|
|
PointMapToLonLat(<<<LON>>>, <<<LAT>>>, <<<ZOOM>>>);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function PointMapToLonLat(lon, lat, zoom)
|
||
|
|
{
|
||
|
|
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
|
||
|
|
map.setCenter(position, zoom);
|
||
|
|
}
|
||
|
|
|
||
|
|
function ActivateSelectControl()
|
||
|
|
{
|
||
|
|
selectControl.activate();
|
||
|
|
}
|
||
|
|
|
||
|
|
function DeactivateSelectControl()
|
||
|
|
{
|
||
|
|
selectControl.deactivate();
|
||
|
|
}
|
||
|
|
|
||
|
|
function MarkerAddressFromState(state)
|
||
|
|
{
|
||
|
|
var marker_addr = "";
|
||
|
|
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker.png";
|
||
|
|
|
||
|
|
|
||
|
|
if (state == 0)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_mobile.png";
|
||
|
|
}
|
||
|
|
else if (state == 1)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker.png";
|
||
|
|
}
|
||
|
|
else if (state == 2)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_alarm.png";
|
||
|
|
}
|
||
|
|
else if (state == 3)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_exclusion.png";
|
||
|
|
}
|
||
|
|
else if (state == 4)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_throw.png";
|
||
|
|
}
|
||
|
|
else if (state == 5)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_carousel.png";
|
||
|
|
}
|
||
|
|
else if (state == 6)
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_assault.png";
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
marker_addr = "http://mephi1984.jino.ru/osm/marker_alarm.png";
|
||
|
|
}
|
||
|
|
|
||
|
|
return marker_addr;
|
||
|
|
}
|
||
|
|
|
||
|
|
function AddMarker(x, y, state)
|
||
|
|
{
|
||
|
|
var marker_addr = MarkerAddressFromState(state);
|
||
|
|
|
||
|
|
var size = new OpenLayers.Size(21,25);
|
||
|
|
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
|
||
|
|
var icon = new OpenLayers.Icon(marker_addr, size, offset);
|
||
|
|
|
||
|
|
var lon_Lat = new OpenLayers.LonLat(x, y).transform(fromProjection, toProjection);
|
||
|
|
markers.addMarker(new OpenLayers.Marker(lon_Lat, icon));
|
||
|
|
}
|
||
|
|
|
||
|
|
function Clear()
|
||
|
|
{
|
||
|
|
markers.clearMarkers();
|
||
|
|
}
|
||
|
|
|
||
|
|
function AddMarkerWithPopup(x, y, state, text)
|
||
|
|
{
|
||
|
|
|
||
|
|
var marker_addr = MarkerAddressFromState(state);
|
||
|
|
|
||
|
|
var size = new OpenLayers.Size(21,25);
|
||
|
|
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
|
||
|
|
var icon = new OpenLayers.Icon(marker_addr, size, offset);
|
||
|
|
|
||
|
|
var lon_Lat = new OpenLayers.LonLat(x, y).transform(fromProjection, toProjection);
|
||
|
|
|
||
|
|
var marker = new OpenLayers.Marker(lon_Lat, icon);
|
||
|
|
|
||
|
|
marker.events.register('mousedown', marker, function(evt) { alert(text); OpenLayers.Event.stop(evt); });
|
||
|
|
|
||
|
|
markers.addMarker(marker);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|