When I first started my in my current position, I was asked to develop some GIS apps using open source programming. I chose to develop my prototype web pages in Leaflet. I found Leaflet easy just using some simple JavaScript and JQuery.
At first I was using the Esri-Leaflet plugin to bring ArcServer REST Services into Leaflet. Later I found I was able to create simple one page PHP pages that would serve my data as a web service. Like a REST service I was able to hit the PHP page and get back GeoJSON, I could even hit the page with a query string and return focused data that my app was calling for. For things like county, state, or municipal boundaries that didn't change I was able to save my data as GeoJSON in a file, then serve the static file instead of the dynamic data from a webpage. The end result is now I don't really rely on ArcServer much, but I still use the plug in for the background basemaps.
Most things we do in GIS only happen every 6 months or so. We always remember it was hard to find an answer and when we did it was usually such a simple solution we often had a DUH! moment. Jump 6 months later we know it's a simple solution but we can't remember it. From this and from teaching I learned how to document everything, and make it simple enough for next time. Now I'm always being asked to do something quick, just like what you did for ... Now I'm thinking it would be great if I could just find that code.
To save time, I'm posting generic examples, I've learned from others code and now maybe someone will right click, view source and copy/paste my code to get their code working. gis.stackexchange.com has helped me through some of the learning curves but often it's just a hint and I often need to see a working example. Hopefully this will help you. Because I've learned JavaScript on the job and as needed, I try to keep my code as simple and basic as I can. That makes it easier to teach and troubleshoot. I realize many places you can knock 5 lines of code into one and optomize it. Keeping it simple has saved me time in documentation and questions from other new programmers.
Add Marker by Textbox I used this to show how two text boxes and a button can call a function, which adds a marker to a map and zooms to it. Map
Simple map from GeoJSON, Here is one of the first examples I made, it's a simple map that reads from a GeoJSON file and plots the points as circleMarkers, it has a popup and will zoom to the extents of the points.. Map
Simple GeoJSON PolygonA simple map using a GeoJSON polygon file as a data source. I have a basic popup with a layer on click function that changes the selected polygon to yellow and "resets" the others back to their original color. Polygon map My JSON file, You may want to right click save target as..
3 Simple maps, reading GeoJSON in Leaflet, I've include code explained pages with the working examples. These examples use the method of defining the layer and then using JQUery to load the GeoJSON file. I have a basic circleMarker map, a map where the CircleMarkers are symbolized with Unique values depending on the data value, and last one that shows the selected marker as a larger yellow circle. Basicaly I started simple and made the examples more complicated. Map 1 explained, Map 2 explained, Map 3 explained
2 GeoJSON files in one map Simple example that has confused a few students.Map
2 GeoJSON files in one map with checkboxes instead of layer control Making checkboxes to control the layers.Map
Demo Leaflet Sidebar, Checkbox, Pictures and filter 2 layers from one GeoJSON file.Map
Picture in popup This project is based on bird watching, I have Bald Eagle sightings and Golden Eagle sightings. The data file has "Pict" field that tells the point which picture to use. While I only have two images, in pratice each point could have it's on picture. This popup reads the picture name and creates an image source used by the popup. Popup Image Map, All files use by this demo.
Panel Map I setup 4 divs, header(panel), footer,side(sidebar) and map, and placed these into a div(wrapper) this gives the structure CSS needs. I also included some CSS for an HTML table that I put in the sidebar. When you click on a circle marker, the attribute information that used to go into a popup is now put into the sidebar HTML table. I do this by the onEachFeature function, where I have a layer on click function. Also in the layer on click function I grab the click coordinates and create a yellow circleMarker to show the "Selected" marker. I also included some code to clear the prior "Selected" marker, if it exists. Since my GeoJSON also has links to the logos, I can also place these into the table. Panel Map My JSON file, You may want to right click save target as..
Panel Select Map I setup 4 divs, header(panel), footer,side(sidebar) and map, and placed these into a div(wrapper) this gives the structure CSS needs. I also included some CSS for an HTML table that I put in the sidebar. Select a distance in the upper right, click on the map, all teams in that distance will be added to the sidebar. Now click on the team name in the sidebar, the team is selected and zoomed to. Panel SelectMap
Using JSON, Sometimes you have a JSON service to use, that doesn't meet the GeoJSON standards. Here I demonstrate a method on how to loop through the JSON source and create markers using a group layer. I also included a method to convert the JSON to GeoJSON and then use that as a data source for a layer in Leaflet. JSON Map explained, Map Another JSON example, View source to see how to use External JSON file or include JSON in your HTML file. Simple JSON
NY Leg. Map, I was tasked to create a map that could be used to identify which district you lived it. This map has three layers NY Senate, NY ASsembly, and US/NY House of Reps. There is a Address search which will geocode your address and drop a marker. In the upper right I've use a JQuery app that allows you to search by name, once selected it will turn on the correct layer and select and zoom to the correct boundary. I also setup a table on the side instead of a popup. The selected poly gets highlighted and unselects prior polygons. The layer switcher also is a radio button as you really only want one layer at a time on. The reps pictures are from the official sites, if they don't show it's because a dead link from their office. Map
CircleMarkers, Reading a GeoJSON file with JQuery, I map my points out as circleMarkers. I read the type from attributes and symbolize them based on their unique values. If you click on one it will populate the HTML table on the right and place a marker to show which circle you clicked on. The table does have a Google hyperlink. I've also included a simple legend. Map
JQuery AutoComplete Search, In trying to improve my skills in searching, This example reads from the GeoJSON attributes on loading and assigns the state name to the Leaflet internal ID, so when you select a state by searching it fires off a click event that zooms to the state polygon and opens a popup. Write up with a map link
Leaflet Search Plug-in, I wanted to test out the Leaflet Search Control. Here I read the GeoJSON in using JQuery, create a simple popup, then I load the search control, define the layer to search, the field to search, and then just use setView to zoom to the point. I set the zoom to 12 for grins. Map
Unique Value CircleMarkers and right Panel, This is a simple map using circleMarkers with unique value symbology, click on a marker and the attributes appear in the panel table. The selected point turns yellow and some images load in the panel table. Map
Icons for marker and in layer control, I defined two markers and used an icon instead of a marker, I also put the icon in the layer switcher control. Map
Filter layer control, I defined a GeoJSON layer by the "feature.properties.Verified" value being either 'Y' or 'N'. I also did a little CSS work to put a green or red circle by the radio button. Map
Select the points in each polygon Using TURF, Small demo, need to open the console window (F12) when the map loads, it reads the polygons and selects the points inside them, pushing info to an alert Map
Select points within 150 miles, Small demo, Selects GeoJSON point within a distance of (150) miles from mouse click, sends results to console Map
Select points by Polygon, Select GeoJSON points by drawing a polygon or a circle, The selected points are show with a yellow circle marker and the GeoJSON is sent to the console window. An alert shows the number of points selected. To clear a selection, select nothing. ( Draw your graphic in an area without points.). This example uses the Leaflet Draw plug-in and TURF for the Polygon Intersection. Map
Select points with in X miles, modified, I took the prior exampls and rewrote it using a better method for loading GeoJSON data. I include a select menu (combobox) to allow you to change the search distance. I also modified it to work off a Feature click and you can comment out the map click. Another improvement is a better layout using CSS with a parent/child format. This allows you to fill the page better. I've include a full write up to help explain it. Write up Map
Buffer w/ Turf of polylines, I selected some of NY's interstates and made a GeoJSON file out of them. Then I created a polyline layer in Leaflet and using Turf JS, created a 2 mile buffer. Since each road segment was buffered, I used Turf to dissolve the individual buffers into one buffer. I installed a button to buffer because on page load, it would start to buffer before the roads were fully loaded. However this could be modified to read a distance textbox and select miles or feet as options, and the button would then fire off the buffer process reading your options values. The buffer takes a few seconds but it's working on a few hundred miles of road. Map
Select points within the buffer, Using my prior buffer script, I also added a GeoJSON point layer. Basically these were McDonalds with 50 miles of Clifton Park NY. Once the buffer is created, I run a intersectPts function. First the points are converted to GeoJSON as per Turf. Then I use TURF''s within function to determine the intersected points, next I count them and send this to the page's span tags, finally bringing the intersected points in as another layer, and sending them behind the original points as a blue halo. Map
Turf Circle vs Turf Buffer vs Leaflet Circle, This example was to compare drawing a circle from the Leaflet Draw tool to a circle in Turf buffer. I noticed a difference even though I passed them the same center point and radius. To confirm the result I used Turf Circle and it corresponded with the Leaflet drawing. The red circle is Turf buffer, black is Turf circle, and white dashed is leaflet circle. Note: leaflet uses lat/lng(Y,X) and turf lng/lat (X,Y). Turf uses GeoJSON and GeoJSON doesn't really have a circle description, so the circles are really drawn in steps, like a 64 sided polygon. If you change the steps to 4 you have a square. Map
ArcServer MapService as Dynamic and Feature Layer, The same ArcServer MapService was brought into Leaflet, As a Feature layer you can set it's symbology. I also show how to create it's popups. See the layer control to change between them. Map
Using ArcServer Services for Reverse GeoCoding, A map that has an ArcServer Map Service for GeoCoding, I'm using Leaflet with the Esri plugin, basically click near a road and the popup should show the address. Map
work