Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

leaflet gis stackexchange

By: a guest on Nov 23rd, 2012  |  syntax: JavaScript  |  size: 2.86 KB  |  hits: 676  |  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. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <title>Test Map</title>
  6.                
  7.                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8.                 <link rel="stylesheet" href="./js/leaflet/leaflet.css" />
  9.                 <!--[if lte IE 8]><link rel="stylesheet" href="./leaflet/leaflet.ie.css" /><![endif]-->
  10.                 <link rel="stylesheet" href="./js/cluster/MarkerCluster.css" />
  11.                 <link rel="stylesheet" href="./js/cluster/MarkerCluster.Default.css" />
  12.                 <link rel="stylesheet" href="./js/leaflet-search/leaflet-search.css" />
  13.                 <!--[if lte IE 8]><link rel="stylesheet" href="./cluster/MarkerCluster.Default.ie.css" /><![endif]-->
  14.                 <script src="./js/jquery.js"></script>
  15.                 <style>
  16.                         body {
  17.                                 padding: 0;
  18.                                 margin: 0;
  19.                         }
  20.  
  21.                         html, body, #map {
  22.                                 height: 100%;
  23.                         }
  24.                 </style>
  25.         </head>
  26.         <body>
  27.                 <div id="map"></div>
  28.                 <script src="./js/leaflet/leaflet.js"></script>
  29.                 <script src="./js/cluster/leaflet.markercluster.js"></script>
  30.                 <script src="./js/leaflet-search/leaflet-search.js"></script>
  31.                 <script>
  32.                         var simpCounter = 0;
  33.                         var defaultStyle = 0;
  34.                         var geojsonLayer = 0;
  35.                         var dbgVal = -1;
  36.                        
  37.                         function debug(name, valAdj) {
  38.                                 if(typeof(valAdj)==='undefined') valAdj = 0;
  39.                                 if(typeof(name)==='undefined') name = 'Undefined Location';
  40.                                 dbgVal += valAdj;
  41.                                 console.log(name + ': ' + dbgVal);
  42.                         }
  43.                                
  44.                         debug('Start Value');
  45.                                
  46.                         $.getJSON('./gisdata/dots.geojson', function(data){
  47.                                 debug('Init JSON Layer');
  48.                                 geojsonLayer = L.geoJson(data);
  49.                                 geojsonLayer.addTo(map);
  50.                                 console.log(map.hasLayer(geojsonLayer));
  51.                         });
  52.                        
  53.                         function getJson(simp){
  54.                                 var url = simp;
  55.                                 map.removeLayer(geojsonLayer);
  56.                                 $.getJSON(url, function(data){
  57.                                         geojsonLayer = L.geoJson(data);
  58.                                         geojsonLayer.addTo(map);
  59.                                 });
  60.                                 }
  61.                                                        
  62.                        
  63.                         var cloudmadeURL = 'http://{s}.tile.cloudmade.com/API/{styleId}/256/{z}/{x}/{y}.png'
  64.                         var dayTime = L.tileLayer(cloudmadeURL, {styleId: 997});
  65.                         var     nightTime = L.tileLayer(cloudmadeURL, {styleId: 999}); 
  66.  
  67.                         var baseTiles = {
  68.                                 "Light": dayTime,
  69.                                 "Dark": nightTime
  70.                         };
  71.                        
  72.                         var map = L.map('map', {
  73.                                 center: [37.2153, -93.2981],
  74.                                 zoom: 5,
  75.                                 layers: [dayTime]
  76.                                 });    
  77.                                
  78.                         L.control.layers(baseTiles).addTo(map);
  79.                        
  80.                         map.on('zoomend', function(e) {
  81.                                 if (map.getZoom() >= 7 && map.getZoom() <= 10) {
  82.                                         if (simpCounter == 0 || simpCounter == 2) {
  83.                                         getJson('./gisdata/dots.geojson');
  84.                                         simpCounter = 1;
  85.                                         }
  86.                                 }
  87.                                 else if (map.getZoom() >= 11) {
  88.                                         if (simpCounter == 0 || simpCounter == 1) {
  89.                                         getJson('./gisdata/stores.geojson');
  90.                                         simpCounter = 2;
  91.                                         }
  92.                                 }
  93.                                 else if (map.getZoom() <= 7) {
  94.                                         if (simpCounter == 1 || simpCounter == 2) {
  95.                                         getJson('./gisdata/stores.geojson');
  96.                                         simpCounter = 0;
  97.                                         }
  98.                                 }
  99.                                 });
  100.                 </script>
  101.         </body>
  102. </html>