Making Leaflet Map with GeoJSON

[ebeshero]

Now that we have some geoJSON to work with, let's set up a map on the website to pull in all the data.

Resources: Leaflet Quick Start Guide: https://leafletjs.com/examples/quick-start/

Using GeoJSON with Leaflet: NOTE: Much of what's here is not what we need right now. https://leafletjs.com/examples/geojson/ Try the example.html linked at the bottom and view the page source to see the connecting parts: https://leafletjs.com/examples/geojson/example.html

view-source:https://leafletjs.com/examples/geojson/example.html

[ebeshero]

Try copying the page code into your own file and save locally. Remove some bits to see what each piece is doing.

[ebeshero]

Now that we have a map up and each tree has a pointer on it, it's time to fine-tune!

• [ ] Make the name property to display in panel on click (or just simply appear). This looks like a good lead: https://gis.stackexchange.com/questions/340698/dynamic-map-sidebar-with-info-from-marker-upon-click with JS Fiddle here: https://jsfiddle.net/TomazicM/ox43cbth/5/

• [ ] Let's try a couple of new geoJSON variables to distinguish conifers from deciduous (and other combinations). Probably best with new XQuery exports.

• [ ] Make sure we do the batch image processing to work with manageable image filesizes for the web. I will work with ImageMagick following guidance in this article: https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/