open layers demo

by maxim75

HTML

<script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<link rel="stylesheet" href="http://www.geolocation.ws/css/open-layers-style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">


<div id="map" />

CSS

/*
http://openlayers.org/dev/examples/style.mobile.css
http://www.geolocation.ws/css/open-layers-style.css
*/

#map
{
    position      : absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
}

.olControlAttribution {
    position      : absolute;
    font-size     : 10px;
    bottom        : 0 !important;
    right         : 0 !important;
    background    : rgba(0,0,0,0.1);
    font-family   : Arial;
    padding       : 2px 4px;
    border-radius : 5px 0 0 0;
}

JavaScript

/*
    https://raw.github.com/gist/2785815/0e780d980dbc8b341519ebd530d15439e901fe32/gistfile1.txt
http://openlayers.org/dev/OpenLayers.mobile.js

http://www.geolocation.ws/js/OpenLayers.js

http://openlayers.org/api/2.11/OpenLayers.js
*/

function GetWebMercatorLonLatFromWGS84GeographicCoordinates(Lon, Lat){
    var WGS84Projection = new OpenLayers.Projection("EPSG:4326");
    var WebMercatorProjection = new OpenLayers.Projection("EPSG:900913");
    var WebMercatorLonLat = new OpenLayers.LonLat(Lon, Lat);
    WebMercatorLonLat.transform(WGS84Projection, WebMercatorProjection);
    return WebMercatorLonLat;
}

$(document).ready(function() {


    console.log("here load ");
    
    
    var wg84 = new OpenLayers.Projection("EPSG:4326");
    var sm = new OpenLayers.Projection("EPSG:900913");
 
    var geolocate = new OpenLayers.Control.Geolocate({
        id: 'locate-control',
        geolocationOptions: {
            enableHighAccuracy: false,
            maximumAge: 0,
            timeout: 7000
        }
    });
    
    var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: "http://www.geolocation.ws/images/freebase-icon.png",
            graphicOpacity: 1.0,
            graphicWidth: 16,
            graphicHeight: 16,
            graphicYOffset: 0
        })
    });
    
    var lonLat = GetWebMercatorLonLatFromWGS84GeographicCoordinates(30.4, 50.4);
    var point = (new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)).transform(new OpenLayers.Projection("EPSG:4326"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    console.log(pointFeature);
    sprintersLayer.addFeatures([pointFeature]);
 
 
    var selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {
        autoActivate:true,
        onSelect: function() {}});        
    
    var map = new OpenLayers.Map({
        div: 'map',
        theme: null,
        projection: wg84,
       ...