31:T624,svgPatternCode2 = md`~~~svg ~~~ `32:[{"id":"83d64d31f563a7dcf6802809d4dfa8a5ea0e56773d3dee3a1f4f4110bbfae67ea68ce25dfa7d10a3cb10091e7560eb0c37279807deff6f74309c326443b0fce8","href":"https://static.observableusercontent.com/files/83d64d31f563a7dcf6802809d4dfa8a5ea0e56773d3dee3a1f4f4110bbfae67ea68ce25dfa7d10a3cb10091e7560eb0c37279807deff6f74309c326443b0fce8","name":"states.geojson","type":"application/geo+json","lastModified":1595349014291.126,"size":89263}] 2f:{"title":"Leaflet Pattern Fills","cells":[{"id":0,"value":"md`# Leaflet Pattern Fills\n\nA demonstation of using SVG pattern fills on GeoJSON data overlays with [LeafletJS](https://leafletjs.com/), an open source web mapping library. Scroll on to see how this is accomplished (without a Leaflet plugin!).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof shuffle = button({\n value: \"Shuffle\",\n description: \"Changes how patterns are applied to the map below\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"map = {\n shuffle;\n\n const { lat, lng, z } = mapConfig;\n\n const container = DOM.element('div', {\n style: `width:${width}px; height:500px`\n });\n yield container;\n\n const map = L.map(container, { scrollWheelZoom: false });\n map.setView([lat, lng], z);\n\n L.tileLayer(\n \"https://a.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png\",\n { minZoom: 1, maxZoom: 18 }\n ).addTo(map);\n\n const statesLayer = L.geoJson(data, {\n style: statesStyle,\n onEachFeature\n }).addTo(map);\n\n statesLayer.bindPopup(layer => {\n return layer.feature.properties.name;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`Using the [fillColorScale](#fillColorScale) array, create a corresponding array of Observable's \\`DOM.uid\\` to reference each of the patterns in our SVG (one for each fill color):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"patternIds = fillColorScale.map((d, i) => DOM.uid(`pattern-${i}`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`Next, create a ${DOM.text(\n \"`","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`The above code outputs CSS class definitions that look like:\n~~~css\n.pattern-fill-0 {\n fill: url(\"very-long-file-name.html#id\");\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`It's worth noting that if you want to do this outside of Observable, you could have your SVG patterns live in its own SVG file, then reference them using the file path with the id appended at the end. \n\nFor example: \n~~~css\n.my-cool-pattern {\n fill: url(\"path/to/my.svg#pattern-id\");\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`Next we create the block that renders the SVG patterns. Rather than type the SVG pattern definitions repetitively or copy & paste them, create them programatically using D3.JS with our \\`fillColorScale\\` as the data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"patterns = {\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", 0)\n .attr(\"height\", 0);\n\n const defs = svg.append(\"defs\");\n\n const patterns = defs\n .selectAll(\"pattern\")\n .data(fillColorScale)\n .join(\"pattern\")\n .attr(\"id\", (_d, i) => `${patternIds[i].id}`)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 8)\n .attr(\"height\", 8)\n .attr(\"patternUnits\", \"userSpaceOnUse\")\n .attr(\"patternContentUnits\", \"userSpaceOnUse\")\n .attr(\"patternTransform\", \"rotate(45)\");\n\n patterns.each(function(d) {\n d3.select(this).call(path, d);\n d3.select(this).call(path, \"#fff\");\n });\n\n function path(selection, fillColor) {\n selection\n .append(\"path\")\n .attr(\"stroke\", fillColor)\n .attr(\"stroke-opacity\", fillColor === \"#fff\" ? 0 : 1)\n .attr(\"stroke-width\", 4)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"none\")\n .attr(\"d\", \"M0 2 H 8\");\n }\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`This will create an SVG element that looks roughly like the following:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`Notice how each ${DOM.text(\n \"\"\n)} has a unique \"id\" attribute that may be referenced by our CSS.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`To use the SVG patterns with our data overlays in Leaflet, we apply a CSS class name to each state polygon (refered to as a \"layer\" in Leaflet terminology), via the \\`onEachFeature\\` option passed to our \\`L.geoJson()\\` states object.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"onEachFeature = (feature, layer) => {\n layer.options.className = `pattern-fill-${patternChoice()}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`We may also adjust the styling by passing in a function for the \\`style\\` option in our \\`L.geoJson\\` states layer. The \\`fillColor\\` value may be used as a fallback / alternate fill value if a pattern isn't always desired. Note that the fill value from the CSS classname will override the \\`fillColor\\` value here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"statesStyle = feature => {\n const choice = patternChoice(); // applies a pattern at random\n return {\n color: strokeColorScale[choice],\n fillColor: fillColorScale[choice],\n fillOpacity: fillOpacity,\n weight: strokeWeight\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## Utils\n\nHelpers, constants, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"patternChoice = () => Math.floor(Math.random() * 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"fillOpacity = 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"strokeWeight = 1.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"fillColorScale = [\"#d9f0a3\", \"#78c679\", \"#238443\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"strokeColorScale = [\"#addd8e\", \"#41ab5d\", \"#005a32\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"mapConfig = ({\n lat: 40,\n lng: -97,\n z: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## Data\n\nData stolen from this [LeafletJS tutorial](https://leafletjs.com/examples/choropleth/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"data = FileAttachment(\"states.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}