2a:null 2b:["$","title",null,{"children":"Leaflet Plugins/Extensions and Full Screen | Shipeng Sun | Observable"}] 31:Tbde,nycMap = { let container = DOM.element('div', {id: `nyc_sd_map_div`, style: `width:${width}px;height:${width/1.8}px` }); yield container; let map = L.map(container, {fullscreenControl: true, fullscreenControlOptions: {forcePseudoFullscreen: false}, });// Did not set view because we are using "fit bounds" to get the polygons to determine this let esriImage = L.tileLayer.provider('Esri.WorldImagery'); let cartoMap = L.tileLayer.provider('CartoDB.Positron').addTo(map); let nycSchoolLayer = L.geoJson(nyc_schooldistricts, { //instantiates a new geoJson layer using built in geoJson handling weight: 2, //Attributes of polygons including the weight of boundaries and colors of map. color: "blue", fillColor: "brown", fillOpacity: 0.3 }).bindTooltip((l) => { //binds a popup when clicking on each polygon to access underlying data return "School District " + l.feature.properties.school_dist; }).addTo(map); //Adds the layer to the map. map.fitBounds(nycSchoolLayer.getBounds().pad(-0.80)); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation L.control.layers({"ESRI Imagery": esriImage, "Carto Location": cartoMap}, {"NYC School Districts": nycSchoolLayer} ).addTo(map); let container_resize = () => { // map size is defined by its parent element. let width = container.parentElement.offsetWidth; let height = (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) ? container.parentElement.offsetHeight : (width / 1.6); container.style.width = null || width + 'px'; container.style.height = null || height + 'px'; }; window.onresize = () => { container_resize(); }; container_resize(); map.on('enterFullscreen', function () { map.getContainer().parentElement.requestFullscreen(); //d3.select("#nyc_sd_map_div").style("height", "100%"); //d3.select("#nyc_sd_map_div").style("width", "100%"); let widthL = container.parentElement.offsetWidth; let heightL = (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) ? container.parentElement.offsetHeight : (widthL / 1.8); console.log("W:" + widthL + "; H: " + heightL); container.style.width = widthL + 'px'; container.style.height = heightL + 'px'; }); map.on('exitFullscreen', function () { //d3.select("#nyc_sd_map_div").style("height", "600px"); }); mutable mapVariables = [map, nycSchoolLayer]; }32:T691,nycSchoolMap = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2.0}px` }); yield container; let map = L_m.map(container, {fullscreenControl: true, fullscreenControlOptions: { position: 'topleft', title: 'fullscreen map', titleCancel: 'exit fullscreen display' } } );// Did not set view because we are using "fit bounds" to get the polygons to determine this let osmLayer = L_m.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); let nycSchoolLayer = L_m.geoJson(nyc_schooldistricts, { //instantiates a new geoJson layer using built in geoJson handling weight: 1, //Attributes of polygons including the weight of boundaries and colors of map. color: "#432", }).bindTooltip((l) => { //binds a popup when clicking on each polygon to access underlying data return "School District " + l.feature.properties.school_dist; }).addTo(map); //Adds the layer to the map. /* let marker = new DriftMarker([40.7678, -73.9645]).addTo(map); marker.slideTo([40.7486, -73.9840], { duration: 2000, keepAtCenter: false }); */ map.fitBounds(nycSchoolLayer.getBounds()); //finds bounds of polygon and automatically gets map view to fit (useful for interaction and not having to 'cook' the map zoom and coordinates as in map instantiation }33:[{"id":"71e271627d4a77afbc0f838479f7fcbc120e5eb9d562a1ac248446f2c7f6a74ad7d42894af979afee45fb5cfb7c54c73744e99af534949749d66f0eb147a2489","href":"https://static.observableusercontent.com/files/71e271627d4a77afbc0f838479f7fcbc120e5eb9d562a1ac248446f2c7f6a74ad7d42894af979afee45fb5cfb7c54c73744e99af534949749d66f0eb147a2489","name":"School Districts.geojson","type":"application/geo+json","lastModified":1712795064905.591,"size":3757678},{"id":"697d85d0f69b63e5d8f218e73fe4cd14bd92422ccb97ba79b12d93e51f920ecddbe5cc47267c47552244258e5a39404854f9a4dfde99071ef45befde93f55a04","href":"https://static.observableusercontent.com/files/697d85d0f69b63e5d8f218e73fe4cd14bd92422ccb97ba79b12d93e51f920ecddbe5cc47267c47552244258e5a39404854f9a4dfde99071ef45befde93f55a04","name":"Control.FullScreen_Observable.js","type":"application/javascript","lastModified":1712801837914.454,"size":7958},{"id":"b8f7eaddce0f7da28a4f27fed00f6c4453604333d9206ecb70171a04313c62e7a58ab3b795ada703587a62212e2d48acb4d1ccafc25b67bc481feb42371a6a2a","href":"https://static.observableusercontent.com/files/b8f7eaddce0f7da28a4f27fed00f6c4453604333d9206ecb70171a04313c62e7a58ab3b795ada703587a62212e2d48acb4d1ccafc25b67bc481feb42371a6a2a","name":"usa_0.json","type":"application/json","lastModified":1672810029302.935,"size":45645},{"id":"d260a9c3352dd218e04ec8dc2e6adf33383df62c6637e31840924f85e5121972806545f1602f8899426875ebaef14b1a5085e1399397452d71697f988fccb906","href":"https://static.observableusercontent.com/files/d260a9c3352dd218e04ec8dc2e6adf33383df62c6637e31840924f85e5121972806545f1602f8899426875ebaef14b1a5085e1399397452d71697f988fccb906","name":"NYC_Schooldistricts.json","type":"application/json","lastModified":1672810962672.253,"size":27312}] 2e:{"id":"b82e5247dd192972","slug":"simple_leaflet","title":" Leaflet Plugins/Extensions and Full Screen ","thumbnail":"e46b5aca0d5e8af3d820a4ddd918c419a2f1ca14c561ca8d19479579789b055b","access_level":"public","create_time":"$D2023-01-04T05:21:46.800Z","update_time":"$D2025-04-25T17:20:27.722Z","view_time":null,"first_public_time":"$D2023-01-04T05:21:46.800Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":417,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"7cfd303a81cea969","slug":"web-basics","title":"Leaflet for WebGIS","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"type":"notebook","body":{"title":" Leaflet Plugins/Extensions and Full Screen ","cells":[{"id":42,"value":"

Leaflet Plugins/Extensions and Full Screen

","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"### Simple map with Leaflet.","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"

\n Observable has native support for Leaflet maps. One can easily add an ___Interative Map___ cell and then add some extra features allowed by Leaflet. \n

","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"map = {\n const container = yield htl.html`

`;\n //const map = create_map(container, {map: {center: { lat: 40.7678, lng: -73.9645 }, zoom: 17, fullscreenControl: true }, layer: null});\n const map = L.map(container, {fullscreenControl: true}).setView([40.7678, -73.9645], 18);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n L.marker([40.7678, -73.9645], {title:\"Hunter College Main Campus\", riseOnHover: true}).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"## Loading Leaflet Plug-ins ","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"

\nOne advantage of the Leaflet ecosystem is the extended Plug-in libraries. However, it is not very straightforward to combine the base leaflet and extra plug-in libraries in the Observable notebooks. Here I show two approaches using the import and require methods, respectively.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"

\nFirst, we can combine the base leaflet and plug-in modules using import. As the ES6 module is relatively new, many plug-ins do not support this yet. So, this could be very limiting. In addition, importing multiple related and dependable libraries requires some hack.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"// Load leaflet and a full screen plugin using import (modern module mode)\n// Note fullscreen mode does not work for this notebook style visualization because the cell controls the parent DIV.\n// Need some exploration\nL_m = {\n //const Lbasic = await import(\"https://cdn.skypack.dev/leaflet\");\n // the Leaflet module will be loaded by the fullscreen module.\n const LfullScreen = await import(\"https://cdn.skypack.dev/@bepo65/leaflet.fullscreen\").catch( () => {});\n return LfullScreen.default;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"The legacy [require approach](https://observablehq.com/@observablehq/require) has better support for almost all plug-ins. Additionally, the Node.js backed NPM manages the JavaScript libraries much better than skypack.dev.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"// Load both leaflet and plugin libraries using require (the legacy approach)\n// https://observablehq.com/@observablehq/how-to-require-stubborn-modules\nLa = {\n //const L = await require('leaflet@1.9.0');\n const Lp = await require('https://leaflet-extras.github.io/leaflet-providers/leaflet-providers.js').catch(() => {});\n return Lp;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"

Best Practice

\n\nA more efficient and recommended way of using require with multiple libraries separated by comma. To make the task easier, the Module require debugger tool helps find the best way to pull in a JavaScript library or module. ","pinned":false,"hidden":false,"mode":"html"},{"id":161,"value":"L = await require('leaflet@1.9.4', 'leaflet-providers@1.13.0', 'leaflet.fullscreen@3.0.1/Control.FullScreen.js');","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"controlFullscreen_observable = FileAttachment(\"Control.FullScreen_Observable.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"### Load GeoJSON file","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"nyc_schooldistricts = FileAttachment(\"School Districts.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"## Full Screen for Leaflet Maps","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"\nClick on this Full Screen button below first, then use the Leaflet full.screen control on Leaflet. Press ESC to get out of full screen.\n","pinned":false,"hidden":false,"mode":"html"},{"id":216,"value":"addFullScreenButton = function () {\n const buttona = html`