Mapa lokazliacji fotoradarów GITD (przykład aplikacji wykorzystującej API)

 

Uproszczony kod aplikacji

            function MapController(){
            this.odataSrc = 'http://open-data.org.pl:52999/rest/itd_fotoradary';
            this.map = null;
            this.markers = [];

            this.init = function(){
                var controller = this;

                this.initMap();
                this.loadMarkers(function(markers){
                    controller.displayMarkers(markers);
                });
            };

            this.displayMarkers = function(markers){
                var pointFeatures = [];
                var style = this.getPointStyle();
                for ( var i in markers ){
                    if ( this.isMarkerValid(markers[i]) ){
                        pointFeatures.push(this.createPointFeature(markers[i], style));
                    }
                }

                var layer = this.createVectorLayer();
                this.addSelectControlToLayer(layer);

                layer.addFeatures(pointFeatures);

                this.map.addLayer(layer);
            };

            this.addSelectControlToLayer = function(layer){
                var oHighlightControl = new OpenLayers.Control.SelectFeature( layer, {
                    hover: true,
                    highlightOnly: true,
                    renderIntent: 'temporary'
                });

                oHighlightControl.events.register('featurehighlighted', {control: oHighlightControl}, function(evt){
                    var feature = evt.feature; console.log(feature);
                });

                this.map.addControl(oHighlightControl);
                oHighlightControl.activate();
            };

            this.isMarkerValid = function(marker){
                return 'Latitude' in marker && 'Longitude' in marker && 'id' in marker;
            };

            this.createPointFeature = function(marker, style){
                var point = new OpenLayers.Geometry.Point(marker.Longitude, marker.Latitude);
                point.transform(this.map.displayProjection, this.map.getProjectionObject());
                var pointFeature = new OpenLayers.Feature.Vector(point, {'name' : marker.id}, style);

                return pointFeature;
            };

            this.getPointStyle = function(){
                var style = OpenLayers.Util.extend({}, this.getLayerStyle());
                style.strokeColor = "red";
                style.fillColor = "blue";
                style.graphicName = "circle";
                style.pointRadius = 1;
                style.strokeWidth = 3;
                style.rotation = 45;
                style.strokeLinecap = "butt";

                return style;
            };

            this.createVectorLayer = function(){
                var vectorLayer = new OpenLayers.Layer.Vector('markers', {
                    style: this.getLayerStyle(),
                    //renderers: renderer
                });

                return vectorLayer;
            };

            this.getLayerStyle = function(){
                var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
                style.fillOpacity = 0.2;
                style.graphicOpacity = 1;

                return style;
            };

            this.loadMarkers = function(callback){
                $.ajax({
                    url: this.odataSrc,
                    type: 'get',
                    contentType: 'application/json; charset=utf-8',
                    datatype: 'json',
                    beforeSend: function (XMLHttpRequest) {
                        //Specifying this header ensures that the results will be returned as JSON.
                        XMLHttpRequest.setRequestHeader("Accept", "application/json");
                    },
                    success: function(data, textStatus, jqXHR){
                        var markers = 'd' in data && 'results' in data.d ? data.d.results : [];

                        if ( callback && typeof(callback) === 'function' ){
                            callback(markers);
                        }
                    }
                });
            };

            this.initMap = function(){
                var map = new OpenLayers.Map('map', {
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326")
                });

                map = this.addBaseLayerToMap(map);
                //map = this.addControlsToMap(map);

                this.map = map;
            };

            this.addBaseLayerToMap = function(map){
                var layer = new OpenLayers.Layer.OSM("Simple OSM Map");
                map.addLayer(layer);
                map.setCenter(
                    new OpenLayers.LonLat(19.4, 52.6).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                    ), 7
                );

                return map;
            };

        };

        $(document).ready(function(){
            var mapController = new MapController();
            mapController.init();
        });