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.myjino.ru/osm/marker.png";
 | |
|         
 | |
|         
 | |
|         if (state == 0)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_mobile.png";
 | |
| 		}
 | |
| 		else if (state == 1)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker.png";
 | |
| 		}
 | |
| 		else if (state == 2)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_alarm.png";
 | |
| 		}
 | |
|         else if (state == 3)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_exclusion.png";
 | |
| 		}
 | |
|         else if (state == 4)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_throw.png";
 | |
| 		}
 | |
|         else if (state == 5)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_carousel.png";
 | |
| 		}
 | |
|         else if (state == 6)
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.ru/osm/marker_assault.png";
 | |
| 		}
 | |
|         else
 | |
| 		{
 | |
| 			marker_addr = "http://mephi1984.myjino.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> |