--- /dev/null
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+ <style>
+ .county-name {
+ font: 10px arial bold, sans-serif;
+ }
+ </style>
+ </head>
+ <body>
+
+ <!-- Leaflet Map -->
+ <h2>Leaflet Map With Alternate Style - Enhanced County Lines</h2>
+ <p>
+ This example places a few county outlines on a map of the state of Michigan.
+ </p><p>
+ The county outlines are saved as GeoJSON and can be donwloaded from "https://wambachers-osm.website/boundaries/".
+ This requires an OpenSteetMap account. Outlines have already been downloaded for MI counties.
+ See "Map_Outline_Data" directory.
+ </p><p>
+ Clicking on a county will zoom to that county. Clicking on a county name will go to the URL for that county.
+ In this demo, those links redisplay this page.
+ </p>
+ <div id="LeafletMap" style="height:100%; width: 100%;"></div>
+
+ <script type="text/javascript">
+ jQuery(document).ready(function($) {
+
+ var countiesDirectory = '../Map_Outline_Data/US_MI_Counties/';
+
+ // Create map with default center and size
+ var countyMap = L.map('LeafletMap').setView([46.5, -87.0], 8);
+
+ // Tile Server URL
+ // tileServer = 'https://maps.gaslightmedia.com/12312029-NoPlaceNames-95bfebd37e9e7d649daafa8762629084/{z}/{x}/{y}.png'; // GLM Tile Server
+ tileServer = 'http://192.168.44.12/hot/{z}/{x}/{y}.png'; // Chuck's development Tile Server
+
+ // Create Tile layer
+ L.tileLayer(tileServer, {
+ attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, \
+ <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \
+ Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+ maxZoom: 18
+ }).addTo(countyMap);
+
+ /*
+ * List of MI Upper Peninsula counties
+ *
+ * County name matches GeoJson file for the county.
+ * "latOffset" and "lonOffset" affect the displayed position of the county name link.
+ * NOTE: Offsets are buy conventional lat/lon value - i.e. use negative number
+ * for Longitude to move link to the left.
+ * "url" is added to the baseCountyUrl to generate the link address for a county
+ */
+ var upperMI = {
+ 'Alger': {latOffset: -0.10, lonOffset: -0.40, url: 'county=Alger'},
+ 'Baraga': {latOffset: -0.10, lonOffset: -0.10, url: 'county=Baraga'},
+ 'Chippewa': {latOffset: -0.02, lonOffset: -0.50, url: 'county=Cheppewa'},
+ 'Delta': {latOffset: 0.20, lonOffset: 0.00, url: 'county=Delta'},
+ 'Dickinson': {latOffset: 0.08, lonOffset: -0.06, url: 'county=Dickinson'},
+ 'Gogebic': {latOffset: -0.05, lonOffset: 0.00, url: 'county=Gogebic'},
+ 'Houghton': {latOffset: 0.15, lonOffset: -0.20, url: 'county=Houghton'},
+ 'Iron': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Iron'},
+ 'Keweenaw': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Keweenaw'},
+ 'Luce': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Luce'},
+ 'Mackinac': {latOffset: 0.18, lonOffset: -0.50, url: 'county=Mackinac'},
+ 'Marquette': {latOffset: -0.10, lonOffset: 0.00, url: 'county=Marquette'},
+ 'Menominee': {latOffset: 0.00, lonOffset: -0.08, url: 'county=Menominee'},
+ 'Ontonagon': {latOffset: 0.00, lonOffset: -0.15, url: 'county=Ontonagon'},
+ 'Schoolcraft': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Schoolcraft'}
+ };
+
+ // Base URL for building links to county pages
+ var baseCountyUrl = 'Highlight_Michigan_Counties.php?';
+
+ // Sets county name font size (right) when map is at zoom level (left).
+ // If aboive or below listed Zoom levels, no county name is displayed.
+ var countyNameZoom = {
+ 8: 14,
+ 9: 16,
+ 10: 18,
+ 11: 20,
+ 12: 22
+ };
+
+ // Set style for county display
+ function countyStyle(feature) {
+ return {
+ color: 'black', // Outline Color
+ opacity: 1, // Opacity of outline
+ weight: 2, // Weight of line (pixels width?)
+ fillColor: '', // Fill color for county interior
+ fillOpacity: 0.0, // Opacity of fill area
+ dashArray: '6', // Dashed outlines
+ };
+ }
+
+ // Hover event handler
+ function highlightCounty(e) {
+ var layer = e.target;
+ layer.setStyle({
+ weight: 3,
+ color: 'blue',
+ dashArray: '',
+ fillOpacity: 0.1
+ });
+
+ if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+ layer.bringToFront();
+ }
+ }
+
+ // Mouse out event handler
+ function resetSelectedCounty(e) {
+ var layer = e.target;
+ layer.resetStyle(e.layer);
+ // info.update();
+ }
+
+ // Zoom to County
+ function zoomToCounty(e) {
+ countyMap.fitBounds(e.target.getBounds());
+ }
+
+ // For each UP county
+ var countyLayer;
+ $.each(upperMI, function(county, countyData) {
+
+ // Get the GeoJson file for this county
+ $.get(countiesDirectory + county + '.GeoJson', function(countyFile) {
+
+ // Convert the county file to a JSON
+ var countyJSON = jQuery.parseJSON(countyFile);
+
+ // Add the county overlay to the map using "countyStyle" above
+ countyLayer = L.geoJson(countyJSON, {
+ style: countyStyle
+ }).addTo(countyMap);
+
+ // Add actions to county layer
+ countyLayer.on({
+ mouseover: highlightCounty,
+ mouseout: resetSelectedCounty,
+ click: zoomToCounty
+ });
+
+ // Get center of the county and add offsets
+ var center = countyLayer.getBounds().getCenter();
+ var center = new L.LatLng(center.lat + countyData.latOffset, center.lng + countyData.lonOffset);
+
+ // Create Div type icom for county names
+ var countyNameIcon = L.divIcon({
+ className: 'county-name',
+ html: '<a href="' + baseCountyUrl + countyData.url + '">' + county + '</a>'
+ });
+
+ // use county name icon as marker using center location calculated above.
+ L.marker(center, {
+ icon: countyNameIcon,
+ county: county,
+ url: countyData.url
+ }).addTo(countyMap);
+
+ });
+ });
+
+ // Adjust county name font size based on zoom level using countyNameZoom table
+ countyMap.on('zoomend', function () {
+ var zoomLevel = countyMap.getZoom();
+
+ // If there's no entry
+ if (!countyNameZoom[zoomLevel]) {
+ $('.county-name').css('font-size', 0);
+ } else {
+ var fontSize = countyNameZoom[zoomLevel];
+ $('.county-name').css('font-size', fontSize);
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
+++ /dev/null
-<html>
- <head>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
- <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <style>
- .county-name {
- font: 10px arial bold, sans-serif;
- }
- </style>
- </head>
- <body>
-
- <!-- Leaflet Map -->
- <h2>Leaflet Map With Alternate Style - Enhanced County Lines</h2>
- <p>
- This example places a few county outlines on a map of the state of Michigan.
- </p><p>
- The county outlines are saved as GeoJSON and can be donwloaded from "https://wambachers-osm.website/boundaries/".
- This requires an OpenSteetMap account. Outlines have already been downloaded for MI counties.
- See "Map_Outline_Data" directory.
- </p><p>
- Clicking on a county will zoom to that county. Clicking on a county name will go to the URL for that county.
- In this demo, those links redisplay this page.
- </p>
- <div id="LeafletMap" style="height:100%; width: 100%;"></div>
-
- <script type="text/javascript">
- jQuery(document).ready(function($) {
-
- var countiesDirectory = '../Map_Outline_Data/US_MI_Counties/';
-
- // Create map with default center and size
- var countyMap = L.map('LeafletMap').setView([46.5, -87.0], 8);
-
- // Tile Server URL
- // tileServer = 'https://maps.gaslightmedia.com/12312029-NoPlaceNames-95bfebd37e9e7d649daafa8762629084/{z}/{x}/{y}.png'; // GLM Tile Server
- tileServer = 'http://192.168.44.12/hot/{z}/{x}/{y}.png'; // Chuck's development Tile Server
-
- // Create Tile layer
- L.tileLayer(tileServer, {
- attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, \
- <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \
- Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
- maxZoom: 18
- }).addTo(countyMap);
-
- /*
- * List of MI Upper Peninsula counties
- *
- * County name matches GeoJson file for the county.
- * "latOffset" and "lonOffset" affect the displayed position of the county name link.
- * NOTE: Offsets are buy conventional lat/lon value - i.e. use negative number
- * for Longitude to move link to the left.
- * "url" is added to the baseCountyUrl to generate the link address for a county
- */
- var upperMI = {
- 'Alger': {latOffset: -0.10, lonOffset: -0.40, url: 'county=Alger'},
- 'Baraga': {latOffset: -0.10, lonOffset: -0.10, url: 'county=Baraga'},
- 'Chippewa': {latOffset: -0.02, lonOffset: -0.50, url: 'county=Cheppewa'},
- 'Delta': {latOffset: 0.20, lonOffset: 0.00, url: 'county=Delta'},
- 'Dickinson': {latOffset: 0.08, lonOffset: -0.06, url: 'county=Dickinson'},
- 'Gogebic': {latOffset: -0.05, lonOffset: 0.00, url: 'county=Gogebic'},
- 'Houghton': {latOffset: 0.15, lonOffset: -0.20, url: 'county=Houghton'},
- 'Iron': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Iron'},
- 'Keweenaw': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Keweenaw'},
- 'Luce': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Luce'},
- 'Mackinac': {latOffset: 0.18, lonOffset: -0.50, url: 'county=Mackinac'},
- 'Marquette': {latOffset: -0.10, lonOffset: 0.00, url: 'county=Marquette'},
- 'Menominee': {latOffset: 0.00, lonOffset: -0.08, url: 'county=Menominee'},
- 'Ontonagon': {latOffset: 0.00, lonOffset: -0.15, url: 'county=Ontonagon'},
- 'Schoolcraft': {latOffset: 0.00, lonOffset: 0.00, url: 'county=Schoolcraft'}
- };
-
- // Base URL for building links to county pages
- var baseCountyUrl = 'Highlight_Michigan_Counties.php?';
-
- // Sets county name font size (right) when map is at zoom level (left).
- // If aboive or below listed Zoom levels, no county name is displayed.
- var countyNameZoom = {
- 8: 14,
- 9: 16,
- 10: 18,
- 11: 20,
- 12: 22
- };
-
- // Set style for county display
- function countyStyle(feature) {
- return {
- color: 'black', // Outline Color
- opacity: 1, // Opacity of outline
- weight: 2, // Weight of line (pixels width?)
- fillColor: '', // Fill color for county interior
- fillOpacity: 0.0, // Opacity of fill area
- dashArray: '6', // Dashed outlines
- };
- }
-
- // Hover event handler
- function highlightCounty(e) {
- var layer = e.target;
- layer.setStyle({
- weight: 3,
- color: 'blue',
- dashArray: '',
- fillOpacity: 0.1
- });
-
- if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
- layer.bringToFront();
- }
- }
-
- // Mouse out event handler
- function resetSelectedCounty(e) {
- var layer = e.target;
- layer.resetStyle(e.layer);
- // info.update();
- }
-
- // Zoom to County
- function zoomToCounty(e) {
- countyMap.fitBounds(e.target.getBounds());
- }
-
- // For each UP county
- var countyLayer;
- $.each(upperMI, function(county, countyData) {
-
- // Get the GeoJson file for this county
- $.get(countiesDirectory + county + '.GeoJson', function(countyFile) {
-
- // Convert the county file to a JSON
- var countyJSON = jQuery.parseJSON(countyFile);
-
- // Add the county overlay to the map using "countyStyle" above
- countyLayer = L.geoJson(countyJSON, {
- style: countyStyle
- }).addTo(countyMap);
-
- // Add actions to county layer
- countyLayer.on({
- mouseover: highlightCounty,
- mouseout: resetSelectedCounty,
- click: zoomToCounty
- });
-
- // Get center of the county and add offsets
- var center = countyLayer.getBounds().getCenter();
- var center = new L.LatLng(center.lat + countyData.latOffset, center.lng + countyData.lonOffset);
-
- // Create Div type icom for county names
- var countyNameIcon = L.divIcon({
- className: 'county-name',
- html: '<a href="' + baseCountyUrl + countyData.url + '">' + county + '</a>'
- });
-
- // use county name icon as marker using center location calculated above.
- L.marker(center, {
- icon: countyNameIcon,
- county: county,
- url: countyData.url
- }).addTo(countyMap);
-
- });
- });
-
- // Adjust county name font size based on zoom level using countyNameZoom table
- countyMap.on('zoomend', function () {
- var zoomLevel = countyMap.getZoom();
-
- // If there's no entry
- if (!countyNameZoom[zoomLevel]) {
- $('.county-name').css('font-size', 0);
- } else {
- var fontSize = countyNameZoom[zoomLevel];
- $('.county-name').css('font-size', fontSize);
- }
- });
- });
- </script>
- </body>
-</html>
projects / prog / leaflet-demos.git / commitdiff