Skip to main content
  1. blog/

extrapolating the edges of a bounding box (Leaflet)

·2 mins

Following on from extrapolating the edges of a bounding box I created a Leaflet version of the map so I could enjoy the concept in an interactive manner. Now that I’ve finally integrated Leaflet into my site I can slap a Leaflet map into a blog post if I so desire, like this:

Fun fun fun.

(It’s not a particularly small screen / mobile-friendly map for the record. It is best enjoyed on a large screen with the ability to swoosh your cursor around the map.)

I also created a new /maps/* section on my site where I will experiment with embedding other mappy things and the like. For example, a new page in that section automatically embeds the Leaflet CSS and JS so I only need to include 4 shortcodes in a post to embed a map, rather than the 6 shortcodes I’ve used in this post.

i.e.

  1. style for map-specific CSS
  2. mapdiv for the map
  3. script for the data
  4. script for the map code

vs

  1. style for Leaflet CSS
  2. script for Leaflet JS
  3. style for map-specific CSS
  4. mapdiv for the map
  5. script for the data
  6. script for the map code

I guess I could make a single shortcode to include Leaflet CSS and JS but meh, I’m going with the more generic style and script shortcodes.

I’ve noted more details on the integration over here.