API tools faq
paste
Advertisement
CristianCantoro

Leaflet_example_with_Bing_Gmaps

CristianCantoro
Sep 24th, 2013
704
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Leaflet Layers Control Example</title>
  5.     <meta charset="utf-8" />
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9.     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"/>
  10.     <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
  11. </head>
  12. <body>
  13.     <div id="map" style="width: 600px; height: 400px"></div>
  14.  
  15.     <script src="export-geojson.js" type="text/javascript"></script>
  16.     <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
  17.     <script src="/home/cristian/Scrivania/leaflet/leaflet-plugins/layer/tile/Bing.js" type="text/javascript"></script>
  18.     <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
  19.     <script src="/home/cristian/Scrivania/leaflet/leaflet-plugins/layer/tile/Google.js" type="text/javascript"></script>
  20.  
  21.     <script>
  22.  
  23.         // parking icon from Open SVG Map Icons
  24.         // by L. Delucchi
  25.         // https://github.com/lucadelu/Open-SVG-Map-Icons
  26.         var parkingIcon = L.icon({
  27.             iconUrl: 'parking_32x32.png',
  28.             iconSize: [16, 16],
  29.             iconAnchor: [0, 0],
  30.             popupAnchor: [0, -14]
  31.         });
  32.  
  33.  
  34.         cloudmadeUrl = 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png'
  35.         cloudmadeAttribution = 'Map data &copy; 2013 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade';
  36.         cloudmadeKey = '74f3f6ca3f714d4ab3aab495f7d9e6e9'
  37.        
  38.         var minimal   = L.tileLayer(cloudmadeUrl, {
  39.                             styleId: 22677,
  40.                             attribution: cloudmadeAttribution,
  41.                             key: cloudmadeKey}),
  42.             midnight  = L.tileLayer(cloudmadeUrl, {
  43.                             styleId: 999,
  44.                             attribution: cloudmadeAttribution,
  45.                             key: cloudmadeKey}),
  46.             motorways = L.tileLayer(cloudmadeUrl, {
  47.                             styleId: 46561,
  48.                             attribution: cloudmadeAttribution,
  49.                             key: cloudmadeKey});
  50.  
  51.         var map = L.map('map', {
  52.             center: new L.LatLng(45.70, 9.64),
  53.             zoom: 13,
  54.             layers: [minimal]
  55.         });
  56.  
  57.         var ggl = new L.Google();
  58.  
  59.         var bingAttribution = "Map data &copy; 2013 OpenStreetMap contributors, Imagery &copy; 2013 Microsoft Corporation, Bing, &copy; 2010 GeoEye, &copy; 2010 TerraItaly, &copy; 2010 Blom"
  60.         var bingKey = 'AggYzpIFoBJd3Zx671A-O6V8RWue5cyuDgCNoQRnzFU3bedB5tSfpegsq1RB7kbD'
  61.         var bing = new L.BingLayer(bingKey, {
  62.                             attribution: bingAttribution,
  63.                             });
  64.  
  65.         var baseMaps = {
  66.             "Minimal": minimal,
  67.             "Bing": bing,
  68.             "Google": ggl
  69.         };
  70.  
  71.         function onEachFeature(feature, layer) {
  72.             var popupContent = "<b>Parcheggio pubblico</b><br />"
  73.  
  74.             if (feature.properties.name) {
  75.                 popupContent += "Nome: " + feature.properties.name + " ciao!"
  76.             }
  77.  
  78.             if(feature.geometry.type=="Polygon") {
  79.                   var x = 0;
  80.                   var y = 0;
  81.                   var numcoord = feature.geometry.coordinates[0].length;
  82.                   for(var c=0; c<numcoord; c++) {
  83.                     y += feature.geometry.coordinates[0][c][0]/numcoord;
  84.                     x += feature.geometry.coordinates[0][c][1]/numcoord;
  85.                   }
  86.                   // alert("here: " + x + "," + y)
  87.                   if(x!=0 && y!=0) {
  88.                     return L.marker([x, y], {icon: parkingIcon}).addTo(map)
  89.                         .bindPopup(popupContent);
  90.                   }
  91.             }
  92.  
  93.             layer.bindPopup(popupContent);
  94.  
  95.         }
  96.  
  97.         L.geoJson(parkings, {
  98.             pointToLayer: function (feature, latlng) {
  99.                 return L.marker(latlng, {icon: parkingIcon});
  100.             },
  101.  
  102.             onEachFeature: onEachFeature
  103.         }).addTo(map);
  104.  
  105.  
  106.         L.control.layers(baseMaps).addTo(map);
  107.  
  108.  
  109.     </script>
  110. </body>
  111. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!