Embedding a Leaflet map on a website

3 Views

What are some ways to embed a Leaflet map onto one’s website?

I’ve explored other posts that mention iframe, and plugins like MapsMarker.

Read More

But, what is a step-by-step way to do it?

My site uses a WordPress CMS. Can I host my html/css/js files directly on WP? Where do I put them? Or, do I need to make a folder on the file manager of my host (Host Gator)?

(I’ve been self-hosting in MAMP to test it out, which works well).

I appreciate the help.

Post Views: 3

Related posts

1 comment

  1. So, the confusing part for me was where do I put my html, css, and js files so that they can be served to my webpage?

    I ended up making a folder in the file manager of my web host (Host Gator), which created a unique page of the webmap with the folder’s name. Then I used that link with iframe to embed it on a specific page.

    1. Log into the control panel of your web host and go to File Manager.
    2. Create a parent folder (let’s call it “test”, for example) in the public html folder of your site.
    3. Organize the parent folder just the way you did on your local host (i.e. perhaps you stored code in other folders like ‘script’, ‘css’ or ‘leaflet’, etc.)
    4. Upload all your code files and put them in the proper place.

    –This creates a new page on your site. Now, you can go to http://www.yoursite.com/test–

    The way I got the map onto my specific page was by using an iframe plugin.

    • For WordPress, just search for the plugin called “iframe”, download, and activate it.
    • Then, use this shortcode in your page: <iframe src="http://yoursite.com/test/" width="1300"(adjust for yourself) height="540"(adjust for yourself)> </iframe>

    And you’re good!

    I tried Leaflet Maps Marker and Leaflet Map plugins, but those didn’t match up to what I was looking for.

Comments are closed.