31:T856,berkshire_map = { // Leaflet let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.2}px` }); yield container; // Initial View let map = L.map(container).setView([42.3824162, -73.2380902], 10); // Default Tile Layers [Basemap] let osmLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); // Additional Tile Layers [Basemaps] let world_imagry = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community', maxZoom: 17 } ); let world_topo = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community', maxZoom: 17 } ); // Base Layers [Basemap Selection] - We need at least one. let baseLayers = { "Open Street Maps": osmLayer, "World Imagery": world_imagry, "World Topo Map": world_topo }; // Control Layers [Show/Hide Features] let controlLayers = { "Farmer's Markets": farmers_markets, "Water Sports": water_sports, Skiing: skiing, Museums: museums, "Historic Sites": historic_sites, "Performing Arts": performing_arts }; let control_layers = new L.control.layers(baseLayers, controlLayers, { position: 'topright', collapsed: false }); map.addLayer(world_imagry); map.addControl(control_layers); // Data Layers towns.addTo(map); farmers_markets.addTo(map); water_sports.addTo(map); skiing.addTo(map); museums.addTo(map); historic_sites.addTo(map); performing_arts.addTo(map); }32:[{"id":"927315b7ff539d8b634bafbaddde5197023c3d0fe1c3690de952c531bded670f12f2e6b8f1b6ee195e24c6c764d9578840d50b65ebc1484cbd918cc320fa0e7e","href":"https://static.observableusercontent.com/files/927315b7ff539d8b634bafbaddde5197023c3d0fe1c3690de952c531bded670f12f2e6b8f1b6ee195e24c6c764d9578840d50b65ebc1484cbd918cc320fa0e7e","name":"berkshire_water_sports.geojson","type":"application/geo+json","lastModified":1612020735593.462,"size":15084},{"id":"056e65223828252b79fd55335ad15a994726bb5679376b220530941008c97c3f7dd45be550382c7bb22e9a1920b15f650fca3f48caaed9f907cb4c3ab11f90b2","href":"https://static.observableusercontent.com/files/056e65223828252b79fd55335ad15a994726bb5679376b220530941008c97c3f7dd45be550382c7bb22e9a1920b15f650fca3f48caaed9f907cb4c3ab11f90b2","name":"berkshire_historic_sites.geojson","type":"application/geo+json","lastModified":1612020735811.91,"size":6244},{"id":"82f91f5da3e4be3042a3fb54214c9f9de3f78807cc776bed27bc4bc6d590c2dc328bba8118c6dfb69200fa9f29552867ec7bad1ae5bf1aec2ac9e25d191b5cfe","href":"https://static.observableusercontent.com/files/82f91f5da3e4be3042a3fb54214c9f9de3f78807cc776bed27bc4bc6d590c2dc328bba8118c6dfb69200fa9f29552867ec7bad1ae5bf1aec2ac9e25d191b5cfe","name":"berkshire_farmers_markets.geojson","type":"application/geo+json","lastModified":1612020735744.608,"size":12266},{"id":"83ade73b244e658ca97096337823b3daf78575e1520848e5655864f1168e2345e8bcc2856544c812aaa2ed25b1e412a8ee05dd3fc119d21afe0826788e62079c","href":"https://static.observableusercontent.com/files/83ade73b244e658ca97096337823b3daf78575e1520848e5655864f1168e2345e8bcc2856544c812aaa2ed25b1e412a8ee05dd3fc119d21afe0826788e62079c","name":"berkshire_performing_arts.geojson","type":"application/geo+json","lastModified":1612020737498.148,"size":9974},{"id":"945e2a9758b73fac7e99f5b4c2c9784d8971ff0a1020382368a95f5bdcef2eb48c5fedfed7919111dfe1ea83f0a9ce1ce9600b7a0a9266505e0fcd61e108fb88","href":"https://static.observableusercontent.com/files/945e2a9758b73fac7e99f5b4c2c9784d8971ff0a1020382368a95f5bdcef2eb48c5fedfed7919111dfe1ea83f0a9ce1ce9600b7a0a9266505e0fcd61e108fb88","name":"berkshire_museums.geojson","type":"application/geo+json","lastModified":1612020737411.169,"size":7930},{"id":"3b59e5f8db020cb52c3381b64fafae923a0f67a1513e4610ecb1ac01fa025e48a1be90ad01b5fbeeac8d9d70799974c79933d6660c018b2014776c9375e0a5e1","href":"https://static.observableusercontent.com/files/3b59e5f8db020cb52c3381b64fafae923a0f67a1513e4610ecb1ac01fa025e48a1be90ad01b5fbeeac8d9d70799974c79933d6660c018b2014776c9375e0a5e1","name":"berkshire_skiing.geojson","type":"application/geo+json","lastModified":1612020735628.659,"size":3352}] 2f:{"title":"Mapping the Berkshires | Fun & Recreation","cells":[{"id":0,"value":"md`# Mapping the Berkshires
| Fun & Recreation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`\nI really enjoy my county! There's a lot of fun stuff around. Check it out:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`\nA glaring omission from my map are the hiking trails—our family's favorite! The [Berkshire Natural Resources Council](https://www.bnrc.org/) maintains a much more detailed [trail map](https://maps.bnrc.org/). I can't come close to replicating! I encourage anyone reading this to check it out.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"md`## Making This Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`\n#### Leaflet\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`\nAs indicated by the forking information shown at the top of this notebook, the foundations for this map were [created and shared](https://observablehq.com/@tmcw/leaflet) by [Tom MacWright](https://observablehq.com/@tmcw). Tom's notebook walks through the process of loading the [Leaflet.js](http://leafletjs.com/) library into Observable.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`\nHere's the Leaflet code:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`` // Leaflet's CSS is necessary for getting the map to render nicely in our notebook.","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"L = require('leaflet@1.7.1', 'https://unpkg.com/esri-leaflet@2.5.3')\n// I am using ESRI tile layers for the basemap\n// This requires additional JS\n// The newest version of Leaflet isn't playing nicely :( https://unpkg.com/esri-leaflet@2.5.3/dist/esri-leaflet.js","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`\nIf you're interested in a point of comparison, [Mike Bostock](https://observablehq.com/@mbostock) offers [a more concise approach](https://observablehq.com/@mbostock/hello-leaflet)—bundling together the CSS and JavaScript. I opted to use Tom's notebook because the components are more similar to the [traditional approach](https://leafletjs.com/examples/quick-start/), and this was more comfortable and intuitive for me initially (so maybe it will be for you, my imagined reader).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`\n---\n\n#### Marker Definitions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"md`\nWith Leaflet loaded into my notebook, my only remaining tasks were to gather and render out some data. The code below styles each feature layer used in the map, including layer color and opacity ([path class options](https://leafletjs.com/reference-1.7.1.html)):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"towns = L.geoJson(await berkshire_towns, {\n color: \"yellow\",\n weight: 2, \n opacity: 0.5,\n fillColor: \"none\",\n fillOpacity: 0.5,\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng)\n },\n onEachFeature: towns_popup, // this doesn't work well, b/c it is only triggered on the polygoin outline, \n // not the area within\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"towns_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['TOWN'] +\"

\")\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"farmers_markets = L.geoJson(await berkshire_farmers_markets, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng,farmers_markets_markerstyle)\n },\n onEachFeature: farmers_markets_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"farmers_markets_markerstyle = ({\n radius: 5,\n color: \"#17ee25\",\n weight: 1,\n opacity: 1,\n fillColor: \"#17ee25\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"farmers_markets_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"water_sports = L.geoJson(await berkshire_water_sports, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng, water_sports_markerstyle)\n },\n onEachFeature: water_sports_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"water_sports_markerstyle = ({\n radius: 5,\n color: \"#00eeff\",\n weight: 1,\n opacity: 1,\n fillColor: \"#00eeff\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"water_sports_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"skiing = L.geoJson(await berkshire_skiing, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng, skiing_markerstyle)\n },\n onEachFeature: skiing_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"skiing_markerstyle = ({\n radius: 5,\n color: \"#e5fcff\",\n weight: 1,\n opacity: 1,\n fillColor: \"#e5fcff\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"skiing_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"performing_arts = L.geoJson(await berkshire_performing_arts, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng, performing_arts_markerstyle)\n },\n onEachFeature: performing_arts_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"performing_arts_markerstyle = ({\n radius: 5,\n color: \"#e17de3\",\n weight: 1,\n opacity: 1,\n fillColor: \"#e17de3\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"performing_arts_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"museums = L.geoJson(await berkshire_museums, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng, museums_markerstyle)\n },\n onEachFeature: museums_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"museums_markerstyle = ({\n radius: 5,\n color: \"#ff2e2e\",\n weight: 1,\n opacity: 1,\n fillColor: \"#ff2e2e\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"museums_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"historic_sites = L.geoJson(await berkshire_historic_sites, {\n pointToLayer: function(feature, latlng) {\n return L.circleMarker(latlng, historic_sites_markerstyle)\n },\n onEachFeature: historic_sites_popup,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"historic_sites_markerstyle = ({\n radius: 5,\n color: \"#f9b90b\",\n weight: 1,\n opacity: 1,\n fillColor: \"#f9b90b\",\n fillOpacity: 0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"historic_sites_popup = function(feature, layer) {\n if (feature.properties) {\n layer.bindPopup(\"

\" + feature.properties['Name'] + \"
\" + \"\" + feature.properties['Website']+ \"\" +\"

\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`\n---\n\n#### Map Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`\nInformation on [town borders](https://docs.digital.mass.gov/dataset/massgis-data-community-boundaries-towns) used for this map was sourced from the [Massachusetts Document Repository](https://docs.digital.mass.gov/), a state pilot project aimed at sharing information with the public.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"berkshire_towns =(await fetch('https://s3.amazonaws.com/berkshire.guide/maps/berkshire_towns.geojson')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"md`\nThe [Berkshires Official Website](https://berkshires.org/) maintains a pretty extensive list of activities, which significantly informed this map. I made this to better understand where things are in relationship to one another. Berkshire is a big county (more than an hour's drive north to south), and I like to plan my outings. I decided to make this notebook to aid my planning.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"berkshire_farmers_markets = FileAttachment(\"berkshire_farmers_markets.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"berkshire_water_sports = FileAttachment(\"berkshire_water_sports.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"berkshire_skiing = FileAttachment(\"berkshire_skiing.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"berkshire_performing_arts = FileAttachment(\"berkshire_performing_arts.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"berkshire_museums = FileAttachment(\"berkshire_museums.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"berkshire_historic_sites = FileAttachment(\"berkshire_historic_sites.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`\n### Enjoy!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`\nI hope that if you're reading this that you enjoy clicking around and seeing all the fun stuff there is to do in the Berkshires!\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}