Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Openlayers InitMap

By: hopelephant on Apr 24th, 2012  |  syntax: JavaScript  |  size: 13.54 KB  |  hits: 35  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. document.write("<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAC4NMkD3OYIQdPL927iDqCBT9bux_xGfyV12OBoFbhvTIqz2NMRQL9qeqR6gHeekVBXe62GpjpBkopg'></script>");
  2. document.write("<script src='http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers'></script>");
  3. document.write("<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>");
  4.  
  5. var map, lon, lat, zom, markers, icon, iconpast, state, past, center, vehicles, livetimer, tvalue, areas, routes, pastroutes, wkt;
  6. lon = 35;
  7. lat = 39.5;
  8. zom = 6;
  9. state = true; // default icon mode
  10. past = false;
  11. center = false;
  12. tvalue = 5000;
  13.  
  14.  
  15. function InitMap() {
  16.     OpenLayers.ImgPath = "Scripts/OpenLayers/theme/dark/";
  17.  
  18.     var mapoptions = {
  19.         projection: new OpenLayers.Projection("EPSG:900913"),
  20.         displayProjection: new OpenLayers.Projection("EPSG:4326"),
  21.         units: "m",
  22.         numZoomLevels: 21,
  23.         maxResolution: 156543.0339,
  24.         maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34),
  25.         transitionEffect: 'resize',
  26.         controls: [
  27.             new OpenLayers.Control.PanZoomBar(),
  28.                         new OpenLayers.Control.Navigation(),
  29.                         new OpenLayers.Control.ScaleLine(),
  30.                         new OpenLayers.Control.MousePosition(),
  31.                         new OpenLayers.Control.LayerSwitcher(),
  32.                         new OpenLayers.Control.KeyboardDefaults()
  33.         ]
  34.     };
  35.     map = new OpenLayers.Map('map', mapoptions);
  36.  
  37.     //var layerGoogle = new OpenLayers.Layer.Google("Google Harita", { 'sphericalMercator': true, numZoomLevels: 21 });
  38.     //var layerGoogle2 = new OpenLayers.Layer.Google("Google Uydu", { type: G_HYBRID_MAP, 'sphericalMercator': true, numZoomLevels: 21 });
  39.     var layerYahoo = new OpenLayers.Layer.Yahoo("Yahoo Harita", { 'sphericalMercator': true, numZoomLevels: 21 });
  40.     var layerYahoo2 = new OpenLayers.Layer.Yahoo("Yahoo Uydu", { 'type': YAHOO_MAP_HYB, 'sphericalMercator': true, numZoomLevels: 21 });
  41.     var layerVirtual = new OpenLayers.Layer.VirtualEarth("Virtual Harita", { 'type': VEMapStyle.Road, 'sphericalMercator': true, numZoomLevels: 20 });
  42.     var layerVirtual2 = new OpenLayers.Layer.VirtualEarth("Virtual Uydu", { 'type': VEMapStyle.Hybrid, 'sphericalMercator': true, numZoomLevels: 20 });
  43.  
  44.     areas = new OpenLayers.Layer.Vector("Bölgeler");
  45.     areas.style = { fillColor: '#0000ff', fillOpacity: 0.1, strokeColor: '#0000ff', strokeOpacity: 0.7, strokeDashstyle: 'dash' };
  46.     routes = new OpenLayers.Layer.Vector("Rotalar");
  47.     routes.style = { strokeColor: '#0000ff', strokeOpacity: 0.7, strokeWidth: 3 };
  48.     map.addLayers([/*layerGoogle, layerGoogle2, */layerVirtual, layerVirtual2, layerYahoo, layerYahoo2, routes, areas]);
  49.     map.setCenter(clonlat(lon, lat), zom);
  50.  
  51.     wkt = new OpenLayers.Format.WKT({
  52.         'internalProjection': new OpenLayers.Projection("EPSG:900913"),
  53.         'externalProjection': new OpenLayers.Projection("EPSG:4326")
  54.     });
  55.     vehicles = new Array();
  56.     setIcons();
  57.     setDateEdits();
  58.     writeInfo(-1, -1, -1);
  59. }
  60.  
  61. function clonlat(lon, lat) {
  62.     return new OpenLayers.LonLat(lon, lat).
  63.     transform(
  64.         new OpenLayers.Projection("EPSG:4326"),
  65.         new OpenLayers.Projection("EPSG:900913")
  66.     );
  67. }
  68.  
  69. function setIcons() {
  70.     var size = new OpenLayers.Size(24, 24);
  71.     var calculateOffset = function (size) { return new OpenLayers.Pixel(-(size.w / 2), -(size.h / 2)); };
  72.     icon = new OpenLayers.Icon('Images/Markers/', size, null, calculateOffset);
  73.  
  74.     size = new OpenLayers.Size(20, 34);
  75.     calculateOffset = function (size) { return new OpenLayers.Pixel(-(size.w / 2), -(size.h)); };
  76.     iconpast = new OpenLayers.Icon('Images/Markers/default.png', size, null, calculateOffset);
  77. }
  78.  
  79. function getIcon(st, dir, im) {
  80.     var ico = icon.clone();
  81.     if (state) {
  82.         ico.url = ico.url + st + '/' + dir + '.png';
  83.     }
  84.     else {
  85.         if (past) {
  86.             ico = iconpast.clone();
  87.             im = im + '';
  88.             var div1 = "<div style=\"background-image:url('Images/Markers/" + im + "'); width:20px; height:34px; text-align:center; color:white; font-size:11px; font-weight:bold\">";
  89.             var div2 = "</div>";
  90.             ico.imageDiv.innerHTML = div1 + dir + div2;
  91.         }
  92.         else
  93.             ico.url = ico.url + im;
  94.     }
  95.     return ico;
  96. }
  97.  
  98. function getIconUrl(st, dir, im) {
  99.     var icourl = 'Images/Markers/';
  100.     if (state)
  101.         icourl += st + '/' + dir + '.png';
  102.     else
  103.         icourl += im;
  104.     return icourl;
  105. }
  106.  
  107. function updateIcon(b) {
  108.     state = b;
  109.     if (past) {
  110.         var p;
  111.         for (var i = 0; i < vehicles.length; i++) {
  112.             var vehicle = vehicles[i];
  113.             if (state) { p = vehicle.dir; }
  114.             else { p = vehicle.vid; }
  115.             markers.removeMarker(vehicle.marker);
  116.             var ll = vehicle.marker.lonlat;
  117.             var marker = new OpenLayers.Marker(ll, getIcon(vehicle.st, p, vehicle.im));
  118.             marker.id = vehicle.vid;
  119.             marker.events.register('click', marker, function () { showPopup(this.id, this.lonlat); });
  120.             markers.addMarker(marker);
  121.             marker.icon.imageDiv.style.cursor = 'pointer';
  122.             vehicle.marker = marker;
  123.         }
  124.     }
  125.     else
  126.         for (var i = 0; i < vehicles.length; i++) {
  127.             vehicles[i].marker.icon.url = getIconUrl(vehicles[i].st, vehicles[i].dir, vehicles[i].im);
  128.             vehicles[i].marker.draw();
  129.         }
  130. }
  131.  
  132. function updateCenter(b) {
  133.     center = b;
  134.     mapSetCenter();
  135. }
  136.  
  137. function addVehicleMarker(data) {
  138.     past = false;
  139.     removeMarkersAndPopups();
  140.     markers = new OpenLayers.Layer.Markers("Araçlar");
  141.     map.addLayer(markers);
  142.     var warcount = 0;
  143.     if (data.length > 0) {
  144.         for (i = 0; i < data.length; i++) {
  145.             var vehicle = data[i];
  146.             var marker = new OpenLayers.Marker(clonlat(vehicle.lon, vehicle.lat), getIcon(vehicle.st, vehicle.dir, vehicle.im));
  147.             marker.id = vehicle.vid;
  148.             marker.events.register('click', marker, function () { showPopup(this.id, this.lonlat); });
  149.             markers.addMarker(marker);
  150.             marker.icon.imageDiv.style.cursor = 'pointer';
  151.             addVehicle(vehicle, marker);
  152.         }
  153.     }
  154.     mapSetCenter();
  155.     return data.length;
  156. }
  157.  
  158. function addPastMarker(data) {
  159.     past = true;
  160.     var maxSpeed = 0;
  161.     var plt = "";
  162.     removeMarkersAndPopups();
  163.     markers = new OpenLayers.Layer.Markers("Geçmiş Noktalar");
  164.     pastroutes = new OpenLayers.Layer.Vector("Geçmiş Rota");
  165.     pastroutes.style = { strokeColor: '#0000ff', strokeOpacity: 0.7, strokeWidth: 3 };
  166.     map.addLayer(pastroutes);
  167.     map.addLayer(markers);
  168.     var p;
  169.     var wkttext = "MULTILINESTRING(";
  170.     for (i = 0; i < data.length; i++) {
  171.         var vehicle = data[i];
  172.         wkttext += vehicle.lon + " " + vehicle.lat + ",";
  173.         vehicle.im = 'past' + vehicle.st + '.png';
  174.         vehicle.vid = i + 1;
  175.         if (state) p = vehicle.dir;
  176.         else p = vehicle.vid;
  177.         var marker = new OpenLayers.Marker(clonlat(vehicle.lon, vehicle.lat), getIcon(vehicle.st, p, vehicle.im));
  178.         marker.id = i + 1;
  179.         marker.events.register('click', marker, function () { showPopup(this.id, this.lonlat); });
  180.         markers.addMarker(marker);
  181.         marker.icon.imageDiv.style.cursor = 'pointer';
  182.         addVehicle(vehicle, marker);
  183.         maxSpeed = maxSpeed > vehicle.spd ? maxSpeed : vehicle.spd;
  184.     }
  185.     wkttext = wkttext.substring(0, wkttext.length - 1) + ")";
  186.     addPastRoutes(wkttext);
  187.     if (vehicles[0])
  188.         plt = vehicles[0].plt;
  189.     writePastInfo(plt, data.length, maxSpeed);
  190. }
  191.  
  192. function mapSetCenter() {
  193.     if (center && markers.markers.length == 1)
  194.         map.setCenter(markers.markers[0].lonlat);
  195. }
  196.  
  197. function showPopup(id, lonlat) {
  198.     for (var i = 0; i < map.popups.length; i++) {
  199.         if (map.popups[i].id == id)
  200.             return;
  201.     }
  202.     var vehicle = getVehicleByID(id);
  203.     var detail = '<div>';
  204.     detail = '<b>Id: </b>' + vehicle.vid + '<br/>';
  205.     detail += '<b>Plaka: </b>' + vehicle.plt + '<br/>';
  206.     detail += '<b>Hız: </b>' + vehicle.spd + '<br/>';
  207.     detail += '<b>Durum: </b>' + vehicle.st + '<br/>';
  208.     detail += '<b>İmage url: </b>' + vehicle.im + '<br/>';
  209.     detail += '<b>Warning : </b>' + vehicle.war + '<br/>';
  210.     detail += '<b>Yön: </b>' + vehicle.dir + '<br/>';
  211.     detail += '<b>Zaman: </b>' + vehicle.time + '</div>';
  212.     var popup = new OpenLayers.Popup.FramedCloud('chicken',
  213.                                          lonlat,
  214.                                          null,
  215.                                          detail,
  216.                                          null, true, function () { removeAtPopup(vehicle.vid) });
  217.     popup.id = vehicle.vid;
  218.     map.addPopup(popup);
  219. }
  220.  
  221.  
  222. function addVehicle(v, m) {
  223.     i = vehicles.length;
  224.     vehicles[i] = new Object();
  225.     vehicles[i].vid = v.vid;
  226.     vehicles[i].plt = v.plt;
  227.     vehicles[i].spd = v.spd;
  228.     vehicles[i].time = v.time;
  229.     vehicles[i].dir = v.dir;
  230.     vehicles[i].st = v.st;
  231.     vehicles[i].war = v.war;
  232.     vehicles[i].im = v.im;
  233.     vehicles[i].marker = m;
  234. }
  235.  
  236.  
  237. function getVehicleByID(id) {
  238.     for (var i = 0; i < vehicles.length; i++) {
  239.         if (vehicles[i].vid == id) {
  240.             return vehicles[i];
  241.             break;
  242.         }
  243.     }
  244. }
  245.  
  246. function removeAtPopup(vehicleId) {
  247.     for (var i = 0; i < map.popups.length; i++) {
  248.         if (map.popups[i].id == vehicleId) {
  249.             map.removePopup(map.popups[i]);
  250.             break;
  251.         }
  252.     }
  253. }
  254.  
  255. function removeMarkersAndPopups() {
  256.     for (var i = 0; i < map.layers.length; i) {
  257.         //alert(map.layers[i].name + past);
  258.         if (map.layers[i].name == 'Geçmiş Noktalar')
  259.             map.removeLayer(map.layers[i]);
  260.         else if (map.layers[i].name == 'Geçmiş Rota')
  261.             map.removeLayer(map.layers[i]);
  262.         else if (map.layers[i].name == 'Araçlar')
  263.             map.removeLayer(map.layers[i]);
  264.         else i++;
  265.     }
  266.     vehicles = new Array();
  267.     markers = null;
  268.     pastroutes = null;
  269.     for (var i = map.popups.length; i > 0; i--) {
  270.         map.removePopup(map.popups[i - 1]);
  271.     }
  272. }
  273.  
  274. function updateVehicleMarker(data) {
  275.     for (i = 0; i < data.length; i++) {
  276.         var vehicle = data[i];
  277.         var exVehicle = getVehicleByID(vehicle.vid);
  278.         exVehicle.plt = vehicle.plt;
  279.         exVehicle.spd = vehicle.spd;
  280.         exVehicle.dir = vehicle.dir;
  281.         exVehicle.st = vehicle.st;
  282.         exVehicle.war = vehicle.war;
  283.         exVehicle.im = vehicle.im;
  284.         exVehicle.time = vehicle.time;
  285.         markers.removeMarker(exVehicle.marker);
  286.         var ll = clonlat(vehicle.lon, vehicle.lat);
  287.         var marker = new OpenLayers.Marker(ll, getIcon(vehicle.st, vehicle.dir, vehicle.im));
  288.         marker.id = vehicle.vid;
  289.         marker.events.register('click', marker, function () { showPopup(this.id, this.lonlat); });
  290.         markers.addMarker(marker);
  291.         marker.icon.imageDiv.style.cursor = 'pointer';
  292.         exVehicle.marker = marker;
  293.  
  294.         for (var j = 0; j < map.popups.length; j++) {
  295.             if (map.popups[j].id == vehicle.vid) {
  296.                 map.removePopup(map.popups[j]);
  297.                 showPopup(vehicle.vid, ll);
  298.                 break;
  299.             }
  300.         }
  301.     }
  302.     mapSetCenter();
  303.     return data.length;
  304. }
  305.  
  306. function addAreas(WKTtext) {
  307.     var features = wkt.read(WKTtext);
  308.     var bounds;
  309.     if (features) {
  310.         if (features.constructor != Array) {
  311.             features = [features];
  312.         }
  313.         for (var i = 0; i < features.length; ++i) {
  314.             if (!bounds) {
  315.                 bounds = features[i].geometry.getBounds();
  316.             } else {
  317.                 bounds.extend(features[i].geometry.getBounds());
  318.             }
  319.         }
  320.         areas.addFeatures(features);
  321.         map.zoomToExtent(bounds);
  322.     }
  323. }
  324.  
  325. function removeAreasFeatures() {
  326.     areas.removeAllFeatures();
  327. }
  328.  
  329. function addRoutes(WKTtext) {
  330.     var features = wkt.read(WKTtext);
  331.     var bounds;
  332.     if (features) {
  333.         if (features.constructor != Array) {
  334.             features = [features];
  335.         }
  336.         for (var i = 0; i < features.length; ++i) {
  337.             if (!bounds) {
  338.                 bounds = features[i].geometry.getBounds();
  339.             } else {
  340.                 bounds.extend(features[i].geometry.getBounds());
  341.             }
  342.         }
  343.         routes.addFeatures(features);
  344.         map.zoomToExtent(bounds);
  345.     }
  346. }
  347.  
  348. function removeRoutesFeatures() {
  349.     routes.removeAllFeatures();
  350. }
  351.  
  352. function addPastRoutes(WKTtext) {
  353.     var features = wkt.read(WKTtext);
  354.     var bounds;
  355.     if (features) {
  356.         if (features.constructor != Array) {
  357.             features = [features];
  358.         }
  359.         for (var i = 0; i < features.length; ++i) {
  360.             if (!bounds) {
  361.                 bounds = features[i].geometry.getBounds();
  362.             } else {
  363.                 bounds.extend(features[i].geometry.getBounds());
  364.             }
  365.         }
  366.         pastroutes.addFeatures(features);
  367.         map.zoomToExtent(bounds);
  368.     }
  369. }
  370.  
  371. //function getTileURL(bounds) {
  372. //      var res = this.map.getResolution();
  373. //      var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  374. //      var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  375. //      var z = this.map.getZoom();
  376. //      var limit = Math.pow(2, z);
  377. //     
  378. //      if (y < 0 || y >= limit) {
  379. //          return OpenLayers.Util.getImagesLocation() + "404.png";
  380. //      } else {
  381. //          x = ((x % limit) + limit) % limit;
  382. //          return this.url + z + "/" + x + "/" + y + "." + this.type;
  383. //      }
  384. //}
create a new version of this paste RAW Paste Data