document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" href="./lib/leaflet.css">
  5.     <link rel="stylesheet" href="./lib/leaflet.label.css">
  6.     <style type="text/css">
  7.         body {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         html, body, #demo-map {
  12.             height: 100%;
  13.             background: #555
  14.         }
  15.     </style>
  16.     <script src="./lib/leaflet.js"></script>
  17.     <script src="./lib/leaflet.label.js"></script>
  18.     <script src="./lib/leaflet.ajax.min.js"></script>
  19. </head>
  20.  
  21. <body>
  22.     <div id="demo-map"></div>
  23.     <script>
  24.     // initiaize map
  25.     var northWest = new L.LatLng(22.878, 113.745);
  26.     var southEast = new L.LatLng(22.301, 114.630);
  27.     var restrictBounds = new L.LatLngBounds(northWest, southEast);
  28.     var mapOptions = {
  29.         maxBounds: restrictBounds,
  30.         minZoom: 10,
  31.         maxZoom: 12,
  32.         scrollWheelZoom: false
  33.     };
  34.  
  35.     var map = L.map(\'demo-map\', mapOptions).setView([22.62, 114.18], 10);
  36.    
  37.     // load polygons from geoJSON file
  38.     var geojsonLayer = new L.GeoJSON.AJAX("./city.geojson", {
  39.  
  40.         style:{
  41.             "fillColor": "#e60000" ,
  42.             "weight": 0,
  43.             "color": "black",
  44.             "fillOpacity": 0
  45.         },
  46.  
  47.         onEachFeature: function (feature, layer) {
  48.             // add label on hover
  49.             layer.bindLabel("<b>EN: </b>" + feature.properties.name_en + "<br><b>PI: </b>"+ feature.properties.name_pi + "<br><b>CN: </b>" + feature.properties.name_cn);
  50.             // highlight districts on hover
  51.             layer.on({
  52.                 mouseover: highlightFeature,
  53.                 mouseout: resetHighlight,
  54.             })
  55.         }
  56.     });
  57.  
  58.     function highlightFeature(e) {
  59.         var layer = e.target;
  60.         layer.setStyle({
  61.             fillOpacity: 0.35,
  62.             weight: 1.5,
  63.         });
  64.  
  65.         if (!L.Browser.ie && !L.Browser.opera) {
  66.             layer.bringToFront();
  67.         }
  68.     }
  69.  
  70.     function resetHighlight(e) {
  71.         geojsonLayer.resetStyle(e.target);
  72.     }
  73.  
  74.     // add static map as image
  75.     var imageUrl = \'./city_small.jpg\'
  76.     imageBounds = [[22.878, 113.745], [22.301, 114.630]];
  77.     L.imageOverlay(imageUrl, imageBounds).addTo(map);
  78.     geojsonLayer.addTo(map);
  79.   </script>
  80. </body>
  81. </html>
');