Markers

Ok, now that we have a base map, let's put some data on it! For this example, we're going to plot the locations of all the Skyline Chili restaurants in Ohio.

map.js

I'll step through this file with you, though you can see, most of the work we need to do is in formating the data. Unfortunately, this is 90% of any visualization project I've ever worked on. 



            
Result

            

                Let's take a look at the
                result here.
            




            
map.js - Fitting to Bounds

            

                So far, so good, but notice how we have the location and zoom
                level set by hand? What if we have data for a different area?
                If we tweak our code just a bit, we can have leaflet zoom to
                fit all of our markers automatically. The trick is to render
                the markers to a Feature Group. Watch the variable "markerLayer"
                in the code below.
            

            


            
Result

            

                Let's take a look at the
                result here.
            




            
map.js - Custom Markers

            

                Ok, but all of those blue markers are kind of... boring? Let's
                add some pizzaz (any designers in the room may want to close their eyes).
            

            

            
Result

            

                Let's take a look at the
                result here.
            



            
Further Reading

            

            

                Previous
                Next