Basic map

strotgen · Nov 6, 2017 · 53150bf · 53150bf
1 parent f7b1885
commit 53150bf
Show file tree

Hide file tree

Showing 9 changed files with 2,740 additions and 2 deletions.
diff --git a/.idea/mexico-leaflet.iml b/.idea/mexico-leaflet.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
-# mexico-leaflet
-A map of Mexico with Leaflet and Geojson
+# Map of Mexico with Leaflet and Geojson
+A map of Mexico divided by states and municipalities. Made with Leaflet and Geojson. 
+![screenshot](https://user-images.githubusercontent.com/14982436/32421004-1b616b72-c259-11e7-8789-b810505bf636.png)
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<html>
+<head>
+  <title>México - Mapa</title>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"/>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
+  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+  <style>
+    #map{ height: 100% }
+  </style>
+
+</head>
+<body>
+
+  <div id="map"></div>
+
+  <script>
+  var map = new L.Map("map", {center: [19.4326, -99.13], zoom: 5})
+      .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
+
+      $.getJSON("states.geojson",function(data){
+       L.geoJson(data).addTo(map);
+     });
+
+     var munjson;
+     $.getJSON("municipalities.geojson", setgeoJson);
+
+      function setgeoJson(data)
+      {
+       var geoJsonLayer = L.geoJson(data, {
+         style: function(feature){
+           var fillColor;
+           colors = ["#85C1E9", "#A9CCE3", "#3498DB", "#2E86C1", "#2874A6"];
+           fillColor = colors[Math.floor(Math.random() * colors.length)];
+           return { color: "#fff", weight: 0.2, fillColor: fillColor, fillOpacity: .5 };
+         },
+         onEachFeature: function(feature, layer){
+           layer.bindPopup( "<strong>" + feature.properties.mun_name + "</strong><br/> Código de municipio: " + feature.properties.mun_code + "<br/> Código de estado: " + feature.properties.state_code )
+         }
+       }
+     ).addTo(map);
+       geoJsonLayer.eachLayer(function (layer) {
+           layer._path.id = 'estado' + layer.feature.properties.state_code+'-mun'+layer.feature.properties.mun_code;
+       });
+      }
+  </script>
+</body>
+</html>